全选的选择器*
id选择器：$("#id的属性值")
类选择器：$(".class的属性值")
标签选择器：$("标签名")
并集选择器：$("选择器1，选择器2")
交集选择器
层级选择器
后代选择器：$("选择器1 选择器2")

子选择器：$("选择器1 > 选择器2")

属性选择器

属性名称选择器：$("选择器[属性名]")

属性选择器：

$("选择器[属性名='值']")

$("选择器[属性名!='值']")

$("选择器[属性名^='值']")

$("选择器[属性名$='值']")

$("选择器[属性名*='值']")

复合属性选择器：$("选择器[属性名='值'][]...")

过滤选择器

首元素选择器：${选择器：first}

尾元素选择器：${选择器：last}

非元素选择器：${选择器1：not(选择器2)}

偶数选择器：${选择器：even}

奇数选择器：${选择器：odd}

等于索引选择器：${选择器：eq(index)}

大于索引选择器：${选择器：gt(index)}

小于索引选择器：${选择器：lt(index)}

标题选择器：${：header}

表单过滤选择器

可用元素选择器：${:enabled}

不可用元素选择器：${:disabled}

选中选择器

单复选框：${:checked}

选择器一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.6.js"></script>
<script>
    $(document).ready(function () {
        $("*").css("background-color","while");
        $("*").css("color","red");
        /* *全选.选择器：*/
    });
   /* id选择器：$("#id的属性值")*/
    $(document).ready(function () {
        $("#we").click(function () {
            $("#we").css("color","pink");
            alert("单机以下变粉色")
        })
       /* 类选择器：$(".class的属性值")*/
        $(".rt").css("color","green")
        /*标签选择器：$("标签名")*/
        $("strong").css("font-size","10px");
        $("strong").css("background","cyan");
        /* 并集选择器：$("选择器1，选择器2")*/
        $("strong,a").css("color","brown");
        $("strong,a").css("font-size","30px");
    })
</script>
    <title> *全选.选择器： id选择器：$("#id的属性值") 类选择器：$(".class的属性值") 标签选择器：$("标签名") 并集选择器：$("选择器1，选择器2") 位置选择器</title>
</head>
<body>
<h8>
    全选的选择器*
    id选择器：$("#id的属性值")
    类选择器：$(".class的属性值")
    标签选择器：$("标签名")
    并集选择器：$("选择器1，选择器2")
    交集选择器
    层级选择器
    后代选择器：$("选择器1   选择器2")
    子选择器：$("选择器1 > 选择器2")
    属性选择器
    属性名称选择器：$("选择器[属性名]")
    属性选择器：
    $("选择器[属性名='值']")
    $("选择器[属性名!='值']")
    $("选择器[属性名^='值']")
    $("选择器[属性名$='值']")
    $("选择器[属性名*='值']")
    复合属性选择器：$("选择器[属性名='值'][]...")
    过滤选择器
    首元素选择器：${选择器：first}
    尾元素选择器：${选择器：last}
    非元素选择器：${选择器1：not(选择器2)}
    偶数选择器：${选择器：even}
    奇数选择器：${选择器：odd}
    等于索引选择器：${选择器：eq(index)}
    大于索引选择器：${选择器：gt(index)}
    小于索引选择器：${选择器：lt(index)}
    标题选择器：${：header}
    表单过滤选择器
    可用元素选择器：${:enabled}
    不可用元素选择器：${:disabled}
    选中选择器
    单复选框：${:checked}
    </h8><br>
<hr>
    <div  id="we">我是id选择器1</div>
    <div class="rt"> 类选择器：$(".class的属性值")</div>
    <strong>我是第三个选择器标签选择器<br>
    <a>并集选择器</a>
    </strong>
<hr>
<h6>位置选择器 ===第一个案例</h6>
<div class="div">
    <p>第一个：first</p>
    <p>偶数：even</p>
</div>
<div class="div">
    <p>奇数：odd</p>
</div>
<div class="div">
    <p>偶数：even</p>
</div>
<div class="div">
    <p>last个：first</p>
    <p>奇数：odd</p>
