一.常用jQuery属性选择器
<body> <button class="btn btn-primary btn-lg">btn</button> <div class="mydiv" style="background-color: #000;" id="div_black" mydefine="sss">黑色</div> <div class="mydivs" style="background-color: #ff0000;" id="div_red" mydefine="ss">红色</div> <p id="1">我是p标签</p> <div class="mydiv" style="background-color: #00ff00;" id="div_green"> <p id="a">div中的p标签</p> <div id="div_inside"> <p id="b">div中div中的p标签</p> <p id="c">P3</p> </div> <div style="background-color: #20b2aa;">第二个div</div> </div> <p id="2">我是p标签</p> <p>我是p标签</p> <div class="mydiv" style="background-color: #ffff00;" id="div_yellow">黄色</div> <button onclick="jfirst()">:first</button> <button onclick="jeq()">:eq(index)</button> <button onclick="jgt()">:gt(index)</button> <button onclick="jlt()">:lt(index)</button> <button onclick="jlast()">:last</button> <button onclick="jattr()">[attr]</button> <button onclick="jattr_value()">[attr="value"]</button> <button onclick="jattr_start_value()">[attr^="value"]</button> <button onclick="jattr_end_value()">[attr$="value"]</button> <button onclick="jattr_include_value()">[attr*="value"]</button> <button onclick="jfirstchild()" >:first-child</button> <script type="text/javascript"> function jfirst(){ var obj = $('div:first'); // 第一个div（div-0） console.log(obj); } function jeq(){ var obj = $('div:eq(1)'); // 等于div-1的 console.log(obj); } function jgt(){ var objs = $('div:gt(0)'); // 在第div-0之后的 console.log(objs); } function jlt(){ var objs = $('div:lt(4)'); // 在第div-4之前的 console.log(objs); } function jlast(){ var obj = $('div:last'); // 最后一个div console.log(obj); } function jattr() { var objs = $('div[id]'); // div标签里有id的 console.log(objs); } function jattr_value() { var objs = $('div[class="mydivs"]'); // div标签class为mydivs的 // var objs = $('div[mydefine="sss"]'); // div标签mydefine为sss的 // var objs = $('div[mydefine!="sss"]'); // div标签mydefine不为sss的 console.log(objs); } function jattr_start_value() { var objs = $('div[mydefine^="s"]'); // div标签mydefine以s开头的 console.log(objs); } function jattr_end_value() { var objs = $('div[class$="v"]'); // div标签class以v结尾的 console.log(objs); } function jattr_include_value() { var objs = $('button[class*="btn-primary"]'); // button标签class包含btn-primary的 console.log(objs); } function jfirstchild() { var objs = $('div p:first-child'); // div标签里第一个p标签元素 console.log(objs); } </script></body
二.常用jquery表单选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery表单选择器</title> <script src="jquery-3.4.1.min.js"></script></head><body><form action=""> <h2>注册账号</h2> <p> 邮箱：<input type="email" name="mail" value="452557923@qq.cn"> </p> <p> 密码：<input type="password" name="pass" placeholder="密码6-18位"> </p> <p> 确认密码：<input type="password" name="repass" placeholder="重新输入上方密码"> </p> <p> 性别：<input type="radio" name="sex" value="nan">男 <input type="radio" name="sex" value="nv">女 </p> <button type="button" onclick="an()">提交注册</button></form><script> function an() { var mail = $('input[name="mail"]').val(); var pass = $('input[name="pass"]').val(); var repass = $('input[name="repass"]').val(); var sex = $('input[name="sex"]:checked').val(); if (mail==''){ alert('邮箱信息未填写'); return; } if(pass==''){ alert('请填写密码'); return; } if (pass!=repass){ alert('两次密码不一致'); return; } if (sex==undefined){ alert('请选择您的性别'); return; }else{ alert('注册成功 账号资料登陆邮箱：'+mail+'登陆密码'+pass); } }</script></body></html>
