HTML示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--HTML区域-->

    <h1>第一个标题</h1>

    <div class="nav-2014">

        <div class="w">

            <div class="w-spacer"></div>

            <div class="categorys">

                <div class="dt">家用电器分类</div>

            </div>

            <span class="hr"></span>

            <div class="navitems-2014">

                <div id="treasure"></div>

                <span class="clr"></span>

                <span class="chr"></span>

                男：<input type="checkbox" checked="checked" value="nan">

                女:<input type="checkbox" value="nv">

            </div>

        </div>

    </div>

    <h2>第二个标题</h2>

    <div id="electronic">

        <div id="firstScreen">1

            <div class="w">2</div>

        </div>

        <ul>

            <div class="u_c" lang="en-us"></div>

            <li class="ui-switch-curr"></li>

            <li class="ui-switch-item"></li>

            <li class="ui-switch-next"></li>

            <li class="ui-switch-sub"></li>

        </ul>

        <div class="secord_screen"></div>

        <div class="third_screen"></div>

    </div>

</body>

</html>

　　伪类选择器：即以:开头的

　　:first  获取第一个元素

　　:not(selector) 去除所有选定的元素

　　:even 匹配索引为偶数的元素

　　:odd 匹配索引为奇数的元素

　　:eq(index) 匹配给定的索引

　　:gt(index) 大于指定的索引

　　:lt(index) 小于指定的索引

　　:last 匹配获取的最后一个元素

　　:header 匹配所有标题元素

　　示例：

    <!--jquery区域-->

    <script src="jquery-3.1.0.js"></script>

    <script>

//        获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div

        $("#electronic > div:first")

//        获取所有li元素中最后一个元素

        $("li:last")

//        获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv">

        $("input:not(:checked)")

//        获取所有li元素中索引为0,2,4...的元素

        $("li:even")

//        获取所有li元素中索引为1,3,5...的元素

        $("li:odd")

//        获取所有li元素中索引为1的元素

        $("li:eq(1)")

//        获取所有li元素中索引大于1的元素

        $("li:gt(1)")

//        获取所有li元素中索引小于1的元素

        $("li:lt(1)")

//        给所有标题加上背景色

        $(":header").css("background","red")

        console.log(cls)

    </script>

　　

jquery选择器之基本筛选器的更多相关文章

  1. jQuery选择器之基本筛选选择器

    <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...

  2. jquery选择器之基本筛选选择

    1.基本选择器 2.内容筛选选择器 3.可见性筛选选择器 4.属性筛选选择器 5.子元素筛选选择器 6.表单元素选择器 7.表单对象属性筛选器

  3. jQuery选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  4. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  5. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  7. jQuery选择器之全面总结

    选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器.如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. jQuery中的选择器完全继承了 ...

  8. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. Spring Boot工程发布到Docker

    先聊聊闲话 搞过企业级的application运维的同仁肯定深有感触,每个application的功能交叉错杂,数据交换就让人焦头烂额(当然这和顶层业务设计有关系), 几十个application发布 ...

  2. ubuntu忘记密码怎么办

    刚安装了,ubuntu14.04,就想着,如果忘记登录密码,这可不好办,所以测试下开机,刚过bios显示画面,不停的点击,,键盘左边的shift键.(因为刚开始是采用按着不放的办法,结果不灵.所以我不 ...

  3. PCA理论与实践

    PCA作用: 降维,PCA试图在力保数据信息丢失最少的原则下,用较少的综合变量代替原本较多的变量,而且综合变量间互不相关,减少冗余以及尽量消除噪声.   PCA数学原理: 设 是维向量 想经过线性变换 ...

  4. zoj 1203 Swordfish prim算法

    #include "stdio.h". #include <iostream> #include<math.h> using namespace std; ...

  5. Copy List with Random Pointer [LeetCode]

    A linked list is given such that each node contains an additional random pointer which could point t ...

  6. Centos7 下配置mysql5.6主从复制实例（一主两从）

    标签:mysql 数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://8941355.blog.51cto.com/89313 ...

  7. 模拟系列（一）——数字电路

    要求 简要模拟数字电路的运行过程,及电位(简化为L和H),用C# WinForm实现. 思路 逻辑部分 电路是一种图结构,基于C#的特性,设计Node类(结点)和Wire类(连线),且为泛型. 由于电 ...

  8. ES6 基础版迭代器

    ES6中引入了generator function* get() { var result1 = yield c; var result2 = yield b; var result3 = yield ...

  9. HttpContext.Cache 详解

    提到HttpContext.Cache必然会想到Application,他们有什么共性和不同点呢,我们一一道来 相同点: 1.两者都是使用键值对来存储对象 2.两者都是应用程序同生命周期(在cache ...

  10. day11 堡垒机

    项目实战:运维堡垒机开发 前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒 ...