Jquery Introduction Hebrew

A jQuery Cross-Browser
JavaScript Library

write less, do more... new kind of JavaScript Library

? jQuery
JavaScript - jQuery
AJAX HTML
WEB

jQuery
. 55.9kb -
. (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) Cross-browser - -
CSS - -
. -
. -
-
. -
.Intellisense -

?jQuery
http://jquery.com-

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?Rel
easeId=1736

To enable Intellisense support, add this to the top of
your .js file:
/// <reference path="~/shared/js/jquery-vsdoc.js"/>

JavaScript Library Speed Comparison
Framework Speed Comparison
6000

5000

4000

3000

2000

1000

0
Firefox 3.0.4 Opera 9.62 Google Chrome Safari 3.1.2 Internet Explorer Internet Explorer Internet Explorer Internet Explorer Avg
5.5 6.0 7.0 8.0

MooTools jQuery Prototype YUI Dojo

$ == jQuery is simply an “alias”
DOM
window.onload = function() {
…
}; -

X $(document).ready(function(
){
...
HTML-
DOM

});
$ (function( ) {
//when the DOM is ready to be
used
});

$(document).ready(function() { :each(callback)
$("div").each(function (i) {
alert(„DivNumber:‟+i+$(this).text());
callback
});
)};
<div>First Div</div>
<div>Second div</ div >
continue(); break();

$(document).ready(function() {
alert(„Number of divs on Page:‟+$("div").length);
)};
<div>First Div</div>
jQuery :length
<div>Second div</ div >

-
JavaScript jQuery
jQuery.noConflict(); ' ' -jQuery.noConflict( )
jQuery(document).ready(function(){ jQuery
jQuery("div").hide(); jQuery
});
$('someid').hide();

<script src="prototype.js"></script>
<script src="jquery.js"></script>
var $jq = jQuery.noConflict();
$jq(document).ready(function(){ jq -
$jq("div").hide();
});
$('someid').hide();

<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true); ' ' -jQuery.noConflict( extreme)
var jQuery_1_2_6 = $.noConflict(true); jQuery
(function($) {
alert('jQuery: ' + $.fn.jquery); jQuery
})(jQuery_1_2_6);
(function($) {
alert('jQuery: ' + $.fn.jquery);
})(jQuery_1_3_2);
</script>

JavaScript Library Speed Comparison

$("#example").click(function (){
alert(“element selected by id”); ID -ID
});
)};
<p id="example">Example paragraph</p>

$(“p").click(function (){
alert(“element selected by tagName”); -
});
)};
<p id="example">Example paragraph</p>

$(“.example_class").click(function (){
alert(“element selected by class”);
class -class
});
)};
<p class=“example_class">Example paragraph</p>

-
$(“.examClass.myClass").click(function (){
alert(“element selected by a couple classes”); -class - .class.class
});
)};
<p class=“examClass myClass">Example
paragraph</p>
$(“*").click(function (){
alert(“all elements been selected ”);
}); -*
)};
<span id="example">example</span>
<div>just sample</div>

$(“div,span").click(function (){
alert(“elements selected by different selectors - -
”);
});
)};
<span class="example">example</span>
<div>just sample</div>

$(“ #main p ”).click(function (){
});
)}; -
<div id="main">
<p>paragraph inside</p>
<span>
<p>paragraph inside inside</p>
</span>
</div>

$(“ #main > p ”).click(function (){
});
)}; . -
<div id="main">
<p>paragraph inside</p>
<span>
<p>paragraph inside inside</p>
</span>
</div>

-
$(“label + input”).click(function (){

});
alert(“First input selected”); -prev + next
)};
<label>Name:</label> <input type="text"></input>
<label>Family:</label> <div>text</div>

$(“#example~li”).click(function (){
alert(“Third & four li selected”);
});
)};
<ul>
-prev ~ siblings
<li>first</li> DOM
<li id="example">second</li>
<li>third</li>
<li>four</li>
<ul><li>six</li></ul>
</ul>

