Scribd
Upload
3 views15 pages

J Query

jQuery is a lightweight JavaScript library designed to simplify web development by allowing developers to write less code for common tasks. It provides features for HTML/DOM manipulation, CSS manipulation, event handling, effects, animations, and AJAX. The document includes examples of jQuery selectors, event methods, and how to manipulate elements on a webpage using jQuery syntax.

Uploaded by

nidkyyou
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
3 views15 pages

J Query

jQuery is a lightweight JavaScript library designed to simplify web development by allowing developers to write less code for common tasks. It provides features for HTML/DOM manipulation, CSS manipulation, event handling, effects, animations, and AJAX. The document includes examples of jQuery selectors, event methods, and how to manipulate elements on a webpage using jQuery syntax.

Uploaded by

nidkyyou
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/ 15

jQuery Introduction

What is jQuery?
 jQuery is a lightweight, "write less, do more", JavaScript library.
 The purpose of jQuery is to make it much easier to use JavaScript on
your website.
 jQuery takes a lot of common tasks that require many lines of
JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.
 jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
Short selector example

 Document.getElementsByClassName(‘classname’)
$(‘.classname’) //jQuery
 Document.getElementsById(‘idname’)
$(‘#idname’) //jquery
 Document.getElementsByTagName(‘tagname’)
$(‘tagname’)
jQuery start code

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

 Let a =
document.getElementByQuerySelector(‘#idname’).innerHtml();
Let a = $(‘#idname’).html(); // jQuery code
jQuery Selector

 $(“.class”)
 $(“#id”)
 $(“tagname”)
 $(“*”)
 $(“ul li”)
 $(“.a , .b”)
 $(“h1, p, div”)
 $(“p:first”)
 $(“p:last”)
 $(“li:even”)
 $(“li:odd”)
 $(“.container”).css(“property” , “value”)
$(“p”).css(“border” , “2px solid”)
jQuery Event Methods

What are Events?


All the different visitors' actions that a web page can respond to are
called events.
An event represents the precise moment when something happens.
Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element
Mouse events

 Click
 Dblclick
 Mouseenter
 mouseleave
click

<script>
$(document).ready(function(){
$(".box1").click(function(){
$(".box1").css("background-color" , "blue")
})
});
</script>
2nd event
$(".box1").click(function(){
var a= $(".box1").html();
console.log(a)
})
dblclick

$(".box1").dblclick(function(){
$(".box1").css("background-color" , "red")
})
Mouseenter

$(".box1").mouseenter(function(){
$(".box1").css("background-color" , "red")
OR
Alert(“you entered mouse”)
})

mouseleave
$(".box1").mouseleave(function(){
$(".box1").css("background-color" , "yellow")
})
Hide()

$(".box1").click(function(){
$(this).hide();
})
Hover:
$(“.box1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Html form field

 Focus:
$("#fname ").focus(function(){
$(this).css("background-color" , "pink")
})
 Blur:
$("#fname , #depart, #city").blur(function(){
$(this).css("background-color" , "")
})
Change

$(" #city").change(function(){
$(this).css("background-color" , “yellow")
})

$(" #city").change(function(){
var a= $(this).val();
$("#demo").html(a)
})
select

$(“#fname , #deprt”).select(function(){
$(this).css(“background-color”, “yellow”)

$(“#fname , #deprt”).submit(function(){
Alert(“your form is submitted successfully”)

You might also like