目录
1.jQuery选择器
1.1 基本选择器
#id, element , .class , *
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
<script type="text/javascript">
//1)查找ID为"div1ID"的元素个数
//alert($("#div1ID").length);
//2)查找DIV元素的个数
//alert($("div").length);
//3)查找所有样式是"myClass"的元素个数
//alert($(".myClass").length);
//4)查找所有DIV,SPAN,P元素的个数
alert($("div,span,p").length);
</script>
</body>
</html>1.2 层次选择器
ancestor descendant //祖先与后代
parent > child //父级与子集
prev + next //上一个与下一个 //同级的第一个()元素
prev ~ siblings //同级
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<form action="">
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="c"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1)找到表单form下所有的input元素的个数
//alert($("form input").length);
//2)找到form表单里所有的子集input的元素个数
//alert($("form>input").length);
//3)找到表单form同级的第一个input元素的value属性值
//alert($("form+input").val());
//4)找到所有与表单form同级的input元素的个数
alert($("form~input").length);
</script>
</body>
</html>1.3基本加强型选择器
:first //第一个
:last //最后一个
:odd //奇数
:even //偶数
:eq //索引
:gt //大于
:lt //小于
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本加强型选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
<tr><td>line4[3]</td></tr>
<tr><td>line5[4]</td></tr>
<tr><td>line6[5]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个元素的内容
//html()：强调的是标签中的内容，即便标签中有子标签也会显示出来
//text()：强调的是标签中的文本内容，即便标签中有子标签，也只会显示文本内容
//alert($("ul li:first").html());
//alert($("ul li:first").text());
//2)查找UL中最后一个元素的内容
//html()：永固html和jsp中，不能用于xml
//text()：既能用于html和jsp中，也能用于xml中
//alert($("ul li:last").text());
//3)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
//alert($("table tr:odd").length);
//4)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
//alert($("table tr:even").length);
//5)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
//alert($("table tr:eq(1)").text());
//6)查找表格中索引号大于0的个数 大于：gt=>greater then 小于：lt=>less then
alert($("table tr:gt(0)").length);
</script>
</body>
</html>1.4 内容选择器
contains
empty
has
parent
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
<style>
.myClass{
font-size: 44px;
color: red;
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素个数
//alert($("div:contains('John')").length);
//2)查找所有p元素为空的元素个数
//alert($("p:empty").length);
//3)给所有包含p元素的div元素添加一个myClass样式
//$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数，即p为父元素
alert($("p:parent").length);
</script>
</body>
</html>1.5 可见性选择器
didden 隐藏
visible 可见
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见性选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
//alert($("table tr:hidden").length);
//2)查找所有可见的tr元素的个数
//alert($("table tr:not(:hidden)").length);
//推荐使用
alert($("table tr:visible").length);
</script>
</body>
</html>1.6属性选择器
attribute 属性
attribute=value 属性是这个值的
attribute!=value 属性中不是这个值的是
attribute^=value 属性中以这个值开始的是
attribute$=value属性以这个值结束的是
attribute*=value属性包含这个值的是
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsAccept" value="Evil Plans" />
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
//alert($("div[id]").length);
//2)查找所有name属性是newsletter的input元素个数
//alert($("input[name='newsletter']").length);
//3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!=newsletter]").attr("checked","checked");
//4)查找所有name属性以'news'开始input的元素，并将其选中
//$("input[name^=news]").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input的元素，并将其选中
//$("input[name$=letter]").attr("checked","checked");
//6)查找所有name属性包含'news'的input的元素，并将其选中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以'letter'结尾的input元素，并将其选中
$("input[id][name$=letter]").attr("checked","checked");
</script>
</body>
</html>1.7 子元素选择器
nth-child() 第几个元素括号里填几
first-child 第一个元素
last-child 最后一个元素
only-child 只有一个元素
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<script type="text/javascript">
//1)迭代[each]每个ul中第一个li元素中的内容，索引从1开始
/*$("ul li:first-child").each(function () {
alert($(this).text());
});*/
//2)迭代[each]每个ul中最后一个li元素中的内容，索引从1开始
/*$("ul li:last-child").each(function () {
alert($(this).text());
});*/
//3)迭代[each]每个ul中第二个li元素中的内容，索引从1开始
/*$("ul li:nth-child(2)").each(function () {
alert($(this).text());
});*/
//4)迭代[each]每个ul中只有一个孩子li元素中的内容，索引从1开始
$("ul li:only-child").each(function () {
alert($(this).text());
});
</script>
</body>
</html>1.8 表单选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" src="../images/girl.jpg" width="25px" height="25px"/><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查找所有input元素个数
//alert($("input").length); //10
//alert($(":input").length); //13,找到input标签和select标签/textarea/button
//2)查找所有文本框的个数
//alert($(":text").length);
//3)查找所有密码框的个数
//alert($(":password").length);
//4)查找所有单选按钮的个数
//alert($(":radio").length);
//5)查找所有复选框的个数
//alert($(":checkbox").length)
//6)查找所有提交按钮的个数
//alert($(":submit").length);
//7)匹配所有图像域的个数
//alert($(":image").length);
//8)查找所有重置按钮的个数
//alert($(":reset").length);
//9)查找所有普通按钮的个数 AJAX需要使用普通按钮进行提交
//alert($(":button").length);
//10)查找所有文件域的个数
//alert($(":file").length);
//11)查找所有input元素为隐藏域的个数
alert($(":input:hidden").length);
</script>
</body>
</html>1.8 表单对象选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单对象选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select>
<option value="1">广东</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
//alert($(":input:enabled").length);
//2)查找所有不可用的input元素的个数
//alert($(":input:disabled").length);
//3)查找所有选中的复选框元素的个数
//alert($(":checkbox:checked").length);
//4)查找所有选中的选项元素的个数
alert($("select option:selected").length);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
