这里接着上一个Item1 把jQuery的选择器讲完。主要有：属性过滤器和子元素过滤器

点击”名称”会跳转到此方法的jQuery官方说明文档.

5. 属性过滤器 Attribute Filters

名称 说明 举例
[attribute] 匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素:

$(“div[id]”)
[attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素:

$(“input[name=’newsletter’]”).attr(“checked”, true);
[attribute!=value] 匹配给定的属性是不包含某个特定值的元素 查找所有 name 属性不是 newsletter 的 input 元素:

$(“input[name!=’newsletter’]”).attr(“checked”, true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $(“input[name^=’news’]”)
[attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有 name 以 ‘letter’ 结尾的 input 元素:

$ (“input[name =’letter’]”)
[attribute*=value]

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

查找所有 name 包含 ‘man’ 的 input 元素:

$ (“input[name * =’man’]”)
[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:

$ (“input[id][name =’man’]”)		 
<input  type=”text”  name=”username”  value=”zhangsan” />
  • $ (“[name]”) —— 找到有name属性的元素
  • $(“[value=tom]”) —— 找到有value属性的元素，并且value的值等于tom
  • $(“[value^=to]”) —— 找到有value属性的元素，并且value的值是以to开始
  • $(“[value$=ab]”) —— 找到有value属性的元素，并且value的值是以ab结尾
  • $(“[value*=ab]”) —— 找到有value属性的元素，并且value的值里边包含ab信息

  • $(“[value!=ab]”)

    ①找到有value属性的元素，并且value的值不等于ab

    ②或者是没有value属性元素

<input value=”123”><input  value=”ab”>
  • $([name][class=^a][value!=123] ) —— 符合选择器,多个条件同时满足(并且，交集)
<script>

    function f1(){

        //$("[class]").css('color','red');//有class属性

        //$("[id=hello]").css("color","blue");//id=hello的元素

        //$("[class^=app]").css("color",'blue');//class内容以app开始

        //$("[class$=e]").css("color","red"); //class内容以e结尾

        //$("[class*=p]").css("color","red"); //class内容包含p

        //class内容不为app123 或 没有class属性的

        //$("[class!=app123]").css("color","blue");

        //有id属性和class属性并且class不等于app123

        //$("[id][class!=app123][class]").css("color",'blue');

        //获得input元素，并且有class属性，内容以app开始

        $("[class=app123]input").css("color",'blue');

        //$("input:eq(2)").css("color",'blue');

    }

</script>

<body>

    <div class="apple">apple</div>

    <div class="app123">banana</div>

    <input type="text" value="tom" id="hello" class="peare"><br />

    <input type="text" value="jack" class="app123"><br />

    <input type="text" value="linken" class="apple"><br />

    <input type="button" value="触发" onclick="f1()">

    <p>I am bread</p>

</body>

6. 子元素过滤器 Child Filters

名称 说明 举例
:nth-child(index/even/odd/equation)

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

‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth-child(3n+2)

 在每个 ul 查找第 2 个li:

$(“ul li:nth-child(2)”)
:first-child

匹配第一个子元素

‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 在每个 ul 中查找第一个 li:

$(“ul li:first-child”)
:last-child

匹配最后一个子元素

‘:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 在每个 ul 中查找最后一个 li:

$(“ul li:last-child”)
:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

 在 ul 中查找是唯一子元素的 li:

$(“ul li:only-child”)

1 :nth-child(index/even/odd)

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

‘:eq(index)’ 只匹配一个元素，

而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！

2 :first-child

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

3 :last-child

匹配其父元素下的最后一个子元素

4 :only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

容易与“简单过滤选择器”混淆

:first :eq() :last

<script>

    function f1(){

        //把全部的li汇合到一起找到第一个

        $("li:first").css("color","red");  //一个结果

        //first-child匹配其父元素下的第一个子元素

        $("li:first-child").css("color","blue"); //两个结果

        $("li:last-child").css("color","red");//两个结果

        $("li:nth-child(2)").css("background-color","lightblue"); //两个结果

        $("li:nth-child(even)").css("background-color","lightblue");

        $("li:nth-child(odd)").css("background-color","lightblue");

        //找到其父元素只有一个子元素的元素

        $("li:only-child").css('color','red');

    }

</script>

<body>

    <ul>

        <li>四</li>

        <li>大</li>

        <li>家</li>

        <li>族</li>

    </ul>

    <ul>

        <li>乔</li>

        <li>家</li>

        <li>大</li>

        <li>院</li>

    </ul>

    <ul>

        <li>老大</li>

    </ul>

    <input type="button" value="触发" onclick="f1()">

</body>

子元素选择器 和 简单过滤选择器使用 区别：

  1. 简单过滤选择器使用

    • a) 把全部元素放到一起统一使用
    • b) 下标从0开始计算

2.子元素选择器

  • a) 每个元素的父元素看成独立的单位进行运算
  • b) 下标从1开始计算

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

