Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月20号作业 jquery伪类选择器 属性选择器
Blogger Information
Blog 34
fans 2
comment 0
visits 23164
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月20号作业 jquery伪类选择器 属性选择器
遗忘了寂寞
Original
666 people have browsed it

jquery伪类选择器

html元素

  1. <div class="mydiv" style="background: #000;" id="div_back">黑色</div>
  2. <div class="emydiv" style="background: #ff0000;" id="div_red">红色</div>
  3. <div class="mydiv" style="background: #00ff00;" id="div_green" as="ass">
  4.     <p id="a">div中的p标签</p>
  5.     <div>
  6.     <p id="b">div中的div的p标签</p>
  7.     <p id="c">p3</p>
  8.     </div>
  9.     <p id="d">pd</p>
  10.     <div style="background: yellow">第二个div</div>
  11. </div>
  12. <p id="4">我是p标签</p>

:first选择器(选择第一个匹配的DOM元素)

  1. <script type="text/javascript">
  2.     //:first选择器(选择第一个匹配的DOM元素)
  3.     var div = $('div:first');
  4.     console.log(div);
  5. </script>

:last选择器(选择最后一个匹配的元素)

  1. <script type="text/javascript">
  2.     //:last选择器(选择最后一个匹配的元素)
  3.     var div = $('div:last');
  4.     console.log(div);
  5. </script>

:eq(index)选择器(在匹配的集合中选择索引值为index的元素)

  1. <script type="text/javascript">
  2.     //:eq(index)选择器(在匹配的集合中选择索引值为index的元素)
  3.     // 要匹配元素的索引值（从0开始计数）
  4.     var div = $('div:eq(2)');
  5.     console.log(div);
  6. </script>

:gt(index)选择器(选择匹配集合中所有大于给定index（索引值）的元素)

  1. <script type="text/javascript">
  2.     //:gt(index)选择器(选择匹配集合中所有大于给定index（索引值）的元素)
  3.     // 从0开始计数的索引值
  4.     var div = $('div:gt(2)');
  5.     console.log(div);
  6. </script>

:lt(index)选择器(选择匹配集合中所有索引值小于给定index参数的元素)

  1. <script type="text/javascript">
  2.     //:lt(index)选择器(选择匹配集合中所有索引值小于给定index参数的元素)
  3.     // 从0开始计数的索引值
  4.     var div = $('div:lt(2)');
  5.     console.log(div);
  6. </script>

属性选择器

[attribute]属性选择器(选择所有具有指定属性的元素，该属性可以是任何值)

  1. <script type="text/javascript">
  2.     //[attribute]属性选择器(选择所有具有指定属性的元素，该属性可以是任何值)
  3.     var div = $('div[as]');
  4.     console.log(div);
  5. </script>

[attribute=value]属性选择器(选择指定属性是给定值的元素)

  1. <script type="text/javascript">
  2.     //[attribute=value]属性选择器(选择指定属性是给定值的元素)
  3.     var div = $('div[class="emydiv"]');
  4.     console.log(div);
  5. </script>

[attribute!=value]属性选择器(选择不存在指定属性，或者指定的属性值不等于给定值的元素。)

  1. <script type="text/javascript">
  2.     //[attribute!=value]属性选择器(选择不存在指定属性，或者指定的属性值不等于给定值的元素。)
  3.     var div = $('div[class!="emydiv"]');
  4.     console.log(div);
  5. </script>

[attribute^=value]属性选择器(选择指定属性是以给定字符串开始的元素)

  1. <script type="text/javascript">
  2.     //[attribute^=value]属性选择器(选择指定属性是以给定字符串开始的元素)
  3.     var div = $('div[class^="my"]');
  4.     console.log(div);
  5. </script>

[attribute$=value]属性选择器(选择指定属性是以给定值结尾的元素)

  1. <script type="text/javascript">
  2.     //[attribute$=value]属性选择器(选择指定属性是以给定值结尾的元素)
  3.     var div = $('div[class$="div"]');
  4.     console.log(div);
  5. </script>

html元素

  1. <div class="mydiv" style="background: #000;" id="div_back">黑色</div>
  2. <div class="emydiv" style="background: #ff0000;" id="div_red">红色</div>
  3. <div class="mydiv aa cc" style="background: #00ff00;" id="div_green" as="ass">
  4.     <p id="a">div中的p标签</p>
  5.     <div>
  6.     <p id="b">div中的div的p标签</p>
  7.     <p id="c">p3</p>
  8.     </div>
  9.     <p id="d">pd</p>
  10.     <div style="background: yellow">第二个div</div>
  11. </div>
  12. <p id="4">我是p标签</p>

[attribute*=value]属性选择器(选择指定属性具有包含一个给定的子字符串的元素)

  1. <script type="text/javascript">
  2.     //[attribute*=value]属性选择器(选择指定属性具有包含一个给定的子字符串的元素)
  3.     var div = $('div[class*="aa"]');
  4.     console.log(div);
  5. </script>

:checked选择器(匹配所有勾选的元素)
选择器适用于复选框 （checkbox） ，单选框（radio button），和select元素的option元素

综合小案例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
  7.     </head>
  8.     <body>
  9.         <form>
  10.             <div>
  11.                 <label>用户名</label>
  12.                 <input type="text" name="username">
  13.             </div>
  14.             <div>
  15.                 <label>密码</label>
  16.                 <input type="password" name="pwd">
  17.             </div>
  18.             <div>
  19.                 <label>重复密码</label>
  20.                 <input type="password" name="repwd">
  21.             </div>
  22.             <div>
  23.                 <label>性别</label>
  24.                 <input type="radio" name="sex" value="1">男
  25.                 <input type="radio" name="sex" value="2">女
  26.             </div>
  27.             <div>
  28.                 <label>籍贯</label>
  29.                 <select name="province">
  30.                     <option value="anhui">安徽</option>
  31.                     <option value="zhejiang">浙江</option>
  32.                     <option value="henan">河南</option>
  33.                     <option value="fujian" selected>福建</option>
  34.                 </select>
  35.             </div>
  36.             <div>
  37.                 <label>用户状态</label>
  38.                 <input type="checkbox" name="status" value="0">禁用
  39.             </div>
  40.             <button type="button" onclick="save()">保存</button>
  41.         </form>
  42.         <script type="text/javascript">
  43.             function save(){
  44.                 var username = $('input[name="username"]').val();
  45.                 var pwd = $('input[name="pwd"]').val();
  46.                 var repwd = $('input[name="repwd"]').val();
  47.                 var sex = $('input[name="sex"]:checked').val();
  48.                 var status = $('input[name="status"]:checked').val();
  49.                 //var province = $('select[name="province"]').val();
  50.                 var province = $('select option:selected').text();
  51.                 if(username==''){
  52.                     alert('请填写用户名');
  53.                     return;
  54.                 }
  55.                 if(pwd==''){
  56.                     alert('请填写密码');
  57.                     return;
  58.                 }
  59.                 if(pwd!=repwd){
  60.                     alert('两次密码不一致');
  61.                     return;
  62.                 }
  63.                 if(sex==undefined){
  64.                     alert('请选择性别');
  65.                     return;
  66.                 }
  67.                 if(status==undefined){
  68.                     alert('请选择用户状态');
  69.                     return;
  70.                 }
  71.             }
  72.         </script>
  73.     </body>
  74. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：console.dir(), console.table(),你也可以试试, 有惊喜
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post