Scribd
Upload
2 views

j query

The document provides an introduction to jQuery, a JavaScript library that simplifies HTML manipulation, CSS manipulation, and AJAX interactions. It covers jQuery selectors, event methods, and various effects such as hiding, showing, and sliding elements. Additionally, it explains how to include jQuery in web pages and the syntax for using its functions and methods.

Uploaded by

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

j query

The document provides an introduction to jQuery, a JavaScript library that simplifies HTML manipulation, CSS manipulation, and AJAX interactions. It covers jQuery selectors, event methods, and various effects such as hiding, showing, and sliding elements. Additionally, it explains how to include jQuery in web pages and the syntax for using its functions and methods.

Uploaded by

rohitbarkade92092
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

❖ Introduction to j query → -Jquery is a scripting ❖ jquery Selectors- it is a important part of j

library (Javascript) it simplify java script query. library which allows you to select and
programing. - it is easy to learn. - before Studying execute html elements -it is used to find or
j query we should know 1) HTML 2) css. 3) Java select html elements based on their name id,
script. - it is a light weight (orig write less do more) classes, types, attributes, values of attributes
- it is used Fe with java script to design website etc. - all selectors in j query starts with $ sign
- we also use Jquery with Ajax,xml,dom. and paranthesis = ($()); example- $("p") -
❖ Features of j query→ 1) HTML manipulation- 2) Select all <p>tag elements on a Page.
css manipulation 3) Ajax manipulation- 4) Provides id selector Jquery # id selector uses the id
effects and Animation- attributes of html tag - to find and element
❖ use of jQuery → 1) there are losts of jaro script with specific id write '#' character example-
library but jquery. is most popular and most $(#test)
extendable. 2) many companies on the internet class Selector = the j query class selector
uses jouery this are google, microsoft, IBM, Netflix Finds elements with specific class -example-
❖ How to add jquery on web pages – There are $(test) - Selects an elements
various method to start using j query on ❖ Jquery event methods→ event- all different
website. A) download the j Query library from action that web page can respond to are
JQuery.Com B) include J Query From CDN called event -it is a precise movement when
such as google. C) downloading j Query something happens examples - moving a
there are various versions of J query: mouse over an element. - Selecting a button -
1)Production version :- It has mini file and clicking on a event. there are various mouse
events. 1) Click 2) double click 3) mouse leave
compressed. 2)developement version- It is
keyboard event = keypress, keyup, key down
uncompressed and readable code used for
Form events.= Submit. change ,Focus
testing & development. the JQuery liabrary
document event - load ,Scrolling & resize
file. $ can. is liabrarference singal Java script ❖ Jquery syntax for event→ In Jquery there are
be reference with script tag. <head> <script some event. -To assign click event to the
src=" Jquery -7.4.1. mini-JS"> <head> paregraph we can use. on a page. we can use
</script> In another way if (j Query CDN)If 1) $("p").click(); The next step is to define
you don't want to download & host j query what should happen when the event executes
we can include it from CDN <head> <script we must pass event a functions to the event.
src=" https: \\ajax.gooleapis.com Ajax| libs| $("P").click(function(){ …….})
Jquery 3.4.1 .min.js”> <script> </head> 2)$(document).read(); This function or this
❖ Jquery syntax→ it is used with html element method allows us to function when document
for performing. some actions on element - is fully loaded 3) $(document).click(); this
basic syntax is = $ (selector) action (), $ sign is method attaches an event handles to a given
define jouery. Selector = it is a selector to a document. 4) DBI click :- This function is
query or find html element. Action= it is a executiend the user double click on the html
function to be perform on elements element. Ex $ ("p")•dblclick (function(){
eg. 1) $(this) hide(); hides the current }); $("p").dblclick ($(this). hide()); 5) mouse
element 2) $("p").hide();- hides all 'p' tag enter ()- This method pointer executes when
elements. 3) $("this").hide();- hides all the enters the HTML elements. Ex $("p").
elements with class test. mouseenter (function () { alert(" You Entered
❖ Document Ready Event→ all j query methods mouse is a alerting area"); }); 6) mouse leave
may include document ready event - this is (-):- When the mouse leave the html elements
used to prevent any j query code from the mouse leave function is executed Ex
running before the document is finished $("P"> mouseleave. (function() { alert (" You
loading their are some actions that can fill if leaved Pointer out);
methods ore run Before document }); 7) mousedown () when the left, middle &
is fully loaded. $function(){…….} right mouse button.is Pressed down the
mouse down function is executed.
$("p". mousedown (function(){ alert(" You ❖ Jquery traversing:- Jquery traversing
Pressed button down "); means move through or select based
}); 8) mouse up() When left write button is, on their element State with Selection
lefte, middle. button released up then & move through on until will which
mouseup function 's executed. EX $("P") the element we design.
mouse supffunction () { alert (you released
button up"); }); 9) focus() This fanction is
executed. Focused form field gets. 10) Blur
()Function field is executied loose focuse.
when the form
❖ Jquery with the hide functions Jquery we can
I show functions:- hide and show html
element with hide function and Show
function Ex $("hide"). Click (function () {
$("P"). hide(); });
$("show"). click (function(c){
$("P"). show(); });
❖ Jquery effect sliding :- Jquery slide method
down Slide elements up and with Jquery we
can create on the elements. sliding effect
❖ Jquery has following slide methods.
1) slide Down () 2) slide up () (3) slide
Toggle()
1) slide Down():- It is used to slide down
Syntax: on element $(selector). Slide Down (
Speed, call Back); -Speed & call Back the
speed of are optional may be specified
duration. effect the the value can be seconds
Slow or fast, or mili-second . -Call Back is a
optional which specifies function to be
executed after sliding completes. Ex
$("#Flip"). 'Click (function () { - $("# Panel ").
Slide Down (); });
(2) slide up ():- It is used to slideup an
element. Syntax: $(selector), slide up (speed,
call Back); Speed & call Back are optional $1't
flip"). click (function({$("#panel").slideup(); });

3) slide Toggle ():- Jquery slide Toggle


methodes toggles. between the slide down
and Slide up method. if the elements have
been slide down slide toggle function will
slide them up. If the elements have been slide
up. Slide toggle function will slide them down.
EX $('#flip").click(function () { $("#Panel").
Slide toggle (); }); Syntax:-*$(selector ):
SliderToggle (speed. call Back); In Jquery we
can create Animation's The Animate () is used
for animationEx
$("button").click(function(){ $("div").animate({
left: 250px" }); });

You might also like