jquery尋找元素

//$("div
font").css("color","purple");//選擇div下面是所有的(不管多少級)font的
$("div > font").css("color","purple");//選擇div下面的第一級font
$("li.test1 +
li").css("color","red");//選擇test1後面緊跟的兄弟(同一級)li,如果後面跟的不是li則什麼也不會選
//    $("li.test1 ~ li").css("color","red");//選擇test1後面所有的兄弟(同一級）li
$("li:nth(10)")選子項,從0開始，只從當前元素中尋找
$("li:nth-child(1)")選子項，從1開始選父類子的子項，如果第一項是li則選中，如果不是則什麼也不選
$("li,ul")選擇多個元素，用逗號來分開

$("div:first-child")選div的父項的第一子項是div的div
$("li:first-child")
相當於對當前的元素進行過濾
$("td:only-child")選擇td的父項只有td這個子項的td
$("li:not(.second)")選擇沒有類second的所有li
$("input:empty")選擇沒朋子項的input
對於p，就算是這樣定義<p></p>它也有子項
$("p *")選擇P的後代,*是萬用字元，$("*")選擇所有的元素

$("button").click(function(){$("#button2").toggle()})點擊後消失或出現
$("#button1").hide("slow").show(3000)先消失再出現
$("input:text")

$("li:contains(test1)")包含

 

$("div").bind("click",{msg:'click'},function(event){alert($(this).text()+event.data.msg)})

選取div,給它綁定click事件處理器,並提示出div的內容$(this).text表示擷取到的div的內
容,

$("div").one("click",{msg:'click'},function(event){alert($(this).text()+event.data.msg)})

同上,但是事件只觸發一次,實質就是點擊一次後調用unbind()方法取消掉了事件綁定

2)Tree Traversal Methods

$(document).find("li")尋找li
$("div").find("p")尋找後代p,所有的(如同 E F)

$("div").children()
$("div").children('p')找子項，僅限於後一級

$("#button1").parents("body")尋找父類是body的
$("#button1").parents()尋找所有的父類

$("#button1").parent()向上一級的父類
$("#button1").parent("p")尋找是p的父類

$("#button1").siblings("div")找兄弟是div的
$("#button1").siblings()找所有的兄弟

$("#button1").prev()上一個
$("#button1").next("li")下一個是li就返回，如果不是什麼也不返回
$("#button1").next()下一個

