JQuery学习笔记(一)选择器



JQuery获取的永远是对象，而不是元素，因此判断JQuery获取的元素是否存在时，应按照元素的长度来判断。$("#taq").length或转化成dom对象$("taq")[0]

基础选择器：

  1: $("#text")//ID

  2: $(".text")//Class
  3: $("div")//element

  4: $("div,p,span,MyClass")//同时选定多个元素

  5: $("*") //所有元素

层次选择器：

  1: $("div span")//选取div里所有的span子元素

  2: $("div>span")//选取div元素下元素名是span的子元素

  3: $(".one+div")//选取class为one的下一个div元素,等同于$(".one").next("div");

  4: $("#tow~div")//选取id为two后面的所有div元素等同于$(".one").nextAll("div");取到的都是class为one元素后面的所有div元素

 　　　 5: $(".one").siblings("div")//则将one前后的所有同级元素全部取出 

过滤器：

  1: :first  //选取第一个元素

  2: $("div:first")//选取所有div元素中的第一个div

  3: :last //选取最后一个元素

  　　　　 4: :not(selector)//取出所有与给定元素不相匹配的元素

  5: $("input:not(.myClass)")

  6: :even //选取索引为偶素的元素

  7: $("td:event")

  8: :odd //选取索引为奇数的元素

  9: :eq(index)//选取索引为index的元素

 10: $("td:eq(0)")

 11: :gt(index)//选取索引大于index的元素

 12: :lt(index)//选取索引小于index的元素

 13: :header //选取所有的标题元素

 14:  $(":header")//选取网页中的所有<h1><h2>...

 15: :animated//选取当前正在执行动画的所有元素 

内容过滤器：

  1: :contains(text) 

  2: $("div:contains('我')")//选取所有包含‘我’的div元素

  3: :empty $("div:empty")//选取没有子元素或不包含文本的所有div元素

  4: :has(select) $("div:has(p)")//选取所有含有p元素的div元素

  5: :parent 

  6: $("div:parent")//选取拥有子元素或含有文本的所有div元素 

可见性过滤器

  1: :hidden 

  2: $(":hidden")//选取所有不可见元素，包括<input type="hidden" /><div style="display:none/visibility:hidden" />

  3: $("input:hidden")//单独选取<input type="hidden" />

  4: :visible选取所有可见元素 

属性选择器：

  1: [attribute] $("div[id]")// 选取含有id属性的所有div

  2: [attribute=value] 

  3: $("div[title=test]")//选取title为test的所有div

  4: [attribute^=value]//含有属性以value开头的元素

  5: [attribute$=value]//含有属性以value结束的元素

  6: [attribute*=value]//含有属性value的元素

  7: [selector1][selector2][selectorN] 

  8: $("div[id][title$=test]")//选取含有id属性，并且以test结尾的title属性的所有div元素 

子元素过滤器：

  1: :nth-child(index/event/odd/equation)//选取每个父元素下的第index的子元素或奇偶元素(index从1算起)

  2: :first-child //选取每个父元素的第一个子元素

  3: :last-child

  4: :only-child// 若某个元素是它父元素中唯一的子元素，则它将匹配，若还有其他元素，则不匹配 

表单对象属性过滤器：

  1: :enabled  

  2: $("#form1 :enabled")//选取id为form1表单中的所有可用元素

  3: :disabled

  4: :checked  

  5: $("#form1 input:checked")//选取所有被选中的input元素

  6: :selected  

  7: $("select:selected")//选取所有被选中项选中的元素 

表单原则器：
:input,:text,:password,:radio:checkbox,submit,:image,:reset,:button,:file,:hidden