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

J Query

This document provides an overview of jQuery, including: 1. What jQuery is and its main features like HTML/CSS manipulation and effects. 2. How to add the jQuery library and write basic jQuery code using selectors, events, and the document ready function. 3. Examples of common jQuery methods for manipulating HTML elements, CSS properties, and performing animations/effects like hide, show, toggle.

Uploaded by

Quy Le
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
181 views

J Query

This document provides an overview of jQuery, including: 1. What jQuery is and its main features like HTML/CSS manipulation and effects. 2. How to add the jQuery library and write basic jQuery code using selectors, events, and the document ready function. 3. Examples of common jQuery methods for manipulating HTML elements, CSS properties, and performing animations/effects like hide, show, toggle.

Uploaded by

Quy Le
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

What is jQuery?

jQuery is a library of JavaScript Functions. jQuery is a lightweight "write less, do more" JavaScript

library. The jQuery library contains the following features: HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

Adding the jQuery Library to Your Pages


The jQuery library is stored as a single JavaScript file,

containing all the jQuery methods. It can be added to a web page with the following markup: <head> <script type="text/javascript" src="jquery.js"></script> </head> Please note that the <script> tag should be inside the page's <head> section

Example
Basic jQuery Example The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML document. Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head>

<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

jQuery Syntax
The jQuery syntax is tailor made for selecting HTML

elements and perform some action on the element(s). Basic syntax is: $(selector).action() A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides current element $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#test").hide() - hides the element with id="test"

The Document Ready Function


You might have noticed that all jQuery methods, in our

examples, are inside a document.ready() function: $(document).ready(function(){


// jQuery functions go here...

}); This is to prevent any jQuery code from running before the document is finished loading (is ready). Here are some examples of actions that can fail if functions are run before the document is fully loaded:
Trying to hide an element that doesn't exist Trying to get the size of an image that is not loaded

jQuery Selectors
jQuery Element Selectors
jQuery uses CSS selectors to select HTML elements. $("p") selects all <p> elements.

$("p.intro") selects all <p> elements with class="intro".


$("p#demo") selects the first <p> element with

id="demo".

jQuery Selectors
jQuery Attribute Selectors jQuery uses XPath expressions to select elements with

given attributes. $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value equal to "#". $("[href!='#']") select all elements with an href attribute NOT equal to "#". $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

jQuery CSS Selectors


jQuery CSS selectors can be used to change CSS

properties for HTML elements. The following example changes the background-color of all p elements to yellow: Example $("p").css("background-color","yellow");

Some examples

jQuery Event Functions


The jQuery event handling methods are core functions in jQuery. Event handlers are method that are called when "something happens" in HTML.

The term "triggered (or "fired") by an event" is often used. It is common to put jQuery code into event handler methods in the <head> section: Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head>

<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body></html>

jQuery Event

jQuery Name Conflicts


jQuery uses the $ sign as a shortcut for jQuery.
Some other JavaScript libraries also use the dollar sign

for their functions. The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.

jQuery Effects
jQuery Hide and Show With jQuery, you can hide and show HTML elements with the hide() and show() methods: Example $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); Both hide() and show() can take the two optional parameters: speed and callback. Syntax: $(selector).hide(speed,callback) $(selector).show(speed,callback) The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", "normal", or milliseconds: Example $("button").click(function(){ $("p").hide(1000); });

jQuery Effects
jQuery Toggle The jQuery toggle() method toggles the visibility of HTML

elements using the show() or hide() methods. Shown elements are hidden and hidden elements are shown. Syntax: $(selector).toggle(speed,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. Example $("button").click(function(){ $("p").toggle(); }); The callback parameter is the name of a function to be executed after the hide (or show) method completes.

jQuery Slide - slideDown, slideUp, slideToggle The jQuery slide methods gradually change the height for selected

elements. jQuery has the following slide methods: $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. The callback parameter is the name of a function to be executed after the function completes. slideDown() Example $(".flip").click(function(){ $(".panel").slideDown(); });

lideUp() Example
$(".flip").click(function(){

$(".panel").slideUp() }) slideToggle() Example $(".flip").click(function(){ $(".panel").slideToggle(); });

jQuery Fade - fadeIn, fadeOut, fadeTo The jQuery fade methods gradually change the opacity for

selected elements. jQuery has the following fade methods: $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. The opacity parameter in the fadeTo() method allows fading to a given opacity. The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example
$("button").click(function(){

$("div").fadeTo("slow",0.25); }); fadeOut() Example $("button").click(function(){ $("div").fadeOut(4000); });

jQuery Custom Animations The syntax of jQuery's method for making custom animations is: $(selector).animate({params},[duration],[easing],[callback]) The

key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time: animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.
Example 1 <script type="text/javascript">

$(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script>

Example 2
<script type="text/javascript">

$(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script>

jQuery Effects

jQuery HTML Manipulation


jQuery contains powerful methods (functions) for

changing and manipulating HTML elements and attributes. Changing HTML Content $(selector).html(content) The html() method changes the contents (innerHTML) of matching HTML elements. Example $("p").html("W3Schools");

jQuery HTML Manipulation


Adding HTML content
$(selector).append(content) The append() method appends content to the inside of

matching HTML elements. $(selector).prepend(content) The prepend() method "prepends" content to the inside of matching HTML elements. Example $("p").append(" W3Schools");

jQuery HTML Manipulation


$(selector).after(content)
The after() method inserts HTML content after all

matching elements. $(selector).before(content) The before() method inserts HTML content before all matching elements. Example $("p").after(" W3Schools.");

jQuery CSS Manipulation


jQuery css() Method
jQuery has one important method for CSS

manipulation: css() The css() method has three different syntaxes, to perform different tasks. css(name) - Return CSS property value css(name,value) - Set CSS property and value css({properties}) - Set multiple CSS properties and values

jQuery CSS Manipulation


Return CSS Property Use css(name) to return the specified CSS property value of the

FIRST matched element: Example $(this).css("background-color"); Set CSS Property and Value Use css(name,value) to set the specified CSS property for ALL matched elements: Example $("p").css("background-color","yellow"); Set Multiple CSS Property/Value Pairs Use css({properties}) to set one or more CSS property/value pairs for the selected elements: Example $("p").css({"background-color":"yellow","font-size":"200%"});

jQuery CSS Manipulation


jQuery height() and width() Methods jQuery has two important methods for size manipulation. height() width() Size Manipulation Examples The height() method sets the height of all matching elements: Example $("#div1").height("200px"); The width() method sets the width of all matching elements: Example $("#div2").width("300px");

You might also like