给大家分享代码。t146
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style type="text/css"> * { padding: 0; margin: 0; } ul{ list-style-type: none; } li{ height: 20px; font-size: 16px; }style> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //隔行换色，设置奇数行的颜色 $("ul li:nth-child(odd)").css("background-color","red"); //设置偶数行的颜色 $("ul li:nth-child(even)").css("background-color","blue"); });script>head><body><ul> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li>ul>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //区别 //对于：first-child来说 //选择的是h1，因为父元素div下第一个元素就是h1 $("h1:first-child").css("background-color","red"); //无效，选择不到任何元素，因为父元素div下第一个元素是h1，不是p $("p:first-child").css("background-color","green"); //无效，选择不到任何元素，因为父元素div下第一个元素是h1，不是span $("span:first-child").css("background-color","blue"); //对于：first-of-type来说 //选择的是h1，因为h1是父元素div下的h1类型的子元素，我们选择其中第一个，实际也只有一个 $("h1:first-of-type").html("更改为h1,first-of-type"); //选择的是p，因为p是父元素div下的p类型的子元素，我们选择其中第一个，实际只有一个 $("p:first-of-type").html("更改为p，first-of-type"); //选择的是第一个span，因为span是父元素div下的span类型的子元素，我们选择其中第一个。 $("span:first-of-type").html("更改为span,first-of-type"); /* 从上面的例子可知， ：first-child在选择父元素下的子元素时，需要区分元素位置； ：first-of-type在选择父元素下的子元素时，不需要区分元素位置； 实际上， ：last-child和：last-of-type， ：nth-child(n)和：nth-of-type(n)， ：only-child和：only-of-type， 这三对的区别是一样的，不在赘述。 另外插一句，在实际开发中，一般只会使用第一类子元素伪类选择器。 有个知识点说一下，在jQuery中有的选择器下标从0开始，有的从1开始， 这个如何区分呢？ 记住一句话，在jQuery中，只有：nth-child()和：nth-of-type， 这两个选择器的下标是从1开始的，其他所有选择器都是从0开始的。 */ });script>head><body> <div> <h1>h1h1> <p>pp> <span>span1span> <span>span2span> div>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style type="text/css"> .select{ display: none; }style> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //可见性 伪类选择器 $("#btn1").click(function () { $("li:hidden").css("display","block") .css("background-color","red"); }); });script>head><body> <ul> <li>HTMLli> <li>CSSli> <li>Javascriptli> <li class="select">jQueryli> <li>Vue.jsli> ul> <input type="button" id="btn1" value="显示">body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //内容 伪类选择器 //：contains(text) $("p:contains(jQuery)").css("color","blue"); });script>head><body> <div>jQuery实战开发div> <p>write less do morep> <p>从JavaScript到jQueryp> <div>欢迎来到虾米大王div>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //内容 伪类选择器 //：has(selector) $("div:has(span)").css("color","blue"); });script>head><body> <div> <p>这是段落p> div> <div> <p>这是另一个段落p> <span>这是一个spanspan> div>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style type="text/css"> * { padding: 0; margin: 0; margin-top: 5px; margin-left: 50px; } table,tr,td{ border: 1px solid silver; } td{ width: 60px; height: 60px; line-height: 60px; text-align: center; }style> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //内容 伪类选择器 //：empty $("td:empty").css("background-color","red") .html("?"); });script>head><body> <table> <tr> <td>2td> <td>4td> <td>8td> tr> <tr> <td>16td> <td>32td> <td>64td> tr> <tr> <td>128td> <td>256td> <td>td> tr> table>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style type="text/css"> * { padding: 0; margin: 0; margin-top: 5px; margin-left: 50px; } table,tr,td{ border: 1px solid silver; } td{ width: 60px; height: 60px; line-height: 60px; text-align: center; }style> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //内容 伪类选择器 //：parent $("td:parent").css("background-color","red"); });script>head><body><table> <tr> <td>2td> <td>4td> <td>8td> tr> <tr> <td>16td> <td>32td> <td>64td> tr> <tr> <td>128td> <td>256td> <td>td> tr>table>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //表单 伪类选择器 //：checkbox //$("input:checkbox").attr("checked","true"); $("input:checkbox").attr("checked","checked"); });script>head><body> <p>性别： <input type="radio" name="gendar" id="sex_man"> <label for="sex_man">男label> <input type="radio" name="gendar" id="sex_woman"> <label for="sex_woman">女label> p> <p>喜欢的水果： <input type="checkbox" id="apple"><label for="apple">苹果label> <input type="checkbox" id="watermelon"><label for="watermelon">西瓜label> <input type="checkbox" id="peach"><label for="peach">蜜桃label> p>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //表单 伪类选择器 //：radio $("input:radio").attr("checked","checked"); //单选按钮按照name名称分组，每组中只有一个生效，所以设置单选选中，只有最后一个有效 });script>head><body> <p>性别： <input type="radio" name="gendar" id="sex_man"> <label for="sex_man">男label> <input type="radio" name="gendar" id="sex_woman"> <label for="sex_woman">女label> p> <p>喜欢的水果： <input type="checkbox" id="apple"><label for="apple">苹果label> <input type="checkbox" id="watermelon"><label for="watermelon">西瓜label> <input type="checkbox" id="peach"><label for="peach">蜜桃label> p>body>html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> $(function () { //表单 伪类选择器 //:text $("input:text").css({ border:"2px solid #666666", width:"300px", height:"30px", lineheight:"30px", marginTop:"20px" }); });script>head><body> <div> 姓名：<input type="text"><br> 曾用名：<input type="text"><br> 密码：<input type="password"><br> div>body>html>
5714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
