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. jQuery的环境配置

    目前最新的版本,是 1.10.1 和 2.0.2,如果你需要引用到你线上的项目,就必须使用压缩版,去掉了注释和空白,是容量最小. 从CDN中载入JQuery,如Google中载入JQuery: htt ...

  2. JQuery Datatables Dom 和 Language 参数详细说明

    http://linleizi.iteye.com/blog/2086435 *********************************** Data Tables: http://datat ...

  3. Head First 设计模式 --9 迭代器模式 组合模式

    迭代器模式:提供一种方法书序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 用到的设计原则:1.封装变化2.多用组合,少用继承|3.针对接口编程,不针对实现编程4.松耦合5.对扩展开放,对修改 ...

  4. 转帖-[教程] Win7精简教程(简易中度)2016年8月-0day

    [教程] Win7精简教程(简易中度)2016年8月 0day 发表于 2016-8-19 16:08:41  https://www.itsk.com/thread-370260-1-1.html ...

  5. 经典SQL语句大全以及50个常用的sql语句

    经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...

  6. oracle修改序列

      Oracle 序列(Sequence)主要用于生成流水号,在应用中经常会用到,特别是作为ID值,拿来做表主键使用较多. 但是,有时需要修改序列初始值(START WITH)时,有同仁使用这个语句来 ...

  7. linux 安装 ftp

    1 安装 vsftpd 查看是否已经安装 vsftpd rpm -qa | grep vsftpd 如果没有 则安装  安装命令如下 yum -y install vsftpd 设置开机启动 chkc ...

  8. POJ 3694 tarjan 桥+lca

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7298   Accepted: 2651 Descripti ...

  9. BestCoder Round #40

    T1:Tom and pape (hdu 5224) 题目大意: 给出一个矩形面积N,求周长的最小值.(长&&宽&&面积都是正整数) N<=109 题解: 没啥好 ...

  10. Java语言概述

    1.1 基础知识 ·第一代语言 打孔机--纯机器语言 ·第二代语言 汇编 ·第三代语言 C.Pascal.Fortran面向过程的语言 C++面向过程/面向对象 Java跨平台的纯面向对象的语言 .N ...