Introuction To jQuery
-
Upload
winster-lee -
Category
Technology
-
view
3.911 -
download
0
description
Transcript of Introuction To jQuery
![Page 1: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/1.jpg)
As a JavaScript library Shorthand & Utilities functions Document Object Model
Elements, Attributes, Styles, Events Effects / Animation Asynchronous JavaScript And XML
As an UI development framework Community Plugins Widgets & Themes Extending jQuery object
![Page 2: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/2.jpg)
![Page 3: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/3.jpg)
View in browser (frontend / user interface)
jQuery JavaScript (HTML + CSS) Document Object Model A Re-introduction to JavaScript $/jQuery at first sight CSS Selectors jQuery Selectors Traversing DOM DOM Attributes Event handling AJAX / Firebug Effects / jQuery UI Plugins / jqGrid Plugin: jQuery.fn.x
![Page 4: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/4.jpg)
Basic requirement Language neutral & platform independent
Document & content manipulation Can programmatically access & manipulate elements, attri
butes & content Event model
All elements can generate events Interface for binding events
Stylesheet object model Selectors, rules and properties of individual style sheets
can be added, removed and changed
![Page 5: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/5.jpg)
Document Object Model
![Page 6: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/6.jpg)
The world’s most misunderstood programming language - Douglas Crockford 2001
LiveScript / JavaScript / JScript / ECMAScript Name, Design Errors, Bad Books, Substandard
No concept of input or output Host environment scripting Can be Object-Oriented: prototype new delete Can have private variables & private methods Can use classical inheritance & other code reuse pa
tterns
![Page 7: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/7.jpg)
![Page 8: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/8.jpg)
![Page 9: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/9.jpg)
{ // JavaScript Object Notation name: value, key: obj, array: [true,1,'string',"str",[],{a:null}]}
![Page 10: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/10.jpg)
![Page 11: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/11.jpg)
$/jQuery at first sight
![Page 12: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/12.jpg)
jQuery as (an object-based) library document.getElementById(‘id’)
$(‘#id’) document.getElementsByTagName(‘tag’)
$(‘tag’) document.getElementsByClassName(‘cls’)
$(‘.cls’) elm.style.display = ‘none’
$(elm).css(‘display’, ‘none’) $(elm).hide() // .show()
elm.className = ‘cls’ $(elm).addClass(‘cls’) $(elm).removeClass(‘cls’) $(elm).hasClass(‘cls’) $(elm).toggleClass(‘cls’)
![Page 13: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/13.jpg)
CSS Selectors
![Page 14: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/14.jpg)
jQuery Selectors
![Page 15: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/15.jpg)
jQuery Selectors - Forms
![Page 16: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/16.jpg)
Traversing DOM (with firebug)
![Page 17: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/17.jpg)
Traversing DOM
![Page 18: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/18.jpg)
DOM Attributes
![Page 19: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/19.jpg)
![Page 20: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/20.jpg)
Event handling
![Page 21: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/21.jpg)
Event handling
![Page 22: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/22.jpg)
Asynchronous JavaScript And XML
![Page 23: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/23.jpg)
Asynchronous JavaScript And XML
![Page 24: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/24.jpg)
Utilities
$.trim(' some text ');
![Page 25: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/25.jpg)
Effects
![Page 26: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/26.jpg)
![Page 27: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/27.jpg)
![Page 28: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/28.jpg)
![Page 29: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/29.jpg)
Plugin: jQuery.fn.x
![Page 30: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/30.jpg)
Plugin: jQuery.fn.x
![Page 31: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/31.jpg)
As a JavaScript library Shorthand & Utilities functions Document Object Model
Elements, Attributes, Styles, Events Effects / Animation Asynchronous JavaScript And XML
As an UI development framework Community Plugins Widgets & Themes Extending jQuery object
![Page 32: Introuction To jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f46c4b4c905b9508b4571/html5/thumbnails/32.jpg)