Browser scripting

jQuery

Edited by: Trần Thị Mỹ DungRef: w3schools.com

What is jQuery?

A libraryXpath+CSS selector syntax.Containing the following features:

- HTML element selections/manipulation- CSS manipulation- HTML event functions- JavaScript effects & animations- HTML DOM traversal & modification- AJAX- Utilities

We have to study jQuery. Why?

Easy to learn.Easy to practise.We had a good knowledge of: HTML, CSS,

JavaScript through the previous seminar. So jQuery is the next step.

It’s very amazing. Trust me!

Downloading jQuery Lib

Copy jQuery Lib from my laptop(latest version: jquery-1.7.1.js)

Download: http://code.jquery.com/jquery-1.7.1.js

Link to hosted jQuery when using:http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js

Content

What is jQuery?We have to study jQuery. Why?Downloading jQueryjQuery syntaxjQuery practise

jQuery Syntax-1-Basic syntax

Basic syntax :  $(selector).action()A dollar sign to define jQueryA (selector) to "query (or find)" HTML elementsA 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"$("#demo").hide() - hides the element with

id=“demo"

jQuery Syntax-2-Element Selectors

Example:$("p") selects all <p> elements.$("p.intro") selects all <p> elements

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

elements with id="demo".$("div#intro .head") select all

elements with class="head" inside a <div> element with id="intro"

jQuery Syntax-3-Attribute Selectors

Example:$("[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 Syntax-4-CSS Selectors

CSS Properties Description$(selector).css(name) Get the style property value of the first

matched element

$(selector).css(name,value) Set the value of one style property for matched elements

$(selector).css({properties}) Set multiple style properties for matched elements

$(selector).height(value) Set the height of matched elements

$(selector).width(value) Set the width of matched elements

Ref

jQuery Syntax-5-Basic Event

Event methods trigger, or bind a function to an event for all matching elements.

Trigger example:$("button").click() - triggers the click event for a button element.Binding example:$("button").click(function(){$("img").hide()}) - binds a function to the click event.

jQuery Syntax-3-jQuery Callback

Syntax example: $(selector).hide(speed,callback)

The callback parameter is a function to be executed after the hide effect is completed.

Sample:$("p").hide(1000,function(){  alert("The paragraph is now hidden");});

jQuery Syntax-4-jQuery Effects

Function Description

$(selector).hide() Hide selected elements

$(selector).show() Show selected elements

$(selector).toggle() Toggle (between hide and show) selected elements

$(selector).slideDown() Slide-down (show) selected elements

$(selector).slideUp() Slide-up (hide) selected elements

$(selector).slideToggle() Toggle slide-up and slide-down of selected elements

$(selector).fadeIn() Fade in selected elements

$(selector).fadeOut() Fade out selected elements

$(selector).fadeTo() Fade out selected elements to a given opacity

$(selector).animate() Run a custom animation on selected elementsRef

Practise

Let’s explore all examples.