收藏
批改狀態(tài)：未批改
老師批語：
`<!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參數(shù)的元素。
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);
//選擇指定屬性是以給定值結尾的元素。這個比較是區(qū)分大小寫的。
$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>用戶狀態(tài)</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(‘請?zhí)顚懹脩裘?;
return;
}
if(pwd==’’){
alert(‘請?zhí)顚懨艽a’);
return;
}
if (pwd!=repwd){
alert(‘兩次密碼不一致’);
return;
}
if(sex==undefined){
alert(‘請選擇性別’);
return;
}
if(status==undefined){
alert(‘請選擇用戶狀態(tài)’);
return;
}
console.log(province);
// return;
}
// let username = $(‘input’);
// console.log(username);
</script>
</body>
</html>`
學習了jQuery選擇器及表單對象屬性，之前自己看代碼時看不懂得地方現(xiàn)在都豁然開朗了。相信在之后的實戰(zhàn)中會有更大的收獲。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