</div>
<h10 class="a">位置选择器2</h10>
<h10>第二个jquery</h10>
<div class="test"><p>索引值为0：lt(3)</p></div>
<div class="test"><p>索引值为1：lt(3)</p></div>
<div class="test"><p>索引值为2：eq(3)</p></div>
<div class="test"><p>索引值为3：eq(3)</p></div>
<div class="test"><p>索引值为4：gt(3)</p></div>
<a href="主窗口.html">返回主窗口</a>
<script type="text/javascript">
    $(".div:first").css("color","red");
</script>
<script type="text/javascript">
    $(".div:last").css("color","yellow");
    $(".div:last").css("font-size","20px");
</script>
<!--背景-->
<script type="text/javascript">
    $(".div:even").css("background","brown");
</script>
<script type="text/javascript">
    $(".div:odd").css("background","orange");
</script>
<!--第二个jquery文件的应用-->
<script type="text/javascript">
    $(".test:eq(2)").css("border","1px groove green");
</script>
<script type="text/javascript">
    $(".test:gt(3)").css("background","purple");
</script>
<script type="text/javascript">
    $(".test:lt(3)").css("background","gray");
</script>
</body>
</html>

选择器二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../com.day4/jquery-3.6.js"></script>
    <title>全选选择器 class选择器 层次选择器</title>
    <script>
        /*全选选择器*/
        $("*").css("font-size","10px");
        $("*").css("background-color","while");
        $(function () {
            $(a).css("background","yellow");
        })
    </script>
    <a href="主窗口.html">返回主窗口</a>
<body>
<div>
    <p class>我是div的一级元素onesong</p>
    <p class>我是div的一级元素twosong</p>
    <p class>我是div的一级元素treesong</p>
    <p class>我是div的一级元素foursong</p>
</div>
<div>
    <p>
        <b style="font-size: 11px" class="ert">我是div第二带选择器</b><br>
        <strong style="font-size: 20px" class="ert">我是div第二带选择器</strong><br>
        <strong class="ert">我是div第二带选择器class选择器</strong><br>
    </p>
    我是div第二带选择器
</div>
<div>
    <p><a href="#">层级选择器11</a></p>
    <p><a href="#">层级选择器12</a></p>
    <p><a href="#">层级选择器13</a></p>
    <p><a href="#">层级选择器14</a></p>
    <p><a href="#">层级选择器15</a></p>
</div>
<script>
    $(function () {
        $('div p').css("color","green");
        $('div>p').css("backgroundColor","brown");
/*class选择器*/
        $(".ert").css("color","yellow");
        $('div a').css("backgroundColor",'pink');
        $('p>a').css("backgroundColor","cysn");
        $('p>a').css("font-size","25px");
    })
</script>
</body>
</html>

交并选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../com.day4/jquery-3.6.js"></script>
    <title>并级选择器 交集选择器 </title>
</head>
<body>
<p>我是段落一0</p>
<p id="one">我是段落一class one1</p>
<p id="two">我是段落一class one2</p>
<p class="two">我是段落一class two3</p>
<p id="tree">我是段落一 class tree4</p>
<p id="four">我是段落一 class tree4</p>
<p id="five">我是段落five class tree5</p>
<p id="six">我是段落six class tree6</p>
<p>段落5</p>
<div>我是class为two的div</div>
<!--并集 选择器-->
<script>
    $(document).ready(function () {
        $('p,#one').css('backgroundColor','red');
        $('p,#tree').css('color','yellow');
        $('p').css('backgroundColor','green');
    });
</script>
<!-- 并集选项卡<script>
    $('p#one').css('color','red');
    $('p#two').css('color','green');
    $('p#tree').css('color','pink');
    $('p#four').css('color','red');
    $('p#five').css('color','green');
    $('p#six').css('color','pink');
    $('div').css('color','blue');
    $('p#one').css('backgroundColor','black');
    $('p#two').css('backgroundColor','yellow');
    $('p#tree').css('backgroundColor','red');
    $('p#four').css('backgroundColor','black');
    $('p#five').css('backgroundColor','yellow');
    $('p#six').css('backgroundColor','red');
