Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

jQuery

Uploaded by

Prashant Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

jQuery

Uploaded by

Prashant Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

jQuery

jQuery is a popular and widely used JavaScript library that simplifies client-side scripting in web development.

It was designed to make it easier for developers to interact with HTML documents, handle events, create animations, and
perform various other tasks in a more efficient and cross-browser compatible way.

Problems we face in JavaScript:-

1. Long selectors to target DOM


function() Jquery
2. Complex animation
3. Lengthy DOM manipulation
4. Lengthy AJAX Coding
Benefits of using jQuery
Short Selectors: For targeting DOM Elements

i) Selectors to target class


Javascript: document.getElementByClassName(‘classname’)
Jquery: $(‘.classname’)
ii) Selectors to target id
Javascript: document.getElementById(‘idname’)
Jquery: $(‘#idname’)
iii) Selectors to target tag-name
Javascript: document.getElementByTagName(‘tagname’)
Jquery: $(‘tagname’)
Advance Selectors

Selector Description

$(“*”) To select all HTML

$(“.abc,.xyz”) Multiple class

$(“h1,div,p”) Multiple Text

$(“div p:first”) First paragraph

$(“div p:last”) Last paragraph

$(“ul li”)/$(“ul li:eq(2)”) Parent Child selector

$(“ul li:Even”) Even numbered list

$(“ul li:odd”) Odd numbered list

$(“ul li:lt(50)”) First 50 li under that ul

We can also define a custom function and then apply the advance selector accordingly.
Best approach to Implement jQuery in HMTL

1. Add jQuery to the Project:


/wwwroot
/lib
/jquery
jquery-3.6.0.min.js

2. Reference jQuery in Your Layout File/html file:


Open the _Layout.cshtml file located in the "Views/Shared" folder. In the <head> section of your layout file,
reference the jQuery library using the script tag.
<script src="~/lib/jquery/jquery-3.6.0.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<script src="~/js/script.js"></script>
</head>
<body>
<button id="myButton"> Click Me </button>
<div id="myDiv">This is a div element.</div>
</body>
</html>
3. Write jQuery Code:

Selector (Target DOM Element) Method

$(document).ready(function () {
$("#myButton").click(function () {
$("#myDiv").text("Button clicked!");
});
});

Benefits of this Approach


1. Separation of Concerns : Separating JavaScript from HTML enhances maintainability, readability, and follows the separation of concerns principle.
2. Code Reusability : External JavaScript files enable code reuse and reduce duplication in ASP.NET MVC.
3. Debugging and Testing : External JavaScript simplifies debugging and testing using browser and developer tools, enhancing code quality.
4. Collaboration : External JavaScript aids team collaboration, enabling independent work without code interference in a developer team.

5. Cashing : External JavaScript files is cached by browsers, leading to faster page loading on subsequent visits, reducing server requests
Mouse Click
1. click()
<script>
$(document).ready(function () {
$("#box").click(function () {
// Change the background color to red on a single click
$("#box").css("background-color", "red");
});
});
</script>

2. dbclick()

<script>
$(document).ready(function () {
$("#box").dblclick(function () {
// Change the background color to blue on a double click
$(this).css("background-color", "blue"); //Event Binding property of jquery
});
});
</script>
3. contextmenu()
<script>
$(document).ready(function () {
$("#box").contextmenu(function (e) {
// Prevent the default context menu
e.preventDefault();
// Change the background color to green on right-click
$(this).css("background-color", "green");
});
});
</script>

4. mouseenter()
<script>
$(document).ready(function () {
$("#box").mouseenter(function () {
// Change the background color to orange on mouse enter
$(this).css("background-color", "orange");
});
});
</script>
4. mouseleave()
<script>
$(document).ready(function () {
$("#box").mouseleave(function () {
// Change the background color to purple on mouse leave
$(this).css("background-color", "purple");
});
});
</script>

on() and off() method


$(document).ready(function () {
$("#box").on({
"click": function () {
$(this).css("background-color", "red");
},

"mouseover":function () {
$(this).css("background-color", "orange");
},

"mouseout": function () {
$(this).css("background-color", "yellow");
},

"click":function () {
$("#box").attr("data-custom", "custom-value");
},

“click":function () {
$("#box").val("New Value");
}
});
});
Remove() and Empty() method

<script>

$(document).ready(function () {

$("#Remove").click(function () {

$("#box").remove();

});

$("#Empty").click(function () {

$("#box h2").empty();

});

});

</script>
Clone() method

<script>
$(document).ready(function () {
// Clone the h2 element and prepend it to #box2
var h2Clone = $("#box1 h2").clone();
h2Clone.prependTo("#box2");

// Clone the p1 element and append it to #box2


var p1Clone = $("#box1 .p1").clone();
p1Clone.appendTo("#box2");
});
</script>

● appendTo() adds the content as the last child of the selected element
● prependTo() adds the content as the first child of the selected element
Method Chaining

Without chaining With chaining

<script> <script>

$(document).ready(function () { $(document).ready(function () {

$("#clickbtn").click(function () { $("#clickbtn").click(function () {

$("#box1").animate({ $("#box1").animate({

left: '250px’, height:'150px',width: '150px'},1000); left: '250px’, height:'150px',width: '150px'},


1000).slideUp();.slideDown();
$("#box1").slideUp();
});
$("#box1").slideDown();
});
});
</script>
});

</script>
jQuery DOM Traversing Methods
• Ancestors Methods
• Descendants Methods
• Siblings Methods
• Filtering Methods
Ancestors Methods

grandparent
great-grandparent

parent

Child
There are 5 types of Ancestors method

$(document).ready(function(){
1. parent() $(‘#child-c’).parent().css(‘background’, ‘red’);
});

$(document).ready(function(){
$(document).ready(function(){
$(‘#child-c’).parents().css(‘background’, ‘red’);
2. parents() ;
$(‘#child-c’).parents(‘#outer’);
});
});

Id=o$(document).ready(function(){
$(‘#child-c’).parentsUntil(‘#outer’).css({"color": "red", "border": "2px solid red"});
});
3. parentsUntil() uter2

Id=outer2

Id=outer

Id=inner

Id=child-head

Id-child-c
$(document).ready(function(){
4. closet() $(‘#child-c’).closet(‘span’).css(‘background’, ‘red’);
});

$(document).ready(function(){
5. offsetParent() $(‘#child-c’).offsetparent().css(background’, ‘red’);
});

Id=outer2

Id=outer, style= “position:relative;”

Id=inner

Id=child-head

Id-child-c
Descendants Methods

grandparent
great-grandparent

parent

Child

2 Types of Descendants Methods


1. children()
2. find()
$(document).ready(function(){
$(document).ready(function(){
1. children() $(‘#inner’).children().css(‘background’,
$(‘#inner’).children(”child-head").css(‘background’,
‘red’);
‘red’);
});
});

$(document).ready(function(){
2. find() $(‘#inner’).find(”child-
head").css(‘background’, ‘red’);
});

Id=outer2

Id=outer

Id=inner

Id=child-head

Id-child-c
Thank You !

You might also like