jQuery

Young.J
http://jquery.com
jQuery prototype js css XPath
js js js jQuery
Starterkit http://jquery.bassistance.de/jquery-starterkit.zip
jQuery Downloads http://jquery.com/src/

<script language="javascript" type="text/javascript">

$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>
a $("a") jQuery $
jQuery $() jQuery click()
$(document) jQuery ready(fn)$(document) document

$("p")$("#p"),$("p") p
(<p></p>),$("#p") id "p"(<span id="p"></span>).
jQuery :
1:
2:DOM
3:css
4:javascript
5:
6:event
7:ajax
8:

1. $(expr)
css Xpath html jQuery

expr html

jQuery
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
jQuery
function jq(){
alert($("div > p").html());
}
id test two div p
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
id test body <div><p>Hello</p></div>

2. $(elem)
jQuery dom xml windows
elem jQuery DOM

jQuery
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($(document).find("div > p").html());
}
id test two div p

function jq(){
$(document.body).background("black");
}
id test

3. $(elems)
jQuery DOM
elem jQuery DOM

jQuery
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
$(form1.elements ).hide();
}
id test form1

4. $(fn)
$(document).ready()$(fn)

fn (Function):

$( function(){
$(document.body).background("black");
})
onLoad

5. $(obj)
jQuery

obj (jQuery): jQuery

jQuery
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
id test two div p

6. each(fn)

fn (Function):

jQuery
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
id test img src 2.jpg

7. eq(pos)
dom
pos (Number): 0

jQuery

<p>This is just a test.</p>

<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($("p").eq(1).html())
}
id test alert So is this<p>

8. get() get(num)
get(num)
get (Number): 0

jQuery
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($("p").get(1).innerHTML);
}
id test alert So is this<p>
get eq eq jQuery get dom
$("p").eq(1) jQuery html()$("p").get(1) innerHTML

9. index(obj)

obj (Object):

jQuery
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($("div").index(document.getElementById('test1')));

alert($("div").index(document.getElementById('test2')));
}
id test alert 01

10. size() Length

jQuery
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($("img").length);
}
id test alert 2

DOM

1.

<img id="a" scr="5.jpg"/> javascript var

o=document.getElementById('a') id a o.src
scr jQuery $("#a") jQuery [ <img id="a" scr="5.jpg"/> ]
jQuery $("#a").scr() 5.jpg,$("#a").scr("1.jpg") src
1,jpg jQuery jQuery DOM

herf()

herf(val)

jQuery herf

jQuery
<a href="1.htm" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
alert($("#test").href());
$("#test").href("2.html");
}
id test url url 2.html
2.html
jQuery
herf()
(val)
src()

herf(val)

html()

html(val)

id()

rel() rel (val)

src (val)

title() title (val)

val() val(val)

2.

after(html) html

id

(val)

name()

name

<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery
function jq(){
$("#test").after("<b>Hello</b>");
}

<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

after(elem) after(elems) elem elems

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("a").after($("#test"));
}

<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

append(html) html
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("#test").append("<b>Hello</b>");
}

<a href="#" onClick="jq()">jQuery<b>Hello</b></a>

append(elem) append(elems) before(html) before(elem) before(elems)
append after

appendTo(expr) append(elem)
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("a"). appendTo ($("#test"));
}

<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>

clone() jQuery

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery
function jq(){
$("#test").clone().appendTo($("a"));
}
$("#test")<a>,
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

empty()
<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("#test").empty();
}

<div id="test"></div><a href="#" onClick="jq()">jQuery</a>

insertAfter(expr)

insertBefore(expr)

insertAfter(expr)

before(elem),insertBefore(expr) after (elem)

prepend (html) prepend (elem) prepend (elems)
append(elem) appendTo(expr) prepend (elem)
<p id="a">p</p>
<div>div</div>
$("#a").append($("div"))
<p id="a">
P
<div>div</div>
</p>
$("#a").appendTo($("div"))
<div>
div
<p id="a">p</p>
</div>
$("#a").prepend ($("div"))
<p id="a">
<div>div</div>

P
</p>

remove()
empty()empty()remove()
wrap(htm) html
<p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("p").wrap("<div class='wrap'></div>");
}

<div class='wrap'><p>Test Paragraph.</p></div>

wrap(elem)
<p>Test Paragraph.</p><div id="content"></div>
<a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
$("p").wrap( document.getElementById('content') );
}

<div id="content"><p>Test Paragraph.</p></div>

3.

add(expr) jquery
<p>Hello</p><p><span>Hello Again</span></p>
<a href="#" onClick="jq()">jQuery</a>
jQuery
function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
$("p")<p>add("span")("p")<span >

 3 $("p").add("span") 3