</script>-->
<a href="主窗口.html">返回主窗口</a>
</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <script type="text/javascript" src="../com.jquery.shijie/com.jquery2/jquery-3.6.js"></script>
</head>
<body>
<ol id="af">
<li>li--1</li>
<li>li--2</li>
<li>li--3
    <ul>
        <li>li---01</li>
        <li>li---02</li>
        <li>li---1</li>
        <li>li---2</li>
        <li>li---3
            <ul>
                <li>li--e--0</li>
                <li>li--e--1</li>
                <li>li-e---2</li>
                <li>li-e---3</li>
                <li>li--e--4
                    <ul>
                        <li>li-----r1</li>
                        <li>li-----r2</li>
                        <li>li-----r3</li>
                        <li>li-----r4</li>
                        <li>li-----r5</li>
                        <li>li-----r6</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ol>
<br>
<h1 class="a">子代选择器</h1>
<!-- <script type="text/javascript">
    $("#testa li").css("border","2px solid green","padding 3px" );
</script>-->
<ul id="testa">
    <li>list--a</li>
    <li>list--b</li>
    <li>list--c</li>
    <li>list--d</li>
    <li>list--e
        <ul>
            <li>
            123456789
        </li>
            <li>
                a123456789
            </li>
        </ul>
    </li>
</ul>
<h1 class="a">选择器对象</h1>
<p class="c1">段落一</p>
<p class="c2" id="p2">
    <a href="A3.html">段落2.1</a>
</p>
<p class="c2">段落3</p>
<p>=类选择器</p>
<p class="c1">段落一</p>
<p class="c2" id="p3">
    <a href="A3.html">段落2.1</a>
    <a href="A3.html">段落2.2</a>
</p>
<p class="c2">段落3</p>
<p class="c2">段落4</p>
<!--选择器对象遍历-->
<ul id="ccc">
    <li>11111</li>
    <li>21111</li>
    <li>31111</li>
    <li>41111</li>
    <li>51111</li>
    <li>61111</li>
</ul>
<a href="主窗口.html">返回主窗口</a>
</body>
</html>
<!--位置选择器-->
<script type="text/javascript">
    $("#af li").css("border","1px solid brown");
    $("#af li").css("color","1px  solid red");
</script>
<script type="text/javascript">
    $("#testa li").css("border","2px solid green","padding 3px" );
</script>
<script type="text/javascript">
    $(".c1").each(function (index) {
        alert(this);
    } );
</script>
<script type="text/javascript">
   $(".c1").not("#p3").css("border","4px solid pink");
   $(".c1").add(".c3").css("border","4px solid green");
</script>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div{
            height: 200px;
            width: 300px;
            background: whitesmoke;
            padding: 20px;
            margin: 20px;
        }
        .ct{
            color: red;
            font-size: 60px;
        }
    </style>
    <title>属性选择器-----a--2</title>
    <script type="text/javascript" src="../com.jquery.shijie/com.jquery2/jquery-3.6.js"></script>
</head>
<body>
<h10 class="ct">属性选择器 函数 $(document).ready(function{})</h10>
<h11>【属性名】，【属性名=‘值’】 【属性名！=‘值’】</h11>
<div class="div" testattr="true" name="p1"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p2"> <a href="A2.html">[属性名! ='值']</a></div><br>
<div class="div" testattr="true" name="p3"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p4"> <a href="A2.html">没有name属性</a></div><br>
<div class="div" testattr="true" name="p5"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p6"> <a href="A2.html">[属性名! ='值']</a></div><br>
<div class="div" testattr="true" name="p7"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p8"> <a href="A2.html">没有name属性</a></div><br>
<div class="div" testattr="true" name="p9"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p10"> <a href="A2.html">[属性名! ='值']</a></div><br>
<div class="div" testattr="true" name="p11"> <a href="A2.html">[属性名='值']</a></div><br>
<div class="div" testattr="true" name="p12"> <a href="A2.html">没有name属性</a></div><br>
<a href="主窗口.html">返回主窗口</a>
</body>
</html>
<script  type="text/javascript">
    $("div[name='p1']").css("border","10px groove red");
</script>
<script  type="text/javascript">
    $("div[name='p2']").css("border","12px groove blue");
</script>
<script  type="text/javascript">
    $("div[name='p3']").css("border","13px groove black");
</script>
<script  type="text/javascript">
    $("div[name='p4']").css("border","14px groove yellow");
