jQuery并且选择器的使用及案例

并且选择器有六种用法,分别是

一、:first 第一个  :last 最后一个
二、eq(下标索引号码) 用于找到俱体哪一个
三、gt(索引号) 索引值 大于 某个范围    lt(索引号) 索引值 小于 某个范围
四、:even 匹配到下标索引值为偶数的节点  :odd  匹配到下标索引值为奇数的节点
五、:not(selector选择器)去除某个节点
六、:header  用于匹配h1~h6

超详细注释在源码中,请看源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        function f1() {

            /**
             * 并且选择器有六种用法,分别是
             * 一、:first 第一个  :last 最后一个
             * 二、eq(下标索引号码) 用于找到俱体哪一个
             * 三、gt(索引号) 索引值 大于 某个范围    lt(索引号) 索引值 小于 某个范围
             * 四、:even 匹配到下标索引值为偶数的节点  :odd  匹配到下标索引值为奇数的节点
             * 五、:not(selector选择器)去除某个节点
             * 六、:header  用于匹配h1~h6
             */

            /**
             * 并且选择器可单独使用
             * 各种选择器都可以构造 "并且"  关系
             * 并且关系的选择器可以使用多个
             * 并且关系的多个选择器,没有前后顺序的关系,请看例六中的注释
             */



            //一、:first 第一个
            //   :last 最后一个
            $('ul li:first').css('color','blue');
            $('ul li:last').css('color','green');

            //二、eq(下标索引号码) 用于找到俱体哪一个    获得节点的下标索引值 与 给定索引值相等
            //下标是从0开始的
            $('ul li:eq(3)').css('color','red');

            //三、gt(索引号) 索引值 大于 某个范围
            //lt(索引号) 索引值 小于 某个范围
            //上面的只是大于或小于,并不带等于
            $('ul li:gt(4)').css('background','pink');
            $('ul li:lt(3)').css('background','orange');

            //四、:even 匹配到下标索引值为偶数的节点
            //   :odd  匹配到下标索引值为奇数的节点
            $('div li:even').css('background','lightblue');

            //五、:not(selector选择器)去除某个节点
            //下面的意思是指除ID为yun的外,其它的全部设置为蓝颜色
            $('div li:not(#yun)').css('color','blue');

            //六、:header  用于匹配h1~h6
            $(':header').css('background','orange');

            //以下为实用示例
            //获得 “标题标签元素”,并且有“class=pear"属性值的
            //如果是id=pear,那么语法是$(':header#pear')  所以:header.pear中的点并不是连接符而是使用class时的样式符

            //因为没有前后顺序关系,所以下面的可以变成$('.pear:header').css('color','#fff');
            $(':header.pear').css('color','#fff');

            //获得table li 中的张飞 赵云 孙权
            $('nav li:gt(1):lt(5)').css('color','blue');
        }
    </script>
</head>
<body>
<h2>并且选择器</h2>
<ul>
    <li>刘备</li>
    <li>张飞</li>
    <li>赵云</li>

    <li>孙权</li>
    <li>周瑜</li>
    <li>黄盖</li>
    <li>大乔</li>
</ul>
<h2 class="pear">DIV为外框架</h2>
<div>
    <li>刘备</li>
    <li>张飞</li>
    <li id="yun">赵云</li>

    <li>孙权</li>
    <li>周瑜</li>
    <li>黄盖</li>
    <li>大乔</li>
</div>
<h2>nav为外框架</h2>
<nav>
    <li>刘备</li>
    <li>张飞</li>
    <li>赵云</li>

    <li>孙权</li>
    <li>周瑜</li>
    <li>黄盖</li>
    <li>大乔</li>
</nav>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND