![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
西门大官人Correction status：qualified
Teacher's comments：
Collection
Collection
<!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>
<!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>