</script>
<script  type="text/javascript">
    $("div[name='p5']").css("border","15px groove orange");
</script>
<script  type="text/javascript">
    $("div[name='p6']").css("border","16px groove pink" );
</script>
<script  type="text/javascript">
    $("div[name='p7']").css("border","17px groove purple");
</script>
<script  type="text/javascript">
    $("div[name='p8']").css("border","10px groove yellow");
</script>
<script>
    $("div[name='p12']").css("border","20px groove gray");
</script>
<script  type="text/javascript">
    $("div[name='p9']").css("border","50px groove yellow");
</script>
<script  type="text/javascript">
    $("div[name='p10']").css("border","50px groove black");
</script>
<script  type="text/javascript">
    $("div[name='p11']").css("border","50px groove pink");
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        h1{
            height: 100px;
            weight: 400px;
            font-size: 60px;
            padding: 20px;
            border: dodgerblue  dashed;
            color: pink;
            background-color: deepskyblue;
            text-align: center;
        }
        .top{
            height: auto;
            width: 100%;
            margin-left: 0;
            background-color: #c3c3c3;
            position: fixed;
            top: 2px;
            margin-bottom: 6%;
        }
        .top.li{
            width: auto;
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 6%;
            padding: 0px;
        }
        .top li a{
            display: block;
            color: #e5eecc;
            text-align: center;
            font-size: 18px;
            padding: 4px;
            overflow: hidden;
            text-decoration: none;
        }
    </style>
    <title>主界面</title>
</head>
<body>
<h1>主界面运行窗口</h1>
<div class="top">
    <center>
        <ul>
           
            <li><a href="选择器1.html">选择器一</a></li>
            <li><a href="选择器二.html">选择器二</a></li>
            <li><a  href="并交选择器3.html">并集交集选择器</a></li>
            <li><a href="属性选择器.html">属性选择器</a></li>
            <li><a href="子集选择器.html">子集选择器</a></li>
        </ul>
    </center>
</div>
<img src="img/ty.gif" height="800px"  weight="1000px"><br>
</body>
<h3>
   <!-- 第一题
    jquer是JavaScript的一个库。
    用少量的语法去，实现html,dom,处理的事情，去执行动画和AJAx的操作。
    第二题
    写的少，做的多。语法结构$(document).ready(function){}
    第三题
    https//jquery.com/download
    第四题
    1首先建立文件项目为web
    2到官网去导入jquery的文件https//jquery.com/download
    复制jquery里的代码。
    3在自己web建立HTML，jsp,img文件。
    第五题
    语法结构$(document).ready(function){
    $("div").click(function){
    $(this).css("color","red")
    }
    第六题
    $(document).ready(function){}
    第7题
    javascript
    <script>
        window.onload=function () {
            var btOne = document.getElementById('btnone');
            btOne.onclick = function () {
                    for (var i = 0; i < divs.length; i++) {
                        divs[i].style.border = '4px solid pink'
                        divs[i].style.background='yellow';
                        divs[i].style.height='100px'
                        divs[i].style.weight='100px'
                    }
                }
                <body>
                <hr>
                <input type="button" id="btnone" value="设置边框" >
                </body>
            jquery
            $(function () {
                $("#a").click(function () {
                    $(this).css('line-height','30px');
                    $(this).css('font-size',"14px");
                })
            })
    </script>
    第八题
    jquery-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;Dom
    $(document).ready(function () {
    $(but[1]).click(function () {
    var but=document.getElementsByTagName('body');
    $('body').css("background-color","pink")
    })
    我是这样理解的，javascript,jquery.
    首先，JavaScrip所有的功能jquery有少部分没有。
    而jquery所有的功能JavaScript全部会有。因为jquery是一个库
    第九题
    Dom&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;jquery
    <script type="text/javascript">
        var but=document.getElementsByTagName('button');
        console.log(but);/*but是dom对象*/
        /*原生js1方法 docyment.getElemntById()*/
        $(document).ready(function () {
            $(but[1]).click(function () {
                $('body').css("background-color","pink")
            })
    </script> -->
</h3>
</html>

jquery选择器

选择器一

选择器二

交并选择器

子代选择器

属性选择器