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. ubuntu下添加/删除启动服务项

    在网上查了一下,命令如下 1.添加一个服务: $sudo update-rc.d ServiceName default 2.删除一个服务 $sudo update-rc.d ServiceName ...

  2. DES MAC PIN HEX

    /* void DesEncrypt( UCHAR * auchInput,UCHAR * auchKey,UCHAR * auchOutput=NULL); Function: DesEncrypt ...

  3. mysql索引的使用[下]

    接着上篇,我们继续来探究索引.这次我们主要来探究关于联合索引的使用和联合.多表查询的规范. 继续看一下数据: mysql> select * from student order by ID d ...

  4. Java Script

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  5. Android开发--FrameLayout的应用

    1.简介 frameLayout为框架布局,该布局的特点为层层覆盖,即最先放置的部件位于最下层,最后放置的部件位于最上层. 2.构建 如图所示,该视图中有五个TextView.其中,tv1放置在最底层 ...

  6. bzoj 2878: [Noi2012]迷失游乐园

    #include<iostream> #include<cstring> #include<cstdio> #define M 100005 #define ld ...

  7. HDU--1213--How Many Tables--并查集

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  8. Jquery之ShowLoading遮罩组件

    From:http://www.cnblogs.com/eczhou/archive/2012/12/18/2822788.html 一.遮罩用途及效果 ShowLoading这个jQuery插件设计 ...

  9. android-Okhttp初步使用

    自从谷歌把android的请求框架换成Okhttp后,android开发人员对其的讨论就变的越来越火热,所有咱作为一枚吊丝android程序员,也不能太落后,所以拿来自己研究一下,虽然目前项目开发用的 ...

  10. 5、Linux下面桌面的安装

    搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html 1.yum grouplist        (列出yum仓库里的软件组列表) .y ...