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 !
