全选的选择器*
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-------------------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----------------------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>