$(“ tr :first ”).click(function (){
alert(“First row selected”);
}); :first
)};
<table>
<tr><td>Row 1</td></tr>
</table>

$(“ tr :last”).click(function (){
alert(“Last row selected”);
}); :last
)};
<table>
</table>

$(“ tr :not(.red) ”).click(function (){

});
alert(“First row selected”); :not(selector)
)};
<table>
<tr class=“red”><td>Row 2</td></tr>
</table>

$(“ td:eq(1)”).click(function (){

});
alert(“Cell1 selected”); :eq(index)
)};
<table>
<tr><td>cell0</td><td>cell1</td></tr>
</table>

:even
$("tr:even").css("background-color", "#bbbbff");
)};
<table>
<tr><td>Row 1</td></tr> - :odd
</table>

One Two Thre Four One Two Thre Four
$(document).ready(function() { e e
$("tr:odd").css("background-color", "#bbbbff");
)};
<table>
e e
<tr><td>Row 2</td></tr> One Two Thre Four One Two Thre Four
</table>
e e
e e

$(“ td:gt(3)”).click(function (){
alert(“Cell && Cell 5”);
});
)}; :gt(index)
<table>
</table>

$(“ td:lt(3)”).click(function (){
alert(“Cell 0 && Cell 1 && Cell 2”);

)};
}); :lt(index)
<table>
</table>

$(":header").css({
background:'#CCC', color:'blue' });
)};
<body> h1,h2,h3 :header
<h1>Header 1</h1>
<p>Contents 1</p>
<h1>Header 2</h1>
<p>Contents 2</p>
</body>

$(“ div:animated ”).click(function (){
alert(“You clicked div that currently under
animation”);
}); :animated
)};
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt(); //run infinity loop
<div id=“mover”>Just Animated Div</div>

$("div:contains('John')").css("text-
decoration", "underline");
)};
<body> :contains(text)
<p> John Resig </p>
<p> George Martin </p>
<p> Malcom John Sinclair </p>
<p> J. Ohn </p>
</body>

$(“ div: empty”).click(function (){
alert(“Last div was selected”);
});
)}; :empty
<div>
<p>Div with child</p>
</div>
<div>Div with text</div>
<div></div>

$("div:contains('John')").css("text-
:has(selector)
)};

<body>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
</body>

$("td:parent").css('backgroundColor','#fff00f');
)};
<table border="1">
<tr>
<td>Value 1</td> :parent
<td><p><p></td>
</tr>
<tr>
<td>Value 2</td>
<td></td>
</tr>
</table>

$("input: hidden").val(“Store hidden value”);
$(“div: hidden").text(“text In div”);
)};
<body> :hidden
<div style="display: none;">Hider</div>
<input type="hidden" />
<div>LOL</div>
</body>

$(“div: visible").text(“text In div”);
)};
<body>
<div style="display: none;">Hider</div>
:visible
<div>LOL</div>
</body>

$("div[id]").click(function(){
alert(“You Selected first div”);
});
$("div:attr('rel')").text(“divik”); : [attribute]
)};
<body>
<div id="hey">first div</div>
<div rel="there">second div</div>
</body>

$("input[name='news']").val(“Hello”);
)};
<body>
<input type="radio" name="news" value="Hot Fuzz" [attribute=value]
/>
<input type="radio" name=“accep" value="Hot Fuzz"
/>
</body>

$("div[id]").click(function(){
alert(“You Selected first div”);
});
$("div:attr('rel')").text(“divik”); : [attribute]
)};
<div id="hey">first div</div>
<div rel="there">second div</div>

$("input[name='news']").val(“Hello”);
)}; [attribute=value]
<input type="radio" name="news" value="Hot Fuzz" />
<input type="radio" name=“accep" value="Hot Fuzz" />

