Scribd
Upload
2 views

jQuery

Uploaded by

Prashant Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

jQuery

Uploaded by

Prashant Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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