博客列表 >12月20日_jQuery选择器(基本筛选器、属性选择器和表单对象属性)

12月20日_jQuery选择器(基本筛选器、属性选择器和表单对象属性)

fkkf467
fkkf467原创
2019年12月24日 16:15:36743浏览

一、基本筛选器

1. :first

获取匹配的第一个元素
HTML代码:

  1. <div>
  2. <p id="p1">p1</p>
  3. <p id="p2">p2</p>
  4. <p id="p3">p3</p>
  5. </div>

JavaScript代码:

  1. var p = $('p:first');
  2. console.log(p);

运行结果:

2. :eq(index)

匹配一个给定索引值的元素
HTML代码:

  1. <ul>
  2. <li id="p1">li1</li>
  3. <li id="p2">li2</li>
  4. <li id="p3">pli3</li>
  5. </ul>

JavaScript代码:

  1. console.log($('li:eq(0)'));
  2. console.log($('ul li:eq(1)'));
  3. console.log($('ul li:eq(2)'));

运行结果

3. :gt(index)

匹配所有大于给定索引值的元素
HTML代码:

  1. <div id="div1">
  2. <p id="p1">div_p1</p>
  3. <p id="p2">div_p2</p>
  4. <p id="p3">div_p3</p>
  5. </div>
  6. <p id="p4">p4</p>

JavaScript代码:

  1. console.log($('p:gt(1)'));
  2. console.log($('#div1 p:gt(0)'));

运行结果

4. :lt(index)

匹配所有小于给定索引值的元素
HTML代码:

  1. <div id="div1">
  2. <p id="p1">div_p1</p>
  3. <p id="p2">div_p2</p>
  4. <p id="p3">div_p3</p>
  5. </div>
  6. <p id="p4">p4</p>

JavaScript代码:

  1. console.log($('p:lt(3)'));
  2. console.log($('div p:lt(2)'));

运行结果

5. :last

获取最后个元素
HTML代码:

  1. <ul>
  2. <li id="li1">li1</li>
  3. <li id="li2">li2</li>
  4. <li id="li3">li3</li>
  5. <li id="li4">li4</li>
  6. <li id="li5">li5</li>
  7. </ul>

JavaScript代码:

  1. console.log($('li:last'));

运行结果

二、属性选择器

1. [attribute]

匹配包含给定属性的元素
HTML代码:

  1. <div id="d1">
  2. <div id="d1d1">d1d1</div>
  3. <div>d1d2</div>
  4. </div>
  5. <div id="d2">d2</div>
  6. <div>d3</div>

JavaScript代码:

  1. console.log($('div[id]'));

运行结果

2. [attribute=value]

匹配给定的属性是某个特定值的元素
HTML代码:

  1. <form>
  2. <input type="text" id="username" name="username" value="admin">
  3. <input type="password" id="pwd" name="pwd" value="123456">
  4. <button>提交</button>
  5. </form>

JavaScript代码:

  1. console.log($('input[name="username"]'));
  2. console.log($('input[name="pwd"]'));

运行结果

3. [attribute!=value]

匹配所有不含有指定的属性,或者属性不等于特定值的元素
HTML代码:

  1. <div class="mydiv">
  2. <div class="mydiv_1"></div>
  3. <div class="mydiv"></div>
  4. <div id="mydiv_2"></div>
  5. </div>
  6. <div id="mydiv2"></div>
  7. <div></div>

JavaScript代码:

  1. console.log($('div[class!="mydiv"]'));

运行结果

4. [attribute^=value]

匹配给定的属性是以某些值开始的元素
HTML代码:

  1. <form>
  2. <input type="text" name="newsinput1" id="newsinput1">
  3. <input type="text" name="laoinput2" id="laoinput2">
  4. <input type="text" name="newsinput3" id="newsinput3">
  5. </form>

JavaScript代码:

  1. console.log($('input[name^="news"]'));

运行结果

5. [attribute$=value]

匹配给定的属性是以某些值结尾的元素
HTML代码:

  1. <div>
  2. <p id="red_color" class="red_color">p1</p>
  3. <p id="blue_color" class="blue_color">p2</p>
  4. <p id="green_color" class="green_color">p3</p>
  5. </div>
  6. <p id="yellow_color" class="yellow_color">span1</p>

JavaScript代码:

  1. console.log($('div p[class$="color"]'));

运行结果

6. [attribute*=value]

匹配给定的属性是以包含某些值的元素
HTML代码:

  1. <div id="div1" class="btn btn-lg">
  2. <p id="p1" class="btn-lg s_tab smallp1">p1</p>
  3. <div class="btn-lg s_tab"></div>
  4. <p class="smallp2">p2</p>
  5. <p class="smallp3">p3</p>
  6. <p class="bigp4">p4</p>
  7. </div>

JavaScript代码:

  1. console.log($('div[class*="btn-lg"]'));
  2. console.log($('p[class*="small"]'));

运行结果

三、表单对象属性

1. :checked

匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected

2. :selected

匹配所有选中的option元素
HTML代码:

  1. <form>
  2. <p>
  3. <label for="username">用户名:</label>
  4. <input type="text" id="username" name="username" value="">
  5. </p>
  6. <p>
  7. <label for="pwd">密码:</label>
  8. <input type="password" id="pwd" name="pwd" value="">
  9. </p>
  10. <p>
  11. <label for="repwd">确认密码:</label>
  12. <input type="password" id="repwd" name="repwd" value="">
  13. </p>
  14. <p>
  15. <label>性别:</label>
  16. <input type="radio" name="sex" value="man">
  17. <input type="radio" name="sex" value="woman">
  18. </p>
  19. <p>
  20. <label>爱好:</label>
  21. <input type="checkbox" name="hobby" value="basktball">篮球
  22. <input type="checkbox" name="hobby" value="soccer">足球
  23. <input type="checkbox" name="hobby" value="ping_pong">乒乓球
  24. </p>
  25. <p>
  26. <label>籍贯:</label>
  27. <select name="province">
  28. <option value="">请选择</option>
  29. <option value="sd">山东</option>
  30. <option value="bj">北京</option>
  31. <option value="sh">上海</option>
  32. </select>
  33. </p>
  34. <button type="button" onclick="record()">提交</button>
  35. </form>

JavaScript代码:

  1. function record() {
  2. var username = $('input[name="username"]').val();
  3. var pwd = $('input[name="pwd"]').val();
  4. var repwd = $('input[name="repwd"]').val();
  5. var sex = $('input[name="sex"]:checked').val();
  6. var hobby = $('input[name="hobby"]:checked').val();
  7. var province = $('select[name="province"] option:selected').val();
  8. if (username == '') {
  9. alert("用户名不能为空!");
  10. return;
  11. }
  12. if (pwd == ''){
  13. alert("密码不能为空!");
  14. return;
  15. }
  16. if (repwd == ''){
  17. alert("请再次输入密码!");
  18. return;
  19. }
  20. if (repwd != pwd){
  21. alert("两次密码不一致!");
  22. return;
  23. }
  24. if (sex == undefined){
  25. alert("请选择性别");
  26. return;
  27. }
  28. if (hobby == undefined){
  29. alert("请选择爱好");
  30. return;
  31. }
  32. if (province == ''){
  33. alert("请选择籍贯");
  34. return;
  35. }
  36. alert("注册成功!");
  37. }

运行结果

四、总结

学会了一些常用的基本筛选器、属性选择器和表单对象属性。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议