$("input[name!='news']").val(“Hello”);
)}; [attribute!=value]
<body>
<input type="radio" name="news" value="Hot Fuzz"
/>
<input type=“text" value="Hot Fuzz" />
<input type="radio" name=“apolo" value="Hot Fuzz"

$("input[name^='news']").val("news here!");
)}; [attribute^=value]
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

$("input[name$='letter']").val("news here!");
)};
<input name="newsletter" /> [attribute$=value
<input name="jobletter" />

$("input[name*=„man']").val("news here!");
)}; [attribute*=value]
<input name="newsmantter" />
<input name="letterman" />
<input name="newmilk" />

$("div span:first-child") .css("text-
decoration", "underline")
)};
<div> :first-child
<span> John </span>
<span> John </span>
</div>
<div>
<span> Glen </span>
<span> Tane </span>
</div>
$("div span:first-child") .css("text-
decoration", "underline")
)};
<div> :last-child
<span> John </span>
<span> John </span>
</div>
<div>
<span> Glen </span>
<span> Tane </span>

$("div :only-child") .css("text-decoration", "underline")
)};
<div>
<span> John </span>
<span> John </span> :only-child
</div>
<div>
<span> Glen </span>
<span> Tane </span>
</div>
<div>
<div></div>
</div>

alert($(" input).length);
)}; input, textarea, select :input
<input type="button" value="Input Button"/>
<input type="checkbox" /> button
<input type="file" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
$("input:text").css(„border‟,‟3px red solid‟);
)}; :text
<input type="password" /> $(“*:text”)
<input type="text" />
<textarea></textarea>

-
$("input: password").css(„border‟,‟3px red solid‟);
)};
:password

$("input: radio").css(„border‟,‟3px red solid‟);
)}; :radio

$("input: checkbox'").css(„border‟,‟3px red solid‟);
)};
checkbox :checkbox
<input type="checkbox" />

-
$("input: submit ").css(„border‟,‟3px red solid‟);
)};
submit input :submit

$(“: image").css(„border‟,‟3px red solid‟);
)}; : image
<input type="image" />

$(" reset '").css(„border‟,‟3px red solid‟);
)};
reset :reset
<input type="reset" />

-
$(“: button ").css(„border‟,‟3px red solid‟);
)};
: button
<input type="button" value="Input Button"/>
<button>Button</button>

$(“: file ").css(„border‟,‟3px red solid‟);
)};
: file
<input type="file" />

$(“input:enabled ").css(„border‟,‟3px red solid‟);
)}; : enabled
<input name="email" disabled="disabled" />
<input name="id" />

$(“input:disabled ").css(„border‟,‟3px red solid‟);
)}; :disabled
<input name="email" disabled="disabled" />
<input name="id" />
$(“input:checked").css(„border‟,‟3px red solid‟);
)};
<input type="checkbox" name="news" checked="checked" : checked
value="Hourly" /> <input type="checkbox" name="newsletter"
value="Daily" />
$(“: selected ").css(„border‟,‟3px red solid‟);
)}; : selected
<select name="garden" multiple="multiple">
<option>Flowers</option> checkboxes or radio
<option selected="selected">Shrubs</option>
</select>

alert($('#example1').attr("rel")); Simple Button
alert($('#example1').attr(“id")); undefined
:attr(name)
)}; undefined
<input type=“button“ rel=„Simple Button‟ />

$(“# btnFirst").attr("disabled", "disabled");
$(" btnZero").attr({title: "jQuery", alt: "jQuery Logo"
}); :attr(key, value)
)};
<img id=“imgZero” src="/images/hat.gif“ />
<button id=“btnFirst”>1st Button</button>
<button id=“btnSecond”>2nd Button</button>
$("div").attr("id", function (index) { divID0
return “divID" + index; divID1
}) divID2
:attr(key, fn)
)};
<div>Zero-<div> <div>First </div> <div>Second </div>

$(“input”).removeAttr(“rel");
)};
:removeAttr(name)
<input type="password" rel=“lol”/>
<input type="radio" rel=“lol”/>
<input type="reset" rel=“lol”/>

$('#example').addClass("example_class");
)}; :addClass(class)
<div id=“example”>This is sample div<div/>


)};
$("p:even").removeClass("blue"); :removeClass(class)
<p class="blue under">Hello</p>
<p class="blue under highlight">Hello</p>

alert($(“#example").hasClass("selected")); false
alert($(“p").hasClass("selected")); true :hasClass(class)
)};
<p id=“example”>Hello</p>
<p class="selected">Goodbye</p>

$(“p”).toggleClass("highlight");
)}; :toggleClass(class)
<p class="blue highlight">highlight</p>
blue

HTML
alert($("p").html()); hello<input type="text"/>
innerHTML html :html( )
$(“p").html('hello song changed');
)};
<p>hello<input type="text"/></p> hello song changed HTML
<p>wellcome</p> hello song changed

alert($("p").text()); Test paragraphNew innerText :text( )
$("p").text(“sample template”); paragraph
)};
sample
<p>Test paragraph</p>
<p>New paragraph</p>
template Text
<p><input type="text" value="myvalue"/></p>
sample
template . - input-
sample
$(document).ready(function() { template
alert($("option: selected , input, textarea").val());
$("*").val(["Single2"]); Single
value :val( )
)};
<select id="single">
<option>Single</option>
<option>Single2</option>
</select> :
<input type="text" value="Just Text"/>
<textarea>Free text</textarea> inputs, selects ,textareas , checkboxes, radio
<input type="radio" value="Single2"/>

-
$("div") .filter(".middle") .css("border-color", "red");
:filter(expr)
)};
<div>just sample div</div>
<div class="middle">div with some class</div> expr
expr
alert($(“#mySpan”).is(":contains('Peter')"))); :is(expr)
)}; true
<span id=“mySpan”>Peter</span> expr

$(“div”). slice(0, 1).text(„selected‟); :slice(start, end)
$(“div”). slice(-1).text(„new selected‟);
)};
<div>Zero div</div>
<div>Div one</div>
<div>Div two</div>
end

-
$("div").find("span").text('div value changed'); :find(expr)
)}; div value
<div id="childDivOne"><span>lol2</span></div> changed expr
<div id="childDivTwo"><span>lol</span></div> div value
changed .CSS 1-3 expr
alert($("div").children().size());
2 :children(expr)
)};
<div id="childDivOne">
<span>Primary child1<span>SecondaryChild</span></span>
</div> expr
<div id="childDivTwo"><span>Primary child2</span></div>

$("p").parent(".selected").css("background", "yellow");
:parent(expr)
)};
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>

$(document).ready(function() { expr
alert( $(".hit").siblings().size() ); 4 :siblings(expr)
)};
<ul>
<li>Ei</li> <li class="hit">Nin</li> <li>Ten</li><li class="hil">Ele</li>
</ul>

- -

)};
alert($("p").add("span").length); expr :add(expr)
<p>Hello</p><span>Hello Again</span>
<span>my span</span>

$("p").closest("span").css('color', „gray'); :closest(expr)
div span
)};
<div>div paragraph
<span>span<p>paragraph</p><span>
</div>

$(".selected").nextAll().css("background", "red")
.end().next().css("background", "yellow") :prev(expr)
.end().prevAll().css("background", "blue")
.end().prev().css("background", "green"); Dom-
)};
<p>Again</p>
<div><span>Hello</span></div>
Dom- :next(expr)
<p>Hello Again</p>
<p class="selected">And Again</p>
<p>Again Again Again</p>
<p>Again Again Again Again</p>

