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><h2 id="phpm">H2-1</h2><li>li</li><h2 id="emmmmm">H2-2</h2><ul> <li id="mm222">1li</li> <li id="wjf">2li</li> <li id="mm555">3li</li> <li id="wjf">4li</li> <li id="mm221">5li</li> <li>6li</li> <li class="www">7li</li> <li class="ww">8li</li> <li class="w">9li</li></ul><h2>H2-3</h2></body><script> //first 选中第一个li元素 $('li:first').css('background-color','#2d6a88'); //选中ul下的 第一个li元素 $('ul li:first').css('background-color','#0a68b4'); //last 选中最后一个h2元素 $('h2:last').css('background-color','#3a87ad'); //eq选中指定下标元素 $('li:eq(3)').css('background-color','#1a9c39'); //gt 大于指定下标的元素 $('li:gt(4)').css('background-color','#b25d25'); //lt 小于指定下标的元素 $('li:lt(2)').css('background-color','#d99925'); // li[id]选中带有id的元素 $('li[id]').css('color','#00ff00'); // id=wjf 选中ID等于wjf的所有元素 $('[id=wjf]').css('background-color','#ffff00'); // id!=wjf 选中ID等于wjf的所有元素 // $('[id!=wjf]').css('background-color','#ff9900'); // li[class^=w] 选中li标签下class开头为w的所有元素 $('li[class^=w]').css('background-color','#aa9999'); // h2[id$=m] 选中h2标签下id结尾为m的所有元素 $('h2[id$=m]').css('background-color','#aa0000'); // 'li[id*=mm]'选中li标签下id中包含mm的元素 $('li[id*=mm]').css('background-color','#888ccc');</script></html>
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="33703259@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>