.add後不會在page中立即出現相關元素，要加上去
$("#test1").add("<font
color='purple'>AEF</font>").prependTo("body")
$("#test1").add("#font").prependTo("body")
$("li:first").add("#font").prependTo("body")
$("li:first")與$("li:first-child")的區別：前者選取第一個元素，後者選取父類的第一個li元素

$("input").next().is("div")如果是div剛返回true

end（）方法，對於test3添加了css,end()方法返回到對象$("body")進行下一步操作
$("body").find(".test3").addClass("color","red").end().find(".test5").addClass("color","purple")

DOM Manipulation Methods

$('#myid').get(0)或$(#myid')[0]將jquey對象變成dom對象，dom對象不能使用jquery對象的方法，同樣
jquery對象也不能使用dom對象的方法

$("#font").attr("color")擷取屬性值

$("#font").attr("color","purple")修改值
$("#font").attr({color:"purple",size:20})修改值
$("#font").attr('color',function(){return "red";})修改值

$("#font").removeAttr('color')

$("#font").css('color')查看css屬性
對於float屬性在IE中用.css("styleFloat")在firefox中用.css("cssFloat")
$("div:last").css("color","red")改變css屬性
$("div:last").css({color:"red",align:"center"})
$("div:last").css("color",function(){return "red"})

$("#font").height()無單位
$("#font").css("height")有單位
$("#font").height(20)設定高度

$("#font").width()
$("#font").width(20)
$("#font").css('width')與height一樣

$(".a.b")選擇有兩個style的元素   <p class='a b'></p>

$(".b").addClass("a")在firebug中添加一個樣子，尋找的時候就如同在頁面中添加過該元素一樣
$(".a").removeClass("a")移除a
$("#.a.b").removeClass()移除所有的元素  
$(".a").toggleClass("b")切換class

$(".a").html()擷取的元素集預設取第一個元素的內容，只能用於html，不能用於XML
$("ul").html()
值：<li>A</li>/n <li>B</li>/n
<li>C</li>/n <div>/n <li>D</li>/n
</div>/n
$("ul").html("<li>haha</li>")設定新的html片斷

$("li").text()擷取所有li及它們的後代的內容
$("li").text("abc")設定值，所有的後代及li的內容都變成了abc

$(":input:text").val()擷取元素的值，主要針對錶單元素
$(":input")匹配所有的表單元素
$(":input:text:first").val(123)設值，對所有的元素，所以要提取出相應的元素

內部插入：參數可以是選取器，jquery對象，也可以是對象
append()  
$(".test1").append('abc')在元素內部的後面添加abc,$(".test3").append($(".test5"))這樣
會移動.test5的元素到.test3元素的最後面
也就是說當後面是jquery對象時會移動相關的元素
appendTo()   $(".test3").prependTo("body")將.test3的元素移動到body的最後面
prepend()     $(".test5").prepend(".test2")移動.test2元素到.test5的最前面
prependTo() $(".test5").prependTo($(".test3"))將.test5元素移到.test3的最前面

外部插入：
before() $(".test1").before($(".test5"))將.test1元素前面插入.test5素
對於jquery對象是移動
(".test5").before("<p>abc</p>")在.test5元素前面插入<p>abc<
/p>
insertBefore() $(".test2").insertBefore(".test5")將.test2元素插入到.test5元素的前面
$("<p>abc</p>").insertBefore($(".test5"))將<p>abc<
/p>插入到.test5元素前面
after()
insertAfter(0這兩個同上面一樣

wrap()用一個元素的結構來封裝匹配的元素
$("li:contains('test')").wrap($('#wrap2'))用#wrap2元素的樣式來修飾相應的li（切記，#wrap2
元素不能有內容，否則就相當於把其它元素全
變成根它一樣的了）

clone()複製
$(".test6").clone().prependTo($('.test2'))將元素複製，然後進行操作,對於jquery對象只能進行移動，
用clone的話就可以複製並插入啦
clone(false)不複製子項目

empty()用來移除所有的子項目，包括文字欄位(文字欄位也被認為是一個節點）
$("ul").empty()移除ul下的所有子項目，包括欄位

remove()移除相應的元素，它的參數可要可不要，但是只能是選取器
$(".test5").remove()移除.test5元素
$("li").remove('.test5')移除.test5的元素

 

bind()
$(".test1").bind("click",function(event){alert('x is '+event.pageX+' y
is '+event.pageY)})
$(".test1").bind("click",function(){alert('abc')})這個event參數是可選的，利用它可以得到一
些東西
click指的是event type
$(".test1").bind("click",{a:'abc'},function(event){alert(event.data.a)})
還參數的事件

unbind()
$(".test1").unbind()移除所有的綁定
$(".test1").unbind('click')移除click事件
$(".test1").unbind('click',handler)移除具有click和相應處理器的事件

one()相應的事件只觸發一次
$(".test1").one("click",{a:'abc'},function(event){alert(event.data.a)})

trigger()
$(".test1").trigger('click')觸發.test1元素的click事件

$(document).ready(handler)
$().ready(handler)
$(handler)這三個函數的功能是一樣的，在DOM全部準備好後，觸發

load()方法，當相對應的元素完全載入完成（包括子項目）後，觸發
unload()當離開頁面時觸發，如refresh,關閉，輸入其它網址，點擊其它連結等
如:$(window).unload(function(){alert('exit')})
$(window).bind('unload',{a:'abc'},function(event){alert(event.data.a+'
exit')})
除了上面的bind,one能加參數其它都不能啊

error()
元素沒有載入正確時觸發,與能使用load()方法的元素一樣

$(".test6").mousedown(function(){alert('mouse
down')});mouse按下就觸發(在元素上移動也會觸發）
$(".test5").mouseup(function(){alert('mouse up')})
mouse釋放的時候觸發(點其它地方，將mouse拖到相應的元素上釋放也會觸發)
$(".test4").click(function(){alert('click')})  
按下，釋放的時候才觸發(在上面移動是不動觸發的)
$(".test3").dblclick(function(){alert('double click')})雙擊事件
$(".test2").toggle(function(){alert('first')},function()
{alert('second')})點擊第一次調用first,第二次調用second
$(".test1").mouseover(function(){alert('mouse over')})mouse放在上面就觸發
$(".test2").mouseout(function(){alert('mouse out')})mouse離開就觸發
$(".test1").hover(function(){alert('mouse
over')},function(){alert('mouse out')})放在上面時觸發第一個，離開時觸發第二個
$(".test2").mousemove(function(){alert('mouse move')})

$("input:text").focus(function(){alert('focus')})獲得焦點觸發
$("input:text").blur(function(){alert('blur')})失去焦點觸發