the dom scripting toolkit j query
TRANSCRIPT
![Page 1: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/1.jpg)
The DOM Scripting Toolkit: jQueryRemy SharpLeft Logic
![Page 2: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/2.jpg)
Why JS Libraries?
• DOM scripting made easy
![Page 3: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/3.jpg)
Why JS Libraries?
• DOM scripting made easy
• Cross browser work done for you
![Page 4: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/4.jpg)
Why JS Libraries?
• DOM scripting made easy
• Cross browser work done for you
• Puts some fun back in to coding
![Page 5: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/5.jpg)
Why jQuery?
• Lean API, makes your code smaller
![Page 6: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/6.jpg)
Why jQuery?
• Lean API, makes your code smaller
• Small (15k gzip’d), encapsulated, friendly library - plays well!
![Page 7: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/7.jpg)
Why jQuery?
• Lean API, makes your code smaller
• Small (15k gzip’d), encapsulated, friendly library - plays well!
• Plugin API is really simple
![Page 8: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/8.jpg)
Why jQuery?
• Lean API, makes your code smaller
• Small (15k gzip’d), encapsulated, friendly library - plays well!
• Plugin API is really simple
• Large, active community
![Page 9: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/9.jpg)
Why jQuery?
• Lean API, makes your code smaller
• Small (15k gzip’d), encapsulated, friendly library - plays well!
• Plugin API is really simple
• Large, active community
• Big boys use it too: Google, BBC, Digg, Wordpress, Amazon, IBM.
![Page 10: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/10.jpg)
What’s in jQuery?
• Selectors & Chaining
• DOM manipulation
• Events
• Ajax
• Simple effects
![Page 11: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/11.jpg)
Selectors$(‘#emails a.subject’);
![Page 12: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/12.jpg)
Selectors
• “Find something, do something with it”
![Page 13: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/13.jpg)
Selectors
• “Find something, do something with it”
• The dollar function
![Page 14: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/14.jpg)
Selectors
• “Find something, do something with it”
• The dollar function
• CSS 1-3 selectors at the core of jQuery
![Page 15: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/15.jpg)
Selectors
• “Find something, do something with it”
• The dollar function
• CSS 1-3 selectors at the core of jQuery
• Custom selectors
![Page 16: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/16.jpg)
CSS Selectors
$(‘div’)
![Page 17: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/17.jpg)
CSS Selectors
$(‘div’)
$(‘div.foo’)
![Page 18: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/18.jpg)
CSS Selectors
$(‘div’)
$(‘div.foo’)
$(‘a[type=”application/pdf”]’)
![Page 19: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/19.jpg)
CSS Selectors
$(‘div’)
$(‘div.foo’)
$(‘a[type=”application/pdf”]’)
$(‘tr td:first-child’)
![Page 20: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/20.jpg)
Custom Selectors
$(‘div:visible’)
![Page 21: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/21.jpg)
Custom Selectors
$(‘div:visible’)
$(‘:animated’)
![Page 22: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/22.jpg)
Custom Selectors
$(‘div:visible’)
$(‘:animated’)
$(‘:input’)
![Page 23: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/23.jpg)
Custom Selectors
$(‘div:visible’)
$(‘:animated’)
$(‘:input’)
$(‘tr:odd’)
![Page 24: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/24.jpg)
Selector Performance
$(‘#email’) // same as getElementById
![Page 25: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/25.jpg)
Selector Performance
$(‘#email’) // same as getElementById
$(‘.email’) // slower on a big DOM
![Page 26: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/26.jpg)
Selector Performance
$(‘#email’) // same as getElementById
$(‘.email’) // slower on a big DOM
// using context$(‘#emails .subject’)$(‘.subject’, this)
![Page 27: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/27.jpg)
Selector Performance
$(‘#email’) // same as getElementById
$(‘.email’) // slower on a big DOM
// using context$(‘#emails .subject’)$(‘.subject’, this)
// Cachingvar subjects = $(‘#emails .subject’);
![Page 28: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/28.jpg)
Chaining$(‘#emails .subjects’) .click() .addClass(‘read’);
![Page 29: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/29.jpg)
Chaining
• jQuery returns itself *
* except when requesting string values, such as .css() or .val()
![Page 30: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/30.jpg)
Chaining
• jQuery returns itself *
• We can use the selector once, and keep manipulating
* except when requesting string values, such as .css() or .val()
![Page 31: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/31.jpg)
Chaining
• jQuery returns itself *
• We can use the selector once, and keep manipulating
• Can reduce size of our code
* except when requesting string values, such as .css() or .val()
![Page 32: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/32.jpg)
Chaining in Action
var image = new Image();
$(image) .load(function () { // show new image }) .error(function () { // handle error }) .attr(‘src’, ‘/path/to/large-image.jpg’);
![Page 33: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/33.jpg)
More Chaining
// simple tabs
$(‘a.tab’).click(function () { $(tabs) .hide() .filter(this.hash) .show();});
![Page 34: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/34.jpg)
Collections$(‘#emails .subjects’).each(fn)
![Page 35: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/35.jpg)
Collections
• .each(fn)Iterates through a collection applying the method
![Page 36: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/36.jpg)
Collections
• .each(fn)Iterates through a collection applying the method
• .map(fn)Iterates through collection, returning array from fn
![Page 37: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/37.jpg)
Working the DOM$(this).addClass(‘read’).next().show();
![Page 38: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/38.jpg)
DOM Walking
• Navigation: children, parent, parents, siblings, next, prev
![Page 39: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/39.jpg)
DOM Walking
• Navigation: children, parent, parents, siblings, next, prev
• Filters: filter, find, not, eq
![Page 40: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/40.jpg)
DOM Walking
• Navigation: children, parent, parents, siblings, next, prev
• Filters: filter, find, not, eq
• Collections: add, end
![Page 41: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/41.jpg)
DOM Walking
• Navigation: children, parent, parents, siblings, next, prev
• Filters: filter, find, not, eq
• Collections: add, end
• Tests: is
![Page 42: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/42.jpg)
DOM Walking
• Navigation: children, parent, parents, siblings, next, prev
• Filters: filter, find, not, eq
• Collections: add, end
• Tests: is
$(‘div’) .find(‘a.subject’) .click(fn) .end() // strip filter .eq(0) // like :first .addClass(‘highlight’);
![Page 43: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/43.jpg)
Manipulation
• Inserting: after, append, before, prepend, html, text, wrap, clone
![Page 44: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/44.jpg)
Manipulation
• Inserting: after, append, before, prepend, html, text, wrap, clone
• Clearing: empty, remove, removeAttr
![Page 45: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/45.jpg)
Manipulation
• Inserting: after, append, before, prepend, html, text, wrap, clone
• Clearing: empty, remove, removeAttr
• Style: attr, addClass, removeClass, toggleClass, css, hide, show, toggle
![Page 46: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/46.jpg)
Manipulation
• Inserting: after, append, before, prepend, html, text, wrap, clone
• Clearing: empty, remove, removeAttr
• Style: attr, addClass, removeClass, toggleClass, css, hide, show, toggle
var a = $(document.createElement(‘a’)); // or $(‘<a>’)a.css(‘opacity’, 0.6).text(‘My Link’).attr(‘href’, ‘/home/’);$(‘div’).empty().append(a);
![Page 47: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/47.jpg)
Data
• Storing data directly against elements can cause leaks
![Page 48: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/48.jpg)
Data
• Storing data directly against elements can cause leaks
• .data() clean way of linking data to element
![Page 49: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/49.jpg)
Data
• Storing data directly against elements can cause leaks
• .data() clean way of linking data to element
• All handled by jQuery’s garbage collection
![Page 50: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/50.jpg)
Data
• Storing data directly against elements can cause leaks
• .data() clean way of linking data to element
• All handled by jQuery’s garbage collection
$(this).data(‘type’, ‘forward’);
var types = $(‘a.subject’).data(‘type’);
$(‘a.subject’).removeData();
![Page 51: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/51.jpg)
Events$(‘a.subject’).click();
![Page 52: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/52.jpg)
DOM Ready
• Most common event: DOM ready
![Page 53: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/53.jpg)
DOM Ready
• Most common event: DOM ready
$(document).ready(function () {})
// or as a shortcut:
$(function () {})
![Page 54: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/54.jpg)
Binding
• Manages events and garbage collection
![Page 55: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/55.jpg)
Binding
• Manages events and garbage collection
• Event functions are bound to the elements matched selector
![Page 56: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/56.jpg)
Binding
• Manages events and garbage collection
• Event functions are bound to the elements matched selector
• Also supports .one()
![Page 57: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/57.jpg)
Binding
• Manages events and garbage collection
• Event functions are bound to the elements matched selector
• Also supports .one()
$(‘a.reveal’).bind(‘click’, function(event) { // ‘this’ refers to the current element // this.hash is #moreInfo - mapping to real element $(this.hash).slideDown();}).filter(‘:first’).trigger(‘click’);
![Page 58: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/58.jpg)
Helpers
• Mouse: click, dlbclick, mouseover, toggle, hover, etc.
![Page 59: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/59.jpg)
Helpers
• Mouse: click, dlbclick, mouseover, toggle, hover, etc.
• Keyboard: keydown, keyup, keypress
![Page 60: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/60.jpg)
Helpers
• Mouse: click, dlbclick, mouseover, toggle, hover, etc.
• Keyboard: keydown, keyup, keypress
• Forms: change, select, submit, focus, blur
![Page 61: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/61.jpg)
Helpers
• Mouse: click, dlbclick, mouseover, toggle, hover, etc.
• Keyboard: keydown, keyup, keypress
• Forms: change, select, submit, focus, blur
• Windows: scroll
![Page 62: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/62.jpg)
Helpers
• Mouse: click, dlbclick, mouseover, toggle, hover, etc.
• Keyboard: keydown, keyup, keypress
• Forms: change, select, submit, focus, blur
• Windows: scroll
• Windows, images, scripts: load, error
![Page 63: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/63.jpg)
Custom Events
• Roll your own
![Page 64: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/64.jpg)
Custom Events
• Roll your own
• Bind to element (or elements)
![Page 65: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/65.jpg)
Custom Events
• Roll your own
• Bind to element (or elements)
• Trigger them later and pass data
![Page 66: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/66.jpg)
Custom Events
• Roll your own
• Bind to element (or elements)
• Trigger them later and pass data
$(‘div.myWidget’).trigger(‘foo’, [123/*id*/]);// id access via // .bind(‘foo’, function (event, id, etc) {})
![Page 67: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/67.jpg)
Event Namespaces
• Support for event subsets via namespaces
![Page 68: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/68.jpg)
Event Namespaces
• Support for event subsets via namespaces
• If you don’t want to unbind all type X events - use namespaces
![Page 69: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/69.jpg)
Event Namespaces
• Support for event subsets via namespaces
• If you don’t want to unbind all type X events - use namespaces
$(‘a’).bind(‘click.foo’, fn);
$(‘a’).unbind(‘.foo’);
![Page 70: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/70.jpg)
Ajax$.ajax({ url : ‘/foo’, success : bar });
![Page 71: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/71.jpg)
Ajax Made Easy
• Cross browser, no hassle.
![Page 72: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/72.jpg)
Ajax Made Easy
• Cross browser, no hassle.
• $.ajax does it all
![Page 73: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/73.jpg)
Ajax Made Easy
• Cross browser, no hassle.
• $.ajax does it all
• Helpers $.get, $.getJSON, $.getScript, $.post, $.load
![Page 74: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/74.jpg)
Ajax Made Easy
• Cross browser, no hassle.
• $.ajax does it all
• Helpers $.get, $.getJSON, $.getScript, $.post, $.load
• All Ajax requests sends:X-Requested-With = XMLHttpRequest
![Page 75: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/75.jpg)
$.ajax$(‘form.register’).submit(function () { var el = this; // cache for use in success function $.ajax({ url : $(this).attr(‘action’), data : { ‘username’ : $(‘input.username’).val() }, // ‘this’ is the link beforeSend : showValidatingMsg, // function dataType : ‘json’, type : ‘post’, success : function (data) { // do something with data - show validation message }, error : function (xhr, status, e) { // handle the error - inform the user of problem console.log(xhr, status, e); } }); return false; // cancel default browser action});
![Page 76: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/76.jpg)
Effects$(this).slideDown();
![Page 77: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/77.jpg)
Base Effects
$(‘div:hidden’).show(200, fn);$(‘div:visible’).hide(200);$(‘div’).fadeIn(200);$(‘div’).slideDown(100);
![Page 78: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/78.jpg)
Base Effects
$(‘div:hidden’).show(200, fn);$(‘div:visible’).hide(200);$(‘div’).fadeIn(200);$(‘div’).slideDown(100);
$(‘div’).animate({ ‘opacity’ : 0.5, ‘left’ : ‘-=10px’ }, ‘slow’, fn)
![Page 79: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/79.jpg)
Utilities$.browser.version
![Page 80: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/80.jpg)
Utilities
• Iterators: each, map, grep
![Page 81: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/81.jpg)
Utilities
• Iterators: each, map, grep
• Browser versions, model and boxModel support
![Page 82: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/82.jpg)
Utilities
• Iterators: each, map, grep
• Browser versions, model and boxModel support
• isFunction
![Page 83: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/83.jpg)
Core Utilities
• jQuery can plays with others!
![Page 84: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/84.jpg)
Core Utilities
• jQuery can plays with others!
$j = $.noConflict();$j === $ // false
![Page 85: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/85.jpg)
Core Utilities
• Extend jQuery, merge objects and create settings from defaults
![Page 86: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/86.jpg)
Core Utilities
• Extend jQuery, merge objects and create settings from defaults
var defaults = { ‘limit’ : 10, ‘dataType’ : ‘json’ };var options = { ‘limit’ : 5, ‘username’ : ‘remy’ };
var settings = $.extend({}, defaults, options);
// settings = { ‘limit’ : 5, ‘dataType’ : ‘json’, ‘username’ : ‘remy’ }
![Page 87: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/87.jpg)
Plugins$(‘#emails .subjects’).doMagic()
![Page 88: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/88.jpg)
Plugins
• Simple to write
![Page 89: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/89.jpg)
Plugins
• Simple to write
• Makes your code more reusable
![Page 90: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/90.jpg)
Plugins
• Simple to write
• Makes your code more reusable
• Don’t break the chain!
![Page 91: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/91.jpg)
Simple Plugin
// wrap in anonymous function to use $(function ($) {
$.fn.log = function () { console.log(this); // returning continues the chain return this; // this is the jQuery collection };
})(jQuery);
![Page 92: The Dom Scripting Toolkit J Query](https://reader037.vdocument.in/reader037/viewer/2022102716/5558bd90d8b42a7e298b51a3/html5/thumbnails/92.jpg)
More Info
Resources:
jquery.com
docs.jquery.com
groups.google.com/group/jquery-en
ui.jquery.com
learningjquery.com
jqueryfordesigners.com
Remy Sharp:
leftlogic.com
remysharp.com