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. js中面向对象

    1.对象的表示方法,以下是对象的两种方法:第二种方法是使用函数构造器来创建一个对象. 2.对象的一种表达方式,这种方式更像Java中对象的创建,就是用一个new来创建一个对象实例.面向对象的封装.样式 ...

  2. Ubuntu 16.04 更新源

    1/ 在修改source.list前,最好先备份一份 执行备份命令 sudo cp /etc/apt/sources.list /etc/apt/sources.list.old 2/ 执行命令打开s ...

  3. C++ template的一些高级用法（元编码，可变参数，仿函数，using使用方法,. C++ 智能指针）

    1 .  通用函数可变参数模板 对于有些时候,我们无法确切的知道,函数的参数个数时,而又不想过多的使用所谓的函数重载,那么就可以效仿下面的例子: #include<iostream> #i ...

  4. Java之美[从菜鸟到高手演变]之设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  5. c#连接各种数据库

    1.C#连接连接Access程序代码: ------------------------------------------------------------------------------- ...

  6. 【代码】verilog之：电子钟

    功能:显示时分秒,能够设置时间. 实现:两个按键,一个进入设置,一个加数字.显示用LCD5110 用状态机实现,总共四种状态 idle(正常运行)——s_hour(时设置状态)——s_min(分设置状 ...

  7. STC12C5A60S2 常用的中断源和相关寄存器

    1) 中断源 STC12C5A60S2共有十个中断源,每个中断源可设置4类优先级:当相同优先级下各中断优先级由高到低依次如下: 1.1)INT0(外部中断0) 中断向量地址 0003H, C语言编程: ...

  8. String类实现

    String类是应用框架中不可或缺的类 重载运算符实现字符串的操作 #idndef IOTECK_STRING_H_#define IOTECK_STRING_H_namespace iotek{ c ...

  9. samba服务--路径太深问题-转

  10. jQueryMobile控件之ListView

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...