-
$("#main").find("#childDivTwo") //now childDivTwo is selected element
now selected elements childDivTwo and
.andSelf()
.css("border","5px solid red") main
:andSelf( )
.end() //add red border to childDivTwo and main
.find("span") div
.css("border","5px solid green") //now childDivTwo is again selected
.end() //now span with content lol is selected
:end( )
.end() add green border to span with content lol
now childDivTwo is selected
.css("border-top","5px solid black");
)}; //now main div is selected
<div id="main"> //change top border color of div main to
Main Div black
<div id="childDivOne">Child one</div>
<div id="childDivTwo">Child Two
<span>lol</span>
</div>
</div>

-
$("#main").append("<span>FirstChild</span>");
:append(content)
$("<em>First Child's child</em>").appendTo("span");
$("#main").prepend("<span>Zero Child</span>");
$("<em>ZeroChild child</em>").prependTo("#main appendTo(selector)
span:first");
)};
<div id="main">Container</div>

<DIV id="main“>
<SPAN>
<EM>Zero Child child</EM>
:prepend(content)
Zero Child
</SPAN>
Container
<SPAN>FirstChild prependTo(selector)
<EM>First Child's child</EM>
</SPAN>
</DIV>

-
$("<div>insert after sibling</div>").insertAfter("#foo,#main");
:after(content)
$("<div>after sibling</div>").after("#foo");
$("<div>insert before sibling</div>").insertBefore("#foo,#main");
$("<div>before sibling</div>").before("#foo"); insertAfter(selector)
)};
<div id="main">Container</div>
<div id="foo">FOO!</div>

<DIV insert before sibling </DIV>
<DIV id="main"> Container </DIV> :before(content)
<DIV insert after sibling </DIV>
<DIV>insert before sibling </DIV>
<DIV id="foo"> FOO! </DIV>
<DIV > insert after sibling </DIV>
insertBefore(selector)

-HTML-
$(document).ready(function() { :wrap(html/elem)
$("p").wrap($("#wrapDiv"));
$("p").wrap("<span></span>");
$("div").wrapAll($("#wrapAllDiv"));
$("p").wrapInner("<b></b>"); HTML
)};
:wrapAll(html/elem)
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p> HTML
<div id="wrapDiv" style="border:1px solid black;"></div>
<div id="wrapAllDiv" style="border:1px solid green;"></div>

wrapInner(html/elem)

HTML

$(„button'). ).replaceWith("<div>" + $(this).text() :ReplaceWith(content)
+"</div>");
)}; <div>First</div>
HTML
<button>First</button>

$("p").empty().text('lol');)}; <p>lol</p>
<p> :empty( )
Hello <span>Person</span><a href="#">person</a>
</p>

$("p").remove(":contains('Hello')");
DOM :remove(expr)
)}; :
<p class="hello">Hello</p> how are
how are you? expr
<p>you?</p>

$(“button”).clone(true).insertAfter(this);
:clone(bool)
)};
<button>Clone Me!</button> :
<button>Clone
Me!</button>

…CSS-
alert($(“div”).css(„backgroundColor‟)); .css :css(name)
alert($(“div”).css(„background-color‟));
)};
<div style="background-color:blue;"></div> margin, background, border
.css :css(name)
$(“div”).css('border','1px solid red');
$(“div”).css('backgroundColor','blue'); margin, background, border
$(“div”).css('height',50);
)}; Sample Text
<div>Simple Text</div>
z-index, font-weight, opacity, zoom and line-
height
:css(name)
$(document).ready(function() { - css
$(this).css({backgroundColor : 'red',
'font-weight' : 'bolder'
});
)}; Sample Text
margin, background, border

z-index, font-weight, opacity, zoom and line-

