1、:first过滤选择器

　　本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。

　　在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？

　　在下面的示例代码中你可能注意到我们会使用

 　　$(“li:first”)

　　注意：书写时以“：”号开头。

　　

　　运行结果：

　　

　　使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.

　　:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。

　　（first和:last功能相近）

2、:eq(index)过滤选择器

　　如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用

　　:eq(index)

　　其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。例如：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，通过调用$("li:eq(3)")过滤选择器代码，获取了第4个<li>元素，并使用css()方法设置了该元素在页面中显示的文字样式。

3、:contains(text)过滤选择器

　　与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

　　例如:

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，调用li:contains('土豪')代码，可以很方便地获取<li>中包含‘土豪’字符内容的全部元素，并且只要与选择的元素中或子元素中包含该字符内容，就可以被选中。

　　注意：li:contains('土豪') 土豪为什么必须加单引号呢？因为它是一个字符串，而不是一个变量，所以不加单或双引号的话是会报错的。

4、:has(selector)过滤选择器

　　除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

　　例如：获取指定包含某个元素名的全部<li>元素，并改变它们显示文字的颜色，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　可以看出，通过使用$("li:has('p')")选择器代码，获取了包含<p>元素的全部<li>元素，并通过css方法改变了这些元素在页面中显示的文字样式。

5、:hidden过滤选择器

　　:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

　　例如，调用:hidden选择器获取不可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，先调用$("p:hidden")代码获取隐藏的<p>元素，并调用该元素的html()方法获取该元素中的内容，最后将该内容显示在<div>元素中。

6、:visible过滤选择器

　　与:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

　　例如，使用:visible选择器获取可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，调用$("p:visible")选择器代码，获取那个可见的<p>元素，并调用html()方法获取该元素的内容，最后将该内容显示在<div>元素中。

7、[attribute=value]属性选择器

　　属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

　　例如，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色，如图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，使用$("li[title='我最爱']")属性选择器代码，获取了2个<li>元素，并调用css()方法设置它们在页面中显示的文字颜色，另外，属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。

8、[attribute!=value]属性选择器

　　与之前介绍的[attribute=value]属性选择器正好相反，[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

　　例如，使用[attribute!=value]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部<li>元素，并设置它们显示的文字颜色，如图所示：

　　

　　在浏览器中显示的效果：

　　

　　可以看出，使用$("li[title!='我最爱']")属性选择器代码，获取了3个<li>元素，其中一个是不包含title属性名，另外两个的title属性值不等于“我最爱”，获取元素后并调用css()方法设置这些元素在页面中显示的文字颜色。

9、[attribute*=value]属性选择器

　　介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。

　　例如，使用[attribute*=value]属性选择器，获取属性值中包含某一指定内容的全部<li>元素，并设置它们显示的文字颜色，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，使用$("li[title*='最']")属性选择器代码，获取了3个<li>元素，这些元素的title属性值中都包含了“最”字符，获取这些元素后并调用css()方法设置这些元素在页面中显示的文字颜色。

10、:first-child子元素过滤选择器

　　通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

　　如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用

　　: first-child

　　

　　在浏览器中显示的效果：

　　

　　通过$("li:first-child")选择器代码，获取了两个<ul>父元素中的第一个<li>元素，并使用css()方法修改了它们在页面中显示的文字颜色。

11、:last-child子元素过滤选择器

　　与:first-child子元素过滤选择器功能相反，:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

　　例如，使用:last-child子元素过滤选择器，修改“蔬菜”和“水果”中最后一个显示的文字颜色，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，通过$("li:last-child")选择器代码，获取了两个<ul>父元素中的最后一个<li>元素，并使用css()方法修改了它们在页面中显示的文字颜色。

练习：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    <title>挑战题</title>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

    </ul>

    <a href="javascript:;">更多</a>

    <script>

    $(function() {

        $("li:eq(5)").css("display", "none");

        $("li:eq(6)").css("display", "none");

        $("a").click(function() {

            if ($("a").text() === "更多") {

                $("a").text("简化");

                $("li:eq(5)").css("display", "block");

                $("li:eq(6)").css("display", "block");

            } else {

                $("a").text("更多");

                $("li:eq(5)").css("display", "none");

                $("li:eq(6)").css("display", "none");

            }

        });

    })

    </script>

</body>

</html>

三、jQuery--jQuery基础--jQuery基础课程--第3章 jQuery过滤性选择器的更多相关文章

  1. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器

    1.#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id") 其中#my_id ...

  5. 三、jQuery--jQuery基础--jQuery基础课程--第11章 jQuery 工具类函数

    1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browse ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件

    1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...

  7. 三、jQuery--jQuery基础--jQuery基础课程--第8章 jQuery 实现Ajax应用

    1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback]) ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第6章 jQuery 事件与应用

    1.页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行 ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

随机推荐

  1. Java 7 Concurrency Cookbook 翻译 第一章 线程管理之一

    一.简介 在计算机的世界里,当我们谈论并发时,我们指的是一系列的任务同时运行于一个计算机中.这里说的同时运行,在计算机拥有多于一个处理器或者是一个多核处理器的时候才是真正的同时,在计算机只拥有单核处理 ...

  2. HDU 4930 Fighting the Landlords（模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4930 解题报告:斗地主,加了一个四张可以带两张不一样的牌,也可以带一对,判断打出一手牌之后,如果对手没 ...

  3. 笔记（一）：ES6所改良的javascript“缺陷”

    ES6笔记(一):ES6所改良的javascript“缺陷”   块级作用域 ES5没有块级作用域,只有全局作用域和函数作用域,由于这一点,变量的作用域甚广,所以一进入函数就要马上将它创建出来.这就造 ...

  4. 水面shader 线性擦除

    // Upgrade NOTE: replaced 'PositionFog()' with multiply of UNITY_MATRIX_MVP by position // Upgrade N ...

  5. leetcode 215. Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  6. jQuery源码笔记(一)：jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  7. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  8. 微博转发关系采集，可拓展关键字采集，评论采集（Java版）

    微博模拟登录获取cookis,配置采集深度,采集一条微博转发关系页面,同时解析页面,生成一条微博的传播图,数据集可做微博影响力分析和传播分析 gitthub:https://github.com/ch ...

  9. django 技巧锦集

    1. 如何将model对象转化成一个dict,这在restful api的设计上会有用. 答案:使用django.forms.models的model_to_dict方法,demo如下: from d ...

  10. idea java 正则表达式匹配替换

    原文匹配中文 excelMap.get\((\"[\u4E00-\u9F15]+\")\) 目标 excelMap.get\($1.hashCode\(\)\)