2. Introduction to jQuery
jQuery function
◦ Ready
◦ Selectors
◦ DOM Interaction
◦ Event Handling
◦ Ajax interaction
3. jQuery is a framework of Javascript. It not a language,
but it is a well written JavaScript code.
jQuery is a cross-platform JavaScript library designed to
simplify the client-side scripting of HTML.
It is a fast and concise JavaScript Library that simplifies
◦ HTML document traversing
◦ Event handling
◦ Animating
◦ Ajax interactions for rapid web development
4. Pre-defined library for jQery is downloadable in
http://jquery.com/
Production version - this is for your live website because it has been minified and compressed
Development version - this is for testing and development (uncompressed and readable code)
The jQuery library is a single JavaScript file, and you reference it with the HTML
<script> tag (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.11.0.min.js“ type=“text/javascript”></script>
</head>
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
◦ Basic syntax is: $(selector).action()
◦ A $ sign to define/access jQuery
◦ A (selector) to "query (or find)" HTML elements
◦ A jQuery action() to be performed on the element(s)
◦ E.g : - $("#test").hide() - hides the element with id="test“
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content
Delivery Network) Both Google and Microsoft host jQuery.
◦ Google
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
◦ Microsoft
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
5. Detecting When a Page has Loaded
Use $(document).ready() to detect when a page has loaded and is
ready to use
Called once DOM hierarchy is loaded
<script type="text/javascript">
$(document).ready(function(){
//Perform action here
});
</script>
6. Select a element on page
Selectors can be basis of html Tags, ID or Class
Selector Syntax :
$(selectorExpression) eg: $(‘div’).Action()
To Select the specific tags use ,a $(‘div,p,span’)
To select Descendants use space $(‘div span’)
To select Tags by id prefix id with # $(‘#myDiv’)
To select Tags by class prefix with class . $(‘.myClass’)
Combine class with specific tag $(‘a.myClass’)
Select by attribute, tag and attribute and specific
attribute value,
$(‘[title]’), $(‘div[title]’), $(‘[title=“MyTest”]’) and
$(div[title=“MyTest”]’)
Input Selectors $(‘:input’) select all input elements. $(‘:input’)
:Contains – select elements that match the search $(‘div:contains(“C#”)’)
:odd or :even – format the table rows $(‘tr:oddd’) or $(‘tr:even’)
^-Startwith $-Endswith *-contains stated value $(‘input[id$=“Name”]’)
7. Object Model – each element in the html is parsing
as DOM.
jQuery provides set of function to interact the
DOM.
.each(function (index,element)) – is to iterate through
jquery objects
div.each(function(index,elem){ alert($(elem));});
this.propertyName=“value” is used to modify an object
property directly
$("div").each(function (i) {this.title = "My title " + I;});
.attr(attributeName) object attribute can be accessed Var title=$(‘#myDiv’).attr(“title”);
.attr(attributeName,value) can modify the object attributes $(‘#myDiv’).attr(‘title’, ‘My New title’);
.attr – modify multiple attributes pass json object contains
name/value pairs
$('#myDiv').attr({ title: 'My new Title‘, style: 'border:2px
solid black;’ });
.css(key,value ) - Modifying styles and it can be passed as
json object.
$(‘div’).css(‘color’,’red’)
Modifiying classes - .addClass(), .hasClass(), removeClass
and toggleClass()
$(‘#myDiv’).addClass(‘newClass’)
8. Events notify a program that a user performed some type of action
jQuery provides a cross-browser event model that works in IE,
Chrome, Opera, FireFox, Safari and more
jQuery event model is simple to use and provides a compact syntax
click()
blur()
focus()
dblclick()
mousedown()
mouseup()
mouseover()
keydown(),
keypress()
$(document).ready(function () {
$('#clickButton').click(function () {
alert($('#firstName').val());
});
});
Enter your name : <input type="text"
id="firstName" />
<input type="button" id="clickButton"
value="Click Me" />
<input type="button" id="clearButton"
value="Clear" />
9. The on() function is a new replacement for the following:
◦ bind()
◦ delegate()
◦ live()
Multiple events and handlers can be defined in on() using a "map":
$("#MyTable tr").on({
mouseenter: function(){
$(this).addClass("over");
},
mouseleave: function(){
$(this).removeClass("out");
}
});
Hover events can be handled using hover():
$(selector).hover(hoverIn, hoverOut)
$('div').on('click', function(){
alert('Clicked button!');
});
10. Ajax allow to make a call with out full page post back.
jQuery Ajax functions support cross-browser
compatibility.
It supports Get and Post form actions
Load JSON, XML, HTML or even scripts.
jQuery provides several Ajax selectors cab be used to send
and receive data.
◦ load(URL,data,callback)– Loads HTML data from the server
◦ $.get(URL,callback)- Requests data from a specified resource. The
GET method may return cached data.
◦ $.post(URL,data,callback)– Submits data to be processed to a
specified resource. It can also be used to get data, the POST
method NEVER caches data, and is often used to send data along
with the request.
◦ $.getJSON( url, data, callback ) – Get/Post and return JSON
◦ $.ajax( url [, settings ] ) – Provides core functionality
