A Short Introduction To jQuery
-
Upload
sudar-muthu -
Category
Business
-
view
5.956 -
download
5
description
Transcript of A Short Introduction To jQuery
![Page 1: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/1.jpg)
Sudar (http://SudarMuthu.com)WebCamp Chennai – 23 Feb 2008
![Page 2: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/2.jpg)
Famous Client – Side frameworks
jQuery Prototype Yahoo User Interface Library (YUI) Dojo Rico
WebCamp - Chennai http://SudarMuthu.com
![Page 3: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/3.jpg)
The $() function Build around CSS selectors WordPress has started to use jQuery Lots of Plugins Can be used with other libraries Doesn’t hijack the global namespace Small Size (Just 15 KB after Minified and
Gzipped) Write Less, Do More
WebCamp - Chennai http://SudarMuthu.com
![Page 4: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/4.jpg)
Matches a set of elements and returns a collection.
Uses CSS Selectors
$ (‘#comment’)$(‘div.comment’)$(‘div#content h2’)$(‘input:password’)$(‘a[href^=“http://”]’)$(‘ul#nav > li’)
You can also use jQuery() instead of $()
WebCamp - Chennai http://SudarMuthu.com
![Page 5: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/5.jpg)
$ (‘h2:first’)$(‘h2:last’)$(‘p:visible’)$(‘p:hidden’)$(‘input:password’)$(‘input:text’)$(‘p:odd’)
WebCamp - Chennai http://SudarMuthu.com
![Page 6: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/6.jpg)
The $ () function returns a collection consisting of
the elements that match the selector.
It is similar to an array, but not exactly same.
You can use $(‘p.special’).length or $(‘p.special’).size()
Both return the number of matched elementsWebCamp - Chennai http://SudarMuthu.com
![Page 7: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/7.jpg)
You can use .each() to iterate the collection
$(‘p.special’).each(function () {alert (this);
});
$(‘p.special’)[0] – First element$(‘p.special’)[1] - Second element
WebCamp - Chennai http://SudarMuthu.com
![Page 8: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/8.jpg)
Access a property of matched element
$(‘img#header’).attr(‘src’) – returns the src attribute
$(‘img#header’).attr(‘src’, ‘http://e.in/head.gif’)
Set the src attribute
WebCamp - Chennai http://SudarMuthu.com
![Page 9: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/9.jpg)
val() – Get the value of the input element
var singleValue = $(‘#single’).val();
val(val) – Set the value of an input element
$("input:text").val(“Value Text”);$(“#multiple”).val([“multiple1”,
“multiple2”]);
WebCamp - Chennai http://SudarMuthu.com
![Page 10: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/10.jpg)
$(‘img#header’).addClass(‘highlighted’)$(‘img#header’).removeClass(‘highlighted’)$(‘img#header’).toggleClass(‘highlighted’)var hasBar =
#(‘img#header’).hasClass(‘special’)
$(‘p.special’).css(‘font-size’, ’12px’ )$(‘p.special’).css({‘font-size’:’12px’,
‘color’:’red’ })WebCamp - Chennai http://SudarMuthu.com
![Page 11: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/11.jpg)
Similar to innerHTML
$(‘span#error’).text(“There is some error”)
$(‘div#msg’).html(“<strong>Message</strong>”)
WebCamp - Chennai http://SudarMuthu.com
![Page 12: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/12.jpg)
$(‘span#msg’).show()Also show(speed, [callback])
$(‘span#msg’).show(“fast”, function() {alert (“Done”);
});
$(‘span#msg’).hide()Also hide(speed, [callback])
WebCamp - Chennai http://SudarMuthu.com
![Page 13: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/13.jpg)
toggle() fadeIn() fadeOut() fadeTo() slideUp() slideDown() animate() stop()
WebCamp - Chennai http://SudarMuthu.com
![Page 14: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/14.jpg)
Enhanced methods for traversing DOM
$(‘div#nav’).parent() $(‘div#nav’).next() $(‘div#nav’).prev() $(‘div#nav’).nextAll(‘a’)
WebCamp - Chennai http://SudarMuthu.com
![Page 15: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/15.jpg)
Enhanced methods for manipulating DOM
after(content) append(content) before(content) clone() empty() remove(expr)
WebCamp - Chennai http://SudarMuthu.com
![Page 16: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/16.jpg)
Provides methods for assigning events in a cross
browser way
$(‘div#msg’).click(function(ev) {$(this).css(‘color’, ‘red’);alert(‘Clicked’);
});
Lot of other handlers also availableWebCamp - Chennai http://SudarMuthu.com
![Page 17: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/17.jpg)
Alternate to onLoad event
$(document).ready(function() {alert (“DOM is Ready”);
});
You can also use
$(function() {alert (“DOM is Ready”);
});
WebCamp - Chennai http://SudarMuthu.com
![Page 18: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/18.jpg)
jQuery has excellent support for AJAX
$(‘div#msg’).load(‘/dir/file.html’)
You can also use other advanced methods $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback)
WebCamp - Chennai http://SudarMuthu.com
![Page 19: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/19.jpg)
$.trim(str) $.browser
if ($.browser.safari) {alert(“This is Safari”);
}
You can also use safari opera msie Mozilla
$.each(object, callback)
WebCamp - Chennai http://SudarMuthu.com
![Page 20: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/20.jpg)
Lot of Plugins available for Form Validation Drop down Menus UI Drag and Drop Etc..,
Official Plugin repository at http://plugins.jquery.com/
WebCamp - Chennai http://SudarMuthu.com
![Page 21: A Short Introduction To jQuery](https://reader030.fdocuments.in/reader030/viewer/2022013121/5558be57d8b42a7e298b5242/html5/thumbnails/21.jpg)
http://jquery.com – Official Site http://docs.jquery.com - Documentation http://plugins.jquery.com – Plugin
repositry http://visualjquery.com – API Reference http://sudarmuthu.com/blog/tag/jquery -
My blog posts about jQuery
WebCamp - Chennai http://SudarMuthu.com