Beruflich Dokumente
Kultur Dokumente
Benefits
jQuery write less and do more (Saves Time &
Money)
jQuery makes animated applications just like Flash
jQuery pages load faster (Factors affecting SEO
Search engine optimization)
Lots of plugins available
Size small
Speed things up
No script error
seamlessly handles cross browser issues
jQuery library is free
jQuery mobile
Simplifies AJAX
jQuery supports building pages using
unobtrusive JavaScript
Wow Factor Web developers use jQuery to
make web
pages more exciting, interactive, cleaner, and
more user friendly. Make your users go WOW!
Unobtrusive
Behavior
Content
Presentation
jquery.js
index.html
style.css
custom.js
Dojo vs jQuery
jQuery
Dojo
Simple
Speed
Well Documeted
Lighter
Bulk
$ factory function
jQuery uses the CSS (Cascading Style Sheets)
selector specification for selecting elements
Basic syntax is:$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQueryaction() to be performed on the element(s)
Eg: $("p").hide() - hides all <p> elements.
The DOM
Document Object Model
jQuery is DOM scripting
Tree structure of a web page
You can add and subtract DOM elements on
the fly
You can change the properties and contents
of DOM elements on the fly
Hands-on
Display an alert using jQuery ready()
Browser Support
jQuery is actively supported in all the below
browsers
Firefox 2.0+
internet Explorer 6+
safari 3+
opera 10.6
chrome 8+
jquery 2.x does not support IE 6,7,8
jsbin
http://jsbin.com
BROWSER SUPPORT
Modernizr
http://www.modernizr.com/
Can I Use?
http://caniuse.com
Selectors
jQuery
Description
Tag Name:
Tag ID:
Tag Class:
Selectors
Basic Selectors
Element
selector
#id selector
.class
Multiple selectors(,,,)
Attribute Selectors
Power of selecting the html elements
Attributes id , name ,value class any
attribute of the tag
Even name is a attribute of a tag
[Attributename=value]
[Attributename*=value]
[Attributename!=value]
[Attributename1=value]
[Attributename2=value]
[Attributename=value]
$([name="contractCheckbox1"]).hide(); hides all the
checkboxes with name contractCheckbox1
[Attributename*=value]
$([name*="contractCheckbox"]).hide(); hides all the
checkboxes with name contractCheckbox1
no for loop if * used
[Attributename!=value]
$([name!="contractCheckbox1"]).hide(); hides all
the checkboxes with name contractCheckbox1
[Attributename1=value][Attributename2=value]
$(input[type="checkbox"][name="contractCheckbox"]
[value="C172"])hides the C172 checkbox
Selectors
Form selectors
:checkbox
:radio
:checked
:selected
:disabled
:enabled
:text
:input
:visible
:hidden
:hidden
They have a CSSdisplayvalue ofnone.
They are form elements withtype="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the
:visible
Elements are considered visible if they
Selectors
Hierarchy
Parent > child
Ancestor descendant
Prev + next (Next adjacent)
Prev ~ siblings (Next siblings)
Filtering elements
Basic filters
:first
:last
:odd
:even
:eq() zero based index
:not()
Content Filters
:contains()
:empty
:has()
:parent
.is()
Filtering elements
Child filters & Type filters
Effects
Basic effects
.hide()
.show()
.toggle()
Sliding
.slideUp()
.slideDown()
.slideToggle()
Fading
Fadein()
FadeOut()
FadeToggle()
FadeTo()
Handling Events
Form events
.blur()
.change()
.focus()
.select()
.submit()
Keyboard events
.keyup()
.keydown()
.keypress()
Handling Events
Mouse Events
.click()
.dblclick()
.hover()
Handling Data
Attributes
.attr()
.removeAttr()
.val()
.html()
.text()
Handling Data
CSS
.addClass()
.removeClass()
.toggleClass()
.hasClass()
Copying
.clone()
Replace
.replaceWith()
Handling Data
DOM insertion, Inside
.append()
.prepend()
DOM insertion, outside
.after()
.before()
DOM insertion, around(wrapping)
.wrap()
.wrapAll()
.wrapInner()
DOM removal
.remove()
.empty()
.unwrap()
Table Manipulation
Adding Rows
After
Before
Remove
Jquery UI
http://jqueryui.com/
Traversing
Basic
.each()
Tree Traversing
. find()
.next()
.nextAll()
.nextUntil()
.parent()
.parents()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
Tips
Store selectors used more than once in
variables
var $listItems = $('li');
var numItems = $listItems.length
Tips
Avoid jQuery's custom selectors when
possible
//Slower
$(li:eq(3))
//Faster
$(li).eq(3)
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
--------------------------------------------------------------$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
Widgets
http://jqueryui.com/
DatePicker
Autocomplete
UI Theme Roller
Validation
AJAX
jQuery load() Method
The jQuery load() method is a simple, but
$(function () {
References
http://api.jquery.com/category/selectors
http://api.jquery.com/category/traversing
http://jquery.com/
http://www.w3schools.com/jquery
http://jqueryui.com/
Forum http://forum.jQuery.com
Plugin http://plugins.jquery.com