alert(“My Window Width is: ”+$(window).width());
$(“div”).width(200);
)}; width(val)
<div id=“sample”>Sample Text</div>
<div>Another Sample Text</div>
alert(“My Window Height is: ”+$(window).height());
$(“div”).height(200);
)}; height(val)
<div id=“sample”>Sample Text</div>
<div>Another Sample Text</div>
alert("width+padding is: "+$("p").innerWidth()); 130 :
)};
<p style="margin:10px;padding:5px;border:10px solid #666; innerWidth( )
width:120px;"></p>
<p>Another paragraph</p>
:
alert("height+border+padding is: "+$("p").outerHeight());
50
)};
alert("height+border+padding+marigin is: "+$("p").outerHeight(true));
70 outerHeight(margin
<p style="margin:10px;padding:5px;border:10px solid #666; )
height:20px;"></p>
<p>Another paragraph</p>

alert("left: " + $(“div”).offset().left + ", top: " + $(“div”).offset().top );
)}; offset( )
<div>Where is my div?</div>

alert("left: " + $(“p”).position().left + ", top: " + $(“p”).position().top );
)}; position( )
<div><p>Where is my Paragraph</p></div>

alert(“current scroll: " + $(“div”).scrollTop() );
$(“div”).scrollTop(20); scrollTop(va
alert(“new scroll: " + $(“div”).scrollTop() );
)}; l)
<div style=“height:100px;”>Where is my div?</div>
alert(“current scroll: " + $(“div”).scrollLeft() );
$(“div”).scrollLeft(100); scrollLeft(va
alert(“new scroll: " + $(“div”).scrollLeft() );
)}; l)
<div style=“width:200px;”>Where is my div?</div>

$("#showr").click(function () { :show( speed,[callback])
$("div:eq(0)").show("fast", function () {
// use callee so don't have to name the function
$(this).next().show("fast", arguments.callee);
}); slow,normal,fast
}); callback
$("#hidr").click(function () { $("div").hide(2000); });
)};
<style> div { background:#def3ca; margin:3px; width:80px; :hide( speed,[callback])
display:none; float:left; text-align:center; }
</style>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div> slow,normal,fast
<div>how</div>
<div>are</div> callback
<div>you?</div>

$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);

$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity
$(“div”).fadeTo (“fast”, 0.5);

$(“div”).hide(“slow”, function() {
alert(“The DIV is hidden”);
});

$(“div”).show(“fast”, function() {
$(this).html(“Hello jQuery”);
}); // this is a current DOM element

:animate(properties,[duration],[easing],[callba
// .animate(options, duration)
$(“div”).animate({ width: “90%”, ck])
opacity: 0.5,
borderWidth: “5px”}, 1000);

$(“div”).animate({width: “90%”},100)
.animate({opacity: 0.5},200)
.animate({borderWidth: “5px”});

$(“div”).animate({width: “90%”},
{queue:false, duration:1000})
.animate({opacity : 0.5});

? jQuery
jQuery-
Dom Level 0 Model*
Dom Level 2 Model*
Internet Explorer 0-2 mess Model*
jQuery-
Unobtrusive Javascript
-
-
-
jQuery -

jQuery 1.4-
$("div.test").bind({
mouseenter: function(){ :bind(events)
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
});

$("p").focusin(function() {
:focusin(handler(eventObject))
$(this).find("span").css('display','inline').fadeOut(1000);
});
$("p").focusout(function() {
$(this).find("span").text(„focus out‟)
.css('display','inline').fadeOut(1000);
});
}); :focusout(handler(eventObject))
<p>
<input type="text" /> <span>focusin fire</span>
</p>
<p>
<input type="password" /> <span>focusin
fire</span>
</p>

-

:jQuery.proxy
var obj = {
name: "John",
test: function() {
alert( this.name ); :jQuery.proxy(function,scope)
}
$("#test").unbind("click", obj.test);
-
}; -
$("#test").click( jQuery.proxy( obj.test, obj ) ); :jQuery.proxy(scope,name)
// This also works:
$("#test").click( jQuery.proxy( obj, "test" ) ); -
-

