![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>常用jquery属性选择器案例</h2>
<div id="div-1" name="div_n1" class="div_c1">
<ul id="ul-1" name="ul_n1" class="ul_c1">
<li id="li_1" name="li_n1" class="li_c1">1</li>
<li id="li_2" name="li_n2" class="li_c2">
<p id="p_1" name="p_n1" class="p_c1">2</p>
</li>
<li id="li_3" name="li_n3" class="li_c3">3</li>
</ul>
<p id="p_2" name="p_n2" class="p_c2">4</p>
<p id="p_3" name="p_n1" class="p_c1" value="333">5</p>
</div>
<div id="div-2" name="div_n2" class="div_c2" aasd="aaaa">
<div id="div-5" name="div_n5" class="div_c5">
<p id="p_4" name="p_n4" class="p_c4">6</p>
<p id="p_5" name="p_n5" class="p_c5">7</p>
</div>
<div id="div-6" name="div_n6" class="div_c6">
<li id="li_4" name="li_n4" class="li_c4" bbbfd="aa33'">8</li>
<li>9</li>
</div>
<p id="p_6" name="p_n5" class="p_c5">10</p>
<p id="p_7" name="p_n5" class="p_c5" cccc="acc3">11</p>
</div>
<div id="div-3" name="div_n3" class="div_c3">
<div id="div-7" name="div_n1" class="div_c1">
<li id="li_5" name="li_n5" class="li_c5">
<p>12</p>
</li>
<li id="li_6" name="li_n6" class="li_c6">
<h3 id="h-1" name="ul_n1" class="ul_c1">13</h3>
</li>
</div>
</div>
<div id="div-4" name="div_n4" class="div_c4">
<p id="p_8" name="p_n5" class="p_c5">14</p>
<p id="p_9" name="p_n5" class="p_c5">15</p>
</div >
<h3 id="hl-2" name="ul_n1" class="ul_c1">
16
</h3>
<script type="text/javascript" >
//选择第一个匹配的DOM元素。
var first1 = $(‘div:first’);
console.log(first1);
let first2 = $(‘p:first’);
console.log(first2);
//在匹配的集合中选择索引值为index的元素。
let jeq = $(‘p:eq(2)’);
console.log(jeq);
let jeq1 =$(‘li:eq(2)’);
console.log(jeq1);
//选择匹配集合中所有大于给定index（索引值）的元素。
let jgt = $(‘p:gt(3)’);
console.log(jgt);
//选择最后一个匹配的元素。
let jlast = $(‘div:last’);
console.log(jlast);
//选择匹配集合中所有索引值小于给定index参数的元素。
let jlt = $(‘ul:lt(3)’);
console.log(jlt);
let jlt1 = $(‘li:lt(3)’);
console.log(jlt1);
//选择所有具有指定属性的元素，该属性可以是任何值。
$att= $(‘p[cccc]’);
console.log($att);
$att1 = $(‘div[id]’);
console.log($att1);
$att2 = $(‘div[class]’);
console.log($att2);
//选择指定属性是给定值的元素。
$att3= $(‘p[cccc=acc3]’);
console.log($att3);
$att4= $(‘div[id=div-4]’);
console.log($att4);
//：选择不存在指定属性，或者指定的属性值不等于给定值的元素。
$att5= $(‘p[cccc!=acc3]’);
console.log($att5);
//选择指定属性是以给定字符串开始的元素
$att6 = $(‘p[name^=p]’);
console.log($att6);
$att7 = $(‘p[cccc^=a]’);
console.log($att7);
//选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
$att8 =$(‘p[name$=5]’);
console.log($att8);
//选择指定属性具有包含一个给定的子字符串的元素。
$att9 =$(‘li[name*=n]’);
console.log($att9);
//选择所有父级元素下的第一个子元素。
$fir=$(‘div p:first-child’);
console.log($fir);
// /选择所有父级元素下的最后一个子元素。
$las = $(‘div p:last-child’);
console.log($las);
</script>
</body>
</html>#常用jquery表单对象属性案例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>常用jquery表单对象属性案例</h2>
<form>
<div>
<label>用户名</label>
<input type="text" name="username">
</div>
<div>
<label>密码</label>
<input type="password" name="pwd">
</div>
<div>
<label>密码确认</label>
<input type="password" name="repwd">
</div>
<div>
<label>性别</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<div>
<label>用户状态</label>
<input type="checkbox" name="status" value="1">启用
<input type="checkbox" name="status" value="0">禁用
</div>
<div>
<label>籍贯</label>
<select name="province">
<option value="beijing">北京</option>
<option value="chongqing">重庆</option>
<option value="henan">河南</option>
<option value="fujian" >福建</option>
</select>
</div>
<button type="button" onclick="save()">保存</button>
</form>
<script type="text/javascript">
function save() {
let username = $(“input[name=’username’]”).val();
let pwd = $(“input[name=’pwd’]”).val();
let repwd = $(“input[name=’repwd’]”).val();
let sex = $(“input[name=’sex’]:checked”).val();
let status =$(“input[name=’status’]:checked”).val();
// let province =$(“select option:selected”).val();
let province =$(“select option:selected”).text();
if(username==’’){
alert(‘请填写用户名’);
return;
}
if(pwd==’’){
alert(‘请填写密码’);
return;
}
if (pwd!=repwd){
alert(‘两次密码不一致’);
return;
}
if(sex==undefined){
alert(‘请选择性别’);
return;
}
if(status==undefined){
alert(‘请选择用户状态’);
return;
}
console.log(province);
// return;
}
// let username = $(‘input’);
// console.log(username);
</script>
</body>
</html>`
学习了jQuery选择器及表单对象属性，之前自己看代码时看不懂得地方现在都豁然开朗了。相信在之后的实战中会有更大的收获。