<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head><body><ul> <li>list item 1</li> <li class='twor'>list item 2</li> <li id='three' name='three'>list item 3</li> <li class='four'>list item 4</li> <li name='five'>list item 5</li> <li name='haha man'><span>list item 6</span></li> <li name='ffic'>list item 7</li></ul><ul> <li>list item 1</li></ul><button>点击</button> <script> $('button').on('click', function(){ // $('li:odd').css('color','red');//选中偶数 // $('li:even').css('color','red');//选中奇数 // $('li:eq(1)').css('color','red'); //从0开始，1即为第二个 // $('li:gt(2)').css('color','red');//选中起始位以后的所有li // $('li[id]').css('color','red'); //选中li下所有含id属性的li // $('li[id="three"]').css('color','red'); //选中id=three的li // $('li[class="four"]').css('color','red'); //选中class=four的li // $('li[name="five"]').css('color','red'); //选中name=five的li // $('li[name^="f"]').css('color','red'); //选中name属性中开头为f的li // $('li[class$="r"]').css('color','red'); //选中class属性中结尾为r的li // $('li[class*="r"]').css('color','red'); //class属性中只要有r的就都选中 // $('li[name~="man"]').css('color','red'); //选中name属性中有空的 man的li // $('li[id][name^="t"]').css('color','red'); //多重属性筛选 ，选中所有含id的且name开头为t的li // $('li:first').css('color','red'); //第一个 // $('li:first-child').css('color','red');//第一个 // $('li:first-of-type').css('color','red');//第一个 // $('li:last').css('backgroundColor','blue');//最后一个 // $('li:last-of-type').css('color','red');//最后一个 // $('li:last-child').css('color','red');//最后一个 // $('li:nth-child(2)').css('color','red'); //第二个 // $('li:nth-of-type(2)').css('color','red'); //第二个 }); </script></body></html>
from选中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head><body> <form action="" method="GET"> <p><label for="text">会员名：<input type="text" name="text" id="text"></label></p> <p><label for="password">登录密码<input type="password" name="password" id="password"></label></p> <p><label for="re_password">再次密码<input type="password" name="password" id="re_password"></label></p> <p> <label for="sex1">性别： <label for="sex1"><input type="radio" name="sex" id="sex1" value='1'>男</label> <label for="sex2"><input type="radio" name="sex" id="sex2" value="0">女</label> </label> </p> <p> <label for="php">爱好： <label for="php"><input type="checkbox" name="check" id="php">php</label> <label for="javascript"><input type="checkbox" name="check" id="javascript">javascript</label> <label for="css"><input type="checkbox" name="check" id="css">css</label> <label for="python"><input type="checkbox" name="check" id="python" disabled>python</label> </label> </p> <p> <label for="">地区 <select> <option value="郫都区">郫都区</option> <option value="锦江区">锦江区</option> <option value="青羊区">青羊区</option> <option value="高新区">高新区</option> </select> </label> </p> <button>点击</button> </form> <script> $('button').on('click', function () { if (!$('#text').val()) { alert('用户名不能为空'); return false; } if (!$('input[name="password"]').val() || $('input[name="password"]').val() !== $('#re_password').val()) { alert('密码不能为空，或不相等'); return false; } let sex = $('input[name="sex"]:checked').val(); if( !sex ){ alert('请选择性别'); return false; } let select = $('input[name="check"]:checked').val(); if( !select ){ alert('请选择爱好'); return false; } //获取shelect //$('select option:checked').val(); //获取选中的值，option中的value //$('select option:checked').text; // 选中option的汉字 }); </script></body></html>
