jQ - 选择器

▼魔方 西西 提交于 2020-02-13 15:33:05

 

1.jQuery-选择器

1)基本选择器

   #id

  根据给定的ID匹配一个元素

$("#myDiv"); 

  

   element

  根据给定的元素名匹配所有元素

$("div");

 

   .class

  根据给定的类匹配元素

$(".myClass");

 

   *

  匹配所有元素

$("*")

  

  selector1,selector2,selectorN

  将每一个选择器匹配到的元素合并后一起返回。

 

$("div,span,p.myClass")

2)层级选择器

  ancestor descendant

   在给定的祖先元素下匹配所有的后代元素

$("form input")

 

  parent > child

  匹配父级元素下的子级元素

$("form > input")

 

  prev + next

  匹配所有紧接在 prev 元素后的 next 元素(相当于css中的相邻选择器)

$("label + input")

 

  prev ~ siblings

  匹配 prev 元素的所有同辈 siblings 元素(相当于css中的兄弟选择器)

$("form ~ input")

 

 3)基本过滤选择器

   :first

  获取第一个元素

$('li:first');   //获取第一个li元素

 

  :last  

  获取最后个元素

$('li:last')            //获取最后一个li\元素

 

  :not(selector)

  匹配没有指定的selector元素/选择器的元素

$("div:not(.one)")        //匹配class名不为one的div

 

  :even

  匹配所有索引值为偶数的元素,从 0 开始计数(但在表格中实际匹配的是第1,3,5...行)

$("tr:even")            //匹配索引为偶数的所有行,实际是第1,3,5....(奇数)行

 

   :odd

  匹配所有索引值为奇数的元素,从 0 开始计数(实际匹配的是第偶数行)

$("tr:odd")

 

  :eq()

  匹配一个给定索引值的元素

$("div:eq(3)")            //匹配索引为3的div

 

  :gt()

  匹配所有大于给定索引值的元素

$("tr:gt(0)")      //匹配除第一行之外,以后的所有行

 

  :lt(3)

  匹配所有小于给定索引值的元素

$("tr:lt(2)")        //查找索引小于2,即第1.2行

 

  :header

  匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");            //给所有的标题加上背景色

 

  :animated

  匹配所有正在执行动画效果的元素

 $("div:not(:animated)").animate({ left: "+=20" }, 1000);    //    对不在执行动画效果的元素执行一个动画特效

 

4)可见性过滤选择器

  :visible

  匹配所有的可见元素

$("tr:visible")

 

  :hidden

  匹配所有不可见元素,或者type为hidden的元素

$("tr:hidden")

 

 5)内容过滤选择器

   :contains(text)

  匹配包含给定文本的元素

$("div:contains('John')")

 

  :empty

  匹配所有不包含子元素或者文本的空元素

$("td:empty")       //返回所有内容为空的td

 

   :has(selector)

  匹配含有selector这个选择器的元素

$("div:has(p)").addClass("test");            //给所有包含 p 元素的 div 元素添加一个 text 类

 

  :parent

  匹配含有子元素或者文本的元素

$("td:parent")        //查找所有含有子元素或者文本的 td 元素

 

 6)子元素过滤器

  :nth-child( ) 

  匹配其父元素下的第N个子元素

$("ul li:nth-child(2)")            //在每个 ul 查找第 2 个li

 

  :first-child 

  获取匹配的第一个元素

$('li').first()                //获取第一个li

 

  :last-child  

  匹配最后一个子元素

$("ul li:last-child")        //    在每个 ul 中查找最后一个 li

 

  :only-child

  如果某个元素是父元素中唯一的子元素,那将会被匹配(如果父元素中含有其他元素,那将不会被匹配)

$("ul li:only-child")                    //在 ul 中查找是唯一子元素的 li

 

 7)属性选择器

   [attribute]

  匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可

$("div[id]")        //查找所有含有 id 属性的 div 元素

 

  [attribute=value]

  匹配给定的属性是某个特定值的元素

$("input[name='newsletter']").attr("checked", true);        //查找所有 name 属性是 newsletter 的 input 元素

 

  [attribute!=value]

  匹配所有不含有指定的属性,或者属性不等于特定值的元素。

$("input[name!='newsletter']").attr("checked", true);         //查找所有 name 属性不是 newsletter 的 input 元素

 

  [attribute^=value]

  匹配给定的属性是以某些值开始的元素

$("input[name^='news']")            //查找所有 name 以 'news' 开始的 input 元素

 

  [attribute$=value] 

  匹配给定的属性是以某些值结尾的元素

$("input[name$='letter']")            //查找所有 name 以 'letter' 结尾的 input 元素

 

 

  [attribute*=value]

 

  匹配给定的属性是以包含某些值的元素

$("input[name*='man']")            //查找所有 name 包含 'man' 的 input 元素

//比如 <input name="man-news" />, <input name="milkman" />, <input name="letterman2" />都可以匹配到

 

  [selector1][selector2][selectorN]

  复合属性选择器,需要同时满足多个条件时使用

$("input[id][name$='man']")            //找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

 

参考: https://www.cnblogs.com/1234wu/p/10176131.html

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!