Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月20日_ jQuery选择器、表单对象属性 - 九期线上班
Blogger Information
Blog 34
fans 0
comment 0
visits 21927
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
541 people have browsed it

JQuery的其他选择器

  1. <div style="background: lightblue" id="blue" class="my">div1</div>
  2.     <div style="background: lightgreen" id="green" class="my">div2</div>
  3.     <div style="background: lightpink" id="pink" class="my">div3</div>
  5.     <div style="background: lightyellow" id="yellow" class="my">
  6.         <p id="js">
  7.             <i>javascript</i>
  8.             <i>javascript</i>
  9.             <i>javascript</i>
  10.         </p>
  11.         <p id="jq">
  12.             <b attr="title">JQuery</b>
  13.             <b attr="list">jquery</b>
  14.             <b attr="list">jquery</b>
  15.         </p>
  16.         <p><h3>JavascriptJquery</h3></p>
  17.         <i>div的直接子元素1</i>
  18.         <b>div的直接子元素2</b>
  19.     </div>
  21. <script>
  22.     //jQuery伪类选择器 
  23.     //:first 相当于:eq(0)
  24.     var obj1 = $('p:first');
  25.     console.log(obj1);
  26.     //:eq(index) 等于
  27.     var obj2 = $('p:eq(1)');
  28.     console.log(obj2);
  29.     //:gt(index)    大于
  30.     var objs3 = $('div:gt(1)');
  31.     console.log(objs3);
  32.     //:lt(index)    小于
  33.     var objs4 = $('div:lt(2)');
  34.     console.log(objs4);
  35.     //:last
  36.     var obj5 = $('div:last');
  37.     console.log(obj5);
  39.     //jQuery属性选择器 
  40.     //选择该属性
  41.     var objs6 = $('p[id]');
  42.     console.log(objs6);    //选择带有id属性的p标签
  43.     //给定属性值
  44.     var obj7 = $("b[attr='title']");
  45.     console.log(obj7);
  46.     //属性值不等于 != (没有这个属性也算)
  47.     var obj8 = $("b[attr!='title']");
  48.     console.log(obj8);
  50.     //^ 以xxx属性值开头
  51.     var obj9 = $("b[attr^='t']");
  52.     console.log(obj9);
  53.     //$ 以xxx属性值结尾
  54.     var obj10 = $("b[attr$='e']");
  55.     console.log(obj10);
  56.     //*属性值包含
  57.     var obj11 = $("b[attr*='i']");
  58.     console.log(obj11);
  60.     //:frist-child
  61.     var obj12 = $("div p:first-child");
  62.     console.log(obj12); //选中id为js的p标签
  63.     </script>

Jquery表单对象属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery表单属性</title>
  6.     <script src="jquery.js"></script>
  7. </head>
  8. <body>
  9.     <form>
  10.         <div>
  11.             <lable>用户名：</lable>
  12.             <input type="text" name="username">
  13.         </div>    
  14.         <div>
  15.             <lable>密码：</lable>
  16.             <input type="password" name="pwd">
  17.         </div>
  18.         <div>
  19.             <lable>重复密码：</lable>
  20.             <input type="password" name="repwd">
  21.         </div>
  22.         <div>
  23.             <lable>性别：</lable>
  24.             <!-- name属性相同才互斥 -->
  25.             <input type="radio" name="sex" value="1">男
  26.             <input type="radio" name="sex" value="2">女
  27.         </div>
  28.         <div>
  29.             <lable>籍贯：</lable>
  30.             <select name="province">
  31.             <option value="henan">河南</option>
  32.             <option value="anhui">安徽</option>
  33.             <option value="fujian">福建</option>
  34.             <option value="gansu">甘肃</option>
  35.             <option value="hebei">河北</option>
  36.             </select>
  37.         </div>
  38.         <div>
  39.             <lable>用户状态：</lable>
  40.             <input type="checkbox" name="status">禁用
  41.         </div>
  42.         <!-- 默认form里点击button会提交 -->
  43.         <button type="button" onclick="save()">保存</button>
  44.     </form>
  46.     <script>
  47.         function save(){
  48.             var name = $('input[name="username"]').val();
  49.             var pwd = $('input[name="pwd"]').val();
  50.             var repwd = $('input[name="repwd"]').val();
  51.             var sex = $('input[name="sex"]:checked').val();
  52.             var status = $('input[name="status"]:checked').val();
  53.             var province = $('select[name="province"]').val();
  55.             //var province = $('select option:select').val();
  56.             var provinceText = $('select option:selected').text();
  57.             console.log(sex);    //始终是1
  58.             console.log(status);    //选与不选都是on
  59.             console.log(province);
  60.             console.log(provinceText);
  61.             //加上 :checked属性
  62.             //复选框不选的情况下是undefined  选中是on
  63.             //单选按钮都不选的情况下是undefined 选中哪个就是哪个的value值
  64.             if(pwd == ''){
  65.                 alert('请填写密码');
  66.                 return;
  67.             }
  68.             if(pwd!=repwd){
  69.                 alert('两次输入的密码不一致');
  70.                 return;
  71.             }
  72.             if(sex == undefined){
  73.                 alert('请选择性别');
  74.                 return;
  75.             }
  76.             if(status == undefined){
  77.                 alert('请选择用户状态');
  78.                 return;
  79.             }
  80.         }
  81.     </script>
  82. </body>
  83. </html>


总结：选择器需要多练。不清楚的地方查手册，灵活运用。表单属性很常用也很有用。案例很有帮助。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：选择器, 有意思, 与css有相似之处, 但区别也很明显
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