jQuery中的基本选择器「简单记住」

发布时间:2024-12-19 点击:24
本教程操作环境:windows7系统、jquery1.10.0版本。
1.基本选择器
#id$("#test").css("background","#bbffaa")//选取id为test的元素element$("p");//选取所有的<p>元素*$("*");//选取所有元素.class$(".test");//选取类名为test的元素selector1,selector2$("div,p.myclass,span");//组合选择2.层次选择器
$("divspan")//选取<div>里所有<span>元素(所有后代元素)$("div>span")//选取<div>元素下元素名为<span>的子元素(只限于子元素)$(".one+div")//选取class为one的下一个<div>同辈元素等价于$(".one").next("div")$("#two~div")//选取id为two的元素后面的所有<div>同辈元素等价于$("#two").nextall("div")3.过滤选择器(以“:”开头)
1.基本过滤
:first选取个元素:$("div:first")选区所有<div>元素中个<div>元素:last选取最后一个元素$("div:last"):not(selector)去除所有给定选择器匹配的元素$("input:not(.myclass)")选取class不是myclass的<input>元素:even选取索引数是偶数的元素索引从0开始$("div:even"):odd选取索引数是奇数的元素索引从0开始$("div:odd"):eq(index)选取索引数等于index的元素$("div:eq(2)"):gt(index)选取索引数大于index的元素$("div:gt(2)"):lt(index)选取索引数小于index的元素$("div:lt(2)"):header选取所有标题元素<h1>..<h6>$(":header"):animated选取所有当前正在执行动画的的所有元素$("div:animated")选取正在执行动画的<div>元素:focus选取当前获得焦点的元素$(":focus")2.内容过滤
:contains(text)选取含有文本内容为text的元素$("div:contains('我')")选取含有文本"我"的<div>元素:empty选取不包含子元素或者文本的空元素$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素:has(selector)选取含有选择器所匹配的元素的元素$("div:has(p)")选取含有<p>元素的<div>元素:parent选取还有子元素或文本的元素$("div:parent")选取拥有子元素(包括文本元素)的<div>元素3.可见性过滤
:hidden选取所有不可见元素$(:hidden)选取所有不可见元素包括<inputtype="hidden"><divstyle="display:none">和<divstyle="visibility:hidden">等如果只想选取<input>元素,可以使用$("input:hidden"):visible选取所有可见元素$(div:visible)选取所有可见的<div>元素例如 显示隐藏的<div>元素$(div:hidden).show(3000)
4.属性过滤(jquery中的单引号和双引号没有区别,如果一个字符串,外面用单引号里面的双引号就字符串了,反之,如果外面是双引号里面的单引号就是字体串,双引号不能组合双引号使用 ,单引号亦然,但是平时要尽量使用单引号)
[attribute]选取拥有此属性的元素$("div[id]")选取拥有属性id的元素[attribute=value]选取属性值为value的元素$("div[title=test]")选取属性title为“test”的<div>元素[attribute!=value]选取属性的值不等于value的元素$("div[title!=test]")[attribute^=value]选取属性的值以value开始的元素$("div[title^=te]")选取属性title的值以te开始的div元素[attribute$=value]选取属性的值以value结束的元素$("div[title$=est]")选取属性title的值以est结束的div元素[attribute*=value]选取属性的值含有value的元素$("div[title*=es]")选取属性title的值含有es的div元素[attribute|=value]选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素$('div[title|="en"]')[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素$('div[title~="uk"]')[attribute1][attribute2][attributen]用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围$("div[id][title$='test']")5.子元素过滤
:nth-child(index/evenn/odd/equation)选取每个父元素下得第index个子元素或者奇偶元素(index从1算起)解析::eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的:first-child选取每个父元素的个子元素集合元素解析::first只返回单个元素,而:first-child选择符将为每个父元素匹配个子元素。例如$("ulli:first-child");选取每个<ul>中个<li>元素:last-child选取每个父元素的最后一个子元素解析::last只返回单个元素,:last-child选择符将为每个父元素匹配最后一个子元素例如$("ulli:last-child");选择<ul>中最后一个<li>元素:only-child如果某个元素是他父元素中的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配$("ulli:only-child")在<ul>中选取是子元素的<li>元素6.表单对象属性过滤
:enabled选取所有可用元素$("#form1:enabled")选取id为form1的表单内所有可用元素:disabled选取所有不可用元素$("#form1:disabled"):checked选取所有被选中的元素(单选框,复选框)$("input:checked")选取所有被选中的<input>元素:selected选取所有被选中的选项元素(下拉列表)$("selectoption:selected")选取所有被选中的选项元素4.表单选择器
:input:text:password:radio:checkbox:submit:image:reset:button:file:hidden选择器的注意事项
\\为转义字符
$(".test:hidden")带空格表示选取class为test里的隐藏元素$(".test:hidden")不带空格表示选取隐藏的class为test的元素以上就是jquery常用选择器有哪些的详细内容,更多请关注html中文网其它相关文章!


手机网站建设及要注意的细节有哪些?
微信营销的特点
游戏预约页面网站的建设和开发有哪些基本步骤?
外链资源越来越少了怎么做外链?
如何与佛山建设网站公司沟通
人工智能测试中百度为误导公众道歉!
PHP中二维数组转为一维数组的2种方法
什么是边缘计算,为什么重要