jquery查找元素

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')})失去焦点触发