[<p>Hello</p>] [<p><span>Hello

Again</span></p>] [<span>Hello

Again</span>]
add(el) dom
$("p").add(document.getElementById("a"));
add(els) els
<p>Hello</p><p><span>Hello Again</span></p>
jQuery
function jq(){
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
els [ ]
ancestors () ,

<div>
<p>one</p>
<span>
<u>two</u>
</span>
</div>
jQuery
function jq(){
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
<u>[ <u>two</u> ]
<u> div
[<p>one</p><span><u>two</u></span> ]
<body><html>
ancestors (expr) ancestors
var f var f= $("u").ancestors(div),
[ <p>one</p><span><u>two</u></span> ]
children()
<p>one</p>
<div id="ch">
<span>two</span>

</div>
jQuery
function jq(){
alert($("#ch").children().html());
}
$("#ch").children()[ <span>two</span> ]..html()two
children(expr)
<div id="ch">
<span>two</span>
<span id="sp">three</span>
</div>
jQuery
function jq(){
alert($("#ch").children(#sp).html());
}
$("#ch").children()[<span>two</span><span id="sp">three</span> ].
$("#ch").children(#sp)[<span id="sp">three</span> ]
parent () parent (expr) children
contains(str) str
<p>This is just a test.</p><p>So is this</p>
jQuery
function jq(){
alert($("p").contains("test").html());
}
$("p")test$("p").contains("test") [ <p>This
is just a test.</p> ]
end() ,.
filter(expr)

filter(exprs)

exprs [ ]

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery
function jq(){
alert($("p").filter(".selected").html())
}
$("p")$("p").contains("test") class selected

find(expr)
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
jQuery

function jq(){
alert($("p").find("#a").html())
}
$("p") id a
is(expr) , boolen
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
jQuery
function jq(){
alert($("#a").is("p"));
}
$("#a ") jquery
$("#a").is("div"); ("#a").is("#a")
next() next(expr)
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
jQuery
function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}
$("p").next() [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]

$("p").next(".selected) [<p class="selected">And Again</p> ]

prev () prev (expr) next
not(el) not(expr) jQuery el dom expr jQuery

<p>one</p><p id="a">two</p>
<a href="#" onclick="js()">jQuery</a>
jQuery
function js(){
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(#a).html());
}
$("p")[<p>one</p> ]
siblings () siblings (expr) jquery
<p>one</p>
<div>
<p id="a">two</p>
</div>
<a href="#" onclick="js()">jQuery</a>
jQuery

function js(){
alert($("div").siblings().eq(1).html());
}
$("div").siblings() [<p>one</p> <a

href="#"

onclick="js()">jQuery</a> ]
alert($("div").siblings(a)[<a href="#" onclick="js()">jQuery</a> ]

4.
addClass(class)

class

removeClass (class)

class

attr (name)
<img src="test.jpg"/><a href="#" onclick="js()">jQuery</a>
jQuery
function js(){
alert($("img").attr("src"));
}
test.jpg
attr (prop)

prop hash

<img/><a href="#" onclick="js()">jQuery</a>

jQuery
function js(){
$("img").attr({ src: "test.jpg", alt: "Test Image" });
}
<img src="test.jpg" alt="Test Image"/>
attr (key,value)

key value

<img/><a href="#" onclick="js()">jQuery</a>

jQuery
function js(){
$("img").attr(src,test.jpg);
}
<img src="test.jpg"/>
removeAttr (name)

<img alt="test"/><a href="#" onclick="js()">jQuery</a>

jQuery
function js(){

$("img"). removeAttr("alt");
}
<img />
toggleClass (class)

<p>Hello</p><p class="selected">Hello Again</p><a href="#" onclick="js()">jQuery</a>

$("p") [<p>Hello</p>,<p class="selected">Hello Again</p> ]
$("p").toggleClass("selected")

[ <p class="selected">Hello</p>,

<p>Hello Again</p> ]

CSS

javascript css
<div id="a" style="background:blue">css</div>
background document.getElementById("a").style.background
jQuery css
$("#a").background()$("#a").background(red)
$("#a") jQuery [ <div id="a" /div> ]
$("#a").background() background
$("#a").background(red) background redjQuery
css
background
(val)

color()

css(key, value)
left()

left(val)

top(val)

()
color(val)
float()

css(name)

float(val)

overflow()

background
css(prop)

height() height(val) width() width(val)

overflow(val)

position()

position(val) top()

 css(name) css(prop) css(key, value)

<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
css(name) name
$("#a").css("color") color red("#a").css("background ") blue
css(prop) prop hash css
$("#b").css({ color: "red", background: "blue" });
<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background:
"blue" }hash color key"red" value
css(key, value) css
$("#b").css("color","red");<p id="b" style="color:red">test</p>

JavaScript

$.browser() boolen
$(function(){
if($.browser.msie) {
alert(" IE ");}
else if($.browser.opera) {
alert(" opera ");}
})
msiemozillaoperasafari
$.each(obj, fn) obj fn obj $().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
012 function(i)
$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );
{ name: "John", lang: "JS" } hash hash
$.extend(obj, prop)
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
settings { validate: true, limit: 5, name: "bar" }

$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})

$.grep(array,fn) fn array array fnfn

boolen fn true
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
$.grep [0,1,2,3,4][01]
$.merge(first, second)

$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
arr [0,1,2,3,4]
$.trim(str)
$.trim(" hello, how are you? ")"hello, how are you?"

javascript getElementById id
style.display
none block, none
setTimeout
height
js jQuery
1 $("#a").toggle("slow"),

, jQuery

jQuery
hide()

<p id="a">Hello Again</p><a href="#" onClick= ("#a").hide()>jQuery</a>

,id a display none
show()
hide(speed) 0speed
3 ("slow", "normal", "fast")
show(speed) 0
hide(speed, callback) show(speed, callback)
callback
toggle()

toggle(speed)

toggle(speed),
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds)

fadeOut(speeds)

hide(speed) show(speed)fadeIn fadeOut

<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQu
ery </a>

fadeIn(speed, callback) fadeOut(speed, callback)

callback

callback
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQue
ry </a>
,
fadeTo(speed, opacity, callback) speed opacity
callbackOpacity (0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'>
jQuery </a>
jQuery javascript
slideDown(speeds) 0
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
slideDown(speeds,callback) 0
callback

slideUp("slow") slideUp(speed, callback) 0

slideToggle("slow") 0 0

hover(Function, Function)

move over function move

out function
<style>.red{color:#FF0000}</style>
Html <div id="a">sdf</div>
jQuery
$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
id a red red
toggle(Function, Function)

<style>.red{color:#FF0000}</style>
Html <div id="a">sdf</div>
jQuery
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
id a red red
bind(type, fn)
trigger(type)

type $("p").trigger("click")

unbind()

unbind(type)

unbind(type, fn)

Dynamic event(Function)

$("#a").bind("click",function() {
$(this).addClass("red");
})

$("#a").click(function() {
$(this).addClass("red");
});
id a red

jQuery
browers
error(fn)
load(fn)

unload(fn)

form
change(fn)
select(fn)
keyboard
keydown(fn)
keypress(fn)

resize(fn)

scroll(fn)

submit(fn)

keyup(fn)

mouse
click(fn)
dblclick(fn)
mousedown(fn)
mousemove(fn)
mouseout(fn) mouseover(fn)
mouseup(fn)
UI
blur(fn)
focus(fn)

5
click(fn) click() unclick() oneclick(fn) unclick(fn)
click(fn)
click() click
unclick () click
oneclick(fn) click
unclick (fn)
browersformkeyboardmouseUI

Ajax


$.ajax(prop)

ajax prop hash

key/value
(String)type(get post)
((String)url url
((String)data post
((String)dataType( "xml", "html", "script", "json")
((Boolean)ifModified false
((Number)timeout:$.ajaxTimeout
((Boolean)global ajax true
((Function)error
((Function)success
((Function)complete

jQuery
$.ajax({url: "ajax.htm",
success:function(msg){
$(div"#a").html(msg);
}
});
ajax.htm id a div
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
get ajax.aspx id a

$.ajaxTimeout(time)
$.ajaxTimeout( 5000 )

$.get(url, params, callback) get

url
$.get( "ajax.htm" , function(data){ $("#a").html(data) })
$.get( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }

$.getIfModified(url, params, callback) get

callback
$.getJSON(url, params, callback) get json callback
$.getScript(url, callback) get javascript callback
$.post(url, params, callback) post callback
load(url, params, callback) DOM callback

$("#a").load("ajax.htm", function() { alert("load is done"); } );

ajax.htm id a callback
loadIfModified(url, params, callback) get
DOM callback
ajaxStart(callback) ajax callback
ajaxComplete(callback) ajax callback
ajaxError(callback) ajax callback
ajaxStop(callback) ajax callback
ajaxSuccess(callback) ajax callback

jQuery

jQuery jQuery thickbox iFX

jQuery-googleMap
demo E

http://jquery.com/plugins

http://interface.eyecon.ro/demos

http://www.dyve.net/jquery/
http://bassistance.de/jquery-plugins
google