Sie sind auf Seite 1von 45

jQuery

Fast & Concise JavaScript library created by


John Resig in 2006

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!

Why jQuery does:


Access elements
Modify appearance
Alter Content
Respond to users interaction
Animation
Retrieve Info from server
Abstraction Layer
Implicit iteration
Chaining

Unobtrusive
Behavior

Content

Presentation

jquery.js

index.html

style.css

custom.js

Dojo vs jQuery
jQuery

Dojo

Simple

Not that much complex


but needs practiced hands

Speed

Active Online Community

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

The DOM Tree

ways to specify the ready


function
$(document).ready(function(){};);
Anonymous function used
jquery(document).ready(function()
{};);
jquery().ready(function(){};)
jquery(function(){};)
jquery(dofunc);
$(dofunc);

Why ready() Separates behavior from Markup


Javascript libraries use $ as a function or variable

<script src=jquery.1.11.1.js> </script>


jQuery.noConflict();
</script>
jQuery(document).ready(function(){..});

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

Code Sharing / Online


Editor
jsfiddle
http://jsfiddle.net/

jsbin
http://jsbin.com

BROWSER SUPPORT
Modernizr
http://www.modernizr.com/

Can I Use?
http://caniuse.com

Selectors
jQuery

Description

Tag Name:

Represents a tag name available


in the DOM. For example $
('p')selects all paragraphs in the
document.

Tag ID:

Represents a tag available with


the given ID in the DOM. For
example$('#some-id') selects
the single element in the
document that has an ID of someid.

Tag Class:

Represents a tag available with


the given class in the DOM. For
example $('.some-class') selects
all elements in the document that
have a class of some-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

element is not shown on the page

:visible
Elements are considered visible if they

consume space in the document. Visible


elements have a width or height that is
greater than zero.

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

:nth-child() 1 based index


:first-child Selector
:first-of-type Selector
:last-child Selector
:last-of-type Selector
:nth-last-child() Selector
:nth-child() Selector
:nth-last-of-type() Selector
:only-of-type Selector
:only-child Selector

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()

what is the difference between a


ppend() and
insertAfter()
if I add a row in table using "append()" and try

to access newly added row,( with last() )


then it references the last row before new
rows inserted dynamically.
Instead if i use insertAfter(), I can reference

the new rows correctly.

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)

D ataTables | Table plug-in


http://plugins.jquery.com
https://datatables.net/

The jQuery noConflict() Method


var jq = $.noConflict();

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

powerful AJAX method.


The load() method loads data from a server
and puts the returned data into the selected
element.
$(selector).load(URL,data,callback);

Dynamically Add Thousands of New rows to a


Table with Performance
jQuery gives us great power when it comes to

manipulating the DOM, and with Great power,


comes Great responsibility! Think about some of
these functions that you can perform very easily
using jQuery
hide/delete/insert/update elements
resize elements/change dimensions
move/animate elements
and so on..
All these cause what is known as
areflowoperation in the browser.

$(function () {

var $tbl = $("#someTable");


// Approach 1: Using $.append() inside loop
var t1 = new Date().getTime();
for(i=0; i < 5000; i++){
rows = "<tr><td>" + i + "</td><td>FName</td><td>LName</td></tr>";
$tbl.append(rows);
}
var t2 = new Date().getTime();
var t1t2 = t2-t1;
$('#result').append("Approach 1: Append Inside Loop took " + t1t2 + " milliseconds"
+ "</br>");

// Approach 2: Using $.append() outside loop


var newrows;
var t3 = new Date().getTime();
for(i=0; i < 5000; i++){
newrows += "<tr><td>" + i + "</td><td>FName</td><td>LName</td></tr>";
}
$tbl.append(newrows);
var t4 = new Date().getTime();
var t3t4 = t4 - t3;
$('#result').append("Approach 2: Append Once Outside Loop " + t3t4 + "
milliseconds" + "</br>");
});

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

Das könnte Ihnen auch gefallen