$(document).ready(function() { :live(type,fn)
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
}):
<p>Sample paragraph</p> stopImmediatePropagation stopPropagation
$(“button:first").click(function({alert(“First clicked”) ;}) ); :die(type,fn)
$(“button:last”).click(function({$("button:first").trigger('clic
k'); }))
)}; bind
$(“div").hover( function () {
$(this).css(„bacground-color‟,‟red‟);
}, function () {
:hover(over,out)
$(this).css(„bacground-color‟,‟black‟);
} );
)};
<div>Sample div</div>

jQuery.event.special.tripleclick = {
$(“div”).click(function(){
setup: function(data, namespaces) {
alert(“Simple Alert”);
var elem = this,
});
$elem = jQuery(elem);
$(“div”).click(function(){
$elem.bind('click', jQuery.event.special.tripleclick.handler);
alert(“Another Alert”);
}, teardown: function(namespaces) {
});
var elem = this,
)};
$elem = jQuery(elem);
$elem.unbind('click', jQuery.event.special.tripleclick.handler);
}, handler: function(event) {
// use different triggering function var elem = this,
$(document).ready(function() { $elem = jQuery(elem),
$(“div”).click(function(e){ clicks = $elem.data('clicks') || 0;
e.preventDefault(); //stop browser default clicks += 1;
action if ( clicks === 3 ) {
e.stopPropagation();//stop bubbling clicks = 0; // set event type to "tripleclick"
}); event.type = "tripleclick"; // let jQuery handle the triggering of "tripleclick“
$(“div”).triggerHandler(“click”); jQuery.event.handle.apply(this, arguments)
)}; } $elem.data('clicks', clicks); } };
blur click dblclick error focus keydown keypress keyup load(fn)

blur(fn) click(fn) dblclick(fn) error(fn) focus(fn) keydown(fn) keypress(fn) keyup(fn) unload(fn)

mousedown(fn) mouseenter(fn) mousemove(fn) submit mouseover(fn) resize(fn) select

mousemove(fn) mouseleave(fn) mouseout(fn) submit(fn) mouseup(fn) scroll(fn) select(fn)

$(“div”).load(“content.htm”);

// passing parameters
$(“#content”).load(“getcontent.aspx”,
{“id”:”33”, “type”:”main”});

GET POST

$.get(“test.aspx”, {id:1},
function(data){alert(data);});
$.post(“test.aspx”, {id:1},
function(data){alert(data);});

JSON

$.getJSON(“users.aspx”, {id:1},
function(users)
{
alert(users[0].name);
});

$.getScript(“script.js”,
function()
{
doSomeFunction();
});

$.trim() Trims strings
$.each() Iterates through properties and
collections
$.grep() Filters arrays
$.map() Iterates through array, translating items
into new array
$.inArray() Returns index position of value in array
$.makeArray() Converts array-like object into an array
$.unique() Returns array of unique elements in
original array
$.extend() Extend target object with properties of
other objects
$.getScript() Dynamically load a script from url

jQuery UI
 Moved many user interface plug-ins into one
core
 Supported by core contributors
 Includes (currently in v1.6):
• Coming in 1.7: Layout controls, menus, tooltips, more

• Drag / Drop • Calendar • Auto Complete
• Sortable • Slider • Color Picker
• Selectables • Table • Progress Bar
• Resizables • Tabs • Spinner
• Accordion • Shadow • Magnifier

http://ui.jquery.co

Microsoft AJAX Framework
ASP.NET AJAX + jQuery = Microsoft AJAX
Framework

ASP.NET AJAX jQuery

AJAX Requests Selectors
Components
and Controls
Animations
Client Templates

AJAX Control Toolkit Plugins

76

 Use MS Library for:
 AJAX / UpdatePanels
 Creating custom classes and controls
 Use jQuery for:
 DOM manipulation
 CSS manipulation
 Event binding/handling
 UI controls: AJAX Control Toolkit or jQuery UI?
 Look to AJAX Control Toolkit first (better integration)
 jQuery UI offers better selection (not in code base yet)

77

Documentation / Tutorials

http://docs.jquery.

Jquery Introduction Hebrew

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Jquery Introduction Hebrew