jQuery学习之旅 Item2 选择器【二】的更多相关文章

  1. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

  2. jquery学习笔记(一)：选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  3. jQuery学习之旅 Item4 细说DOM操作

    jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...

  4. jquery学习（2）--选择器

    jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器    css 写 法: #box{ color:#f00;}    //id选择器    jquery获取:$('#box').css( ...

  5. jQuery学习之旅 Item7 区别this和$(this)

    刚开始以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $ ...

  6. jquery学习之旅

    在jQuery中,css()方法的功能是设置或获取元素的某项样式属性. $<"div">.css("font-weight","bold& ...

  7. jquery1.9学习笔记 之层级选择器(二)

    子孙选择器(“祖先 子孙”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: 用蓝色虚线边框标记所有表单子孙元素的输入.表单里的输入框用黄色背景. <!doctype html>< ...

  8. jQuery学习之旅 Item10 ajax快餐

    1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  9. jQuery学习之旅 Item8 DOM事件操作

    1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...

随机推荐

  1. 内核调试神器SystemTap — 更多功能与原理（三）

    a linux trace/probe tool. 官网:https://sourceware.org/systemtap/ 用户空间 SystemTap探测用户空间程序需要utrace的支持,3.5 ...

  2. 【Android 应用开发】Android 开发错误集锦

    1. eclipse的Device中不显示手机 在eclipse中连接不上手机,出现adb server didn't ACK  fail to start daemon 错误. 出现这种原因是因为a ...

  3. bash下如何使用bind[En]

    You can determine the character sequence emitted by a key by pressing Ctrl-v at the command line, th ...

  4. web报表工具FineReport的JS编辑框和URL地址栏语法简介

    JS编辑框: 1.FineReport的js. 作为一款BS产品,browser端的JavaScript是必不可少的. FineReport中的js是已经调用了finereport.js的. 大家知道 ...

  5. 【Android 应用开发】Android游戏音效实现

    1. 游戏音效SoundPool 游戏中会根据不同的动作 , 产生各种音效 , 这些音效的特点是短暂(叫声,爆炸声可能持续不到一秒) , 重复(一个文件不断重复播放) , 并且同时播放(比如打怪时怪的 ...

  6. 基于Bresenham和DDA算法画线段

    直线:y=kx+b 为了将他在显示屏上显示出来,我们需要为相应的点赋值,那么考虑到计算机的乘法执行效率,我们肯定不会选择用Y=kx+b这个表达式求值,然后进行画线段. 我们应当是将它转化为加法运算. ...

  7. 面试之路（16）-归并排序详解（MergeSort）递归和非递归实现

    归并排序的概念及定义 归并排序(Merge)是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的.然后再把有序子序列合并为整体有序序列. 归并排序是建立 ...

  8. How to configure ODBC DSN in Client to access remote DB2 for Windows

      How to configure ODBC DSN in Client to access remote DB2 for Windows MA Gen feng (Guangdong Unito ...

  9. WebLogic域配置策略

    WebLogic域配置策略--手动和模板选项,第一部分 域含有BEA WebLogic Server实例的配置信息.它包含有关服务器.集群和机器的配置信息.域还含有关于资源,例如Java数据库连接(J ...

  10. 你必须知道的261个Java语言问题

    1. Java语言的运行机制: Java既不是编译型语言也不是解释型语言,它是编译型和解释型语言的结合体.首先采用通用的java编译器将Java源程序编译成为与平台无关的字节码文件(class文件), ...