2021-11-16

2023-12-28 17:44:16

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

JQuery选择器

一.基础选择器

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <div id="box">id选择器</div>
    <script>
        /* id选择器 */
        $('#box').css('font-size','40px');
        $('#box').css({color:'red',background:'green',padding:'10px'})
    </script>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <h1 class="a">类选择器</h1>

    <script>
        /* 类选择器 */
        $('.a').css('font-size','40px');
        $('.a').css({color:'red',background:'green',padding:'10px'})
    </script>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <h1 class="a">标签选择器</h1>

    <script>
        /* 类选择器 */
      $('h1').css('color','red');
    </script>
</body>
</html>

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
	<div id="box">id选择器</div>
    <h1 class="a">并集选择器</h1>
	<h1 class="a">标签选择器</h1>
    <script>
        /* 类选择器 */
     $('#box,.a,h1').css('color','green');
    </script>
</body>
</html>

全局选择器

	$('*').css('background','red');

二. 层级选择器

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b" style="display: none;">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
 <script>
        /* 后代选择器 */
        /* 选取ul元素里的所有li（后代）元素 */
        $('ul li').css({background:'skyblue',color:'#fff'})
    </script>
</body>
</html>

子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b" style="display: none;">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
 <script>
       /* 选取parent元素下的child（子）元素 */
     $('ul>li').css({border:'1px solid red',padding:'10px'})
    </script>
</body>
</html>

相邻元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
    <script>
        /* 相邻元素选择器 */
        /* 选取紧邻prev元素之后的next元素(不是一群 是一个) */
        $('.a+li').css('background','red');
    </script>
</body>
</html>

同辈元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./jquery-1.12.4.js"></script>
    </head>

    <body>
        <ul>
            <li>我是同学1
                <ol>
                    <li>我是同学1的儿子1</li>
                    <li>我是同学1的儿子2</li>
                    <li>我是同学1的儿子3</li>
                </ol>
            </li>
            <li class="a">我是同学2</li>
            <li class="b">我是同学3</li>
            <li>我是同学4</li>
            <li>我是同学5</li>
        </ul>
        <script>
          /* 同辈元素选择器 */
        /* 选取prev元素之后的所有siblings元素(不是一个 是一群) */
        $('.a~li').css('background','red');
        </script>
    </body>
    </html>

三.过滤选择器

 <style>
        .redClass{
            color:red;
        }
</style>
<body>
   <ul>
        <li>我是新入职的高级程序员0
            <h1>1</h1>
            <h2>2</h2>
            <h3>3</h3>
            <h4>4</h4>
            <h5>5</h5>
            <h6>6</h6>
        </li>
        <li>我是新入职的高级程序员1</li>
        <li class="a">我是新入职的高级程序员2</li>
        <li>我是新入职的高级程序员3</li>
        <li>我是新入职的高级程序员4</li>
    </ul>
 </body>

 <script>
        /* 选取第一个元素 */
        $('ul li:first').addClass('bg');

        /* 选取最后一个元素 */
        $('ul li:last').addClass('bg');

        /* 选取去除所有与给定选择器匹配的元素 */
        $('ul li:not(.a)').addClass('bg');
        
        /* 选取索引是偶数的所有元素（index从0开始） */
        $('ul li:even').addClass('bg');

        /* 选取索引是奇数的所有元素（index从0开始） */
        $('ul li:odd').addClass('bg');

        /* 选取索引等于index的元素（index从0开始） */
        $('ul li:eq(1)').addClass('bg');

        /* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
        $('ul li:gt(1)').addClass('bg');

        /* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
        $('ul li:lt(3)').addClass('bg');

        /* 选取所有标题元素，如h1~h6 */
        $('ul li :header').addClass('bg')
    </script>

四.属性选择器

<style>
    .redClass{
         color:red;
     }
</style>
<body>
 <ul>
        <li class="a">我是程序员1</li>
        <li data-name="zhangsan">我是程序员2</li>
        <li class="b">我是程序员3</li>
        <li class="c">我是程序员4</li>
        <li data-name="lisi">我是程序员5</li>
    </ul>
    <a href="http://www.baidu.cn">百度</a>
    <a href="www.baidu.com">百度一下</a>
 </body>

 <script>
        /* 属性选择器可以根据是否包含某属性来选取元素 */
        $('ul li[data-name]').css('background','red');

        /* 根据属性的值来选取元素 */
        $('ul li[data-name=lisi]').css('background','red');

        /* 不等于属性是某个特定值的元素 */
        $('ul li[data-name!=lisi]').css('background','red');

        /* 以指定值开头的元素 */
        $('a[href^=http]').css('color','red');
        $('a[href^="http"]').css('color','red');

        /* 以指定值结尾的元素 */
        $('a[href$=".com"]').css('color','red');

        /* 包含指定值的元素 */
        /* *通配符 */
        $('a[href*="baidu"]').css('color','red');
        
        /* 添加样式类的 */
        $('a[href*="baidu"]').addClass('redClass')
    </script>
上一篇：在UE4中播放视频（转载）


下一篇：UE4 网络联机