jQuery选择器二
一,表单过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
//1.对表单内 可用的input进行赋值操作
//当不可用时 存在属性disabled属性
/7al()方法可以设置和获取
$("#1").click(function(){
$(":text:enabled").val("你好")
});
//1.对表单内 不可用的input进行赋值操作
$("#2").click(function(){
$(":text:disabled").val("我不好")
});
//3.获取多选框 获取选中的个数
$("#3").click(function(){
alert($(":checkbox:checked").length);
});
//4.获取多选框 获取选中的内容
$("#4").click(function(){
var a = $(":checkbox:checked");
//老式遍历
// for(var i = 0;i<a.length;i++){
// alert(a[i].value);
// }
//jQuery遍历
//在遍历的function函数中 有一盒this对象 就是当前遍历到的dom对象
a.each(function(){
alert(this.value);
});
});
//5.获取下拉框选中的内容
$("#5").click(function(){
var b = $("select option:selected");
b.each(function(){
alert(this.innerHTML);
});
});
});
</script>
</head>
<body>
<button id="1">对表单内 可用的input进行赋值操作<^tton>
<button id="2">对表单内 不可用的input进行赋值操作<^tton>
<button id="3">获取多选框 获取选中的个数<^tton>
<button id="4">获取多选框 获取选中的内容<^tton>
<button id="5">获取下拉框选中的内容<^tton>
<form action="#">
<input type="text" value="可用文本框"/>
<input type="text" disabled="disabled" value="不可用文本框"/>
<input type="checkbox" value="1" checked="checked"/>1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" checked="checked"/>4
<input type="checkbox" value="5" />5
<select multiple="multiple">
<option>--请选择国籍</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>英国</option>
<lect>
</form>
</body>
<cml>
二,内容过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容过滤选择器</title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
//1.选择含有文本胡的div元素
$("#1").click(function(){
$("div:contains('胡')").css("background-color","red");
alert("选择含有文本胡的div元素");
});
//2.选择不包含文本或者子元素的div空元素
$(".2").click(function(){
$("div:empty").css("background-color","blue");
alert("选择不包含文本或者子元素的div空元素");
});
//3.选择含有class为2元素的div元素
$("#3").click(function(){
$("div:has(.m2)").css("background-color","yellow");
alert("选择含有class为2元素的div元素");
});
//4.选择含有子元素或者文本元素div元素
$("#4").click(function(){
$("div:parent").css("background-color","grey");
alert("选择含有子元素或者文本元素div元素");
});
});
</script>
</head>
<body>
<div id="1">
<span id="m1">胡</span>
</div>
<div class="2">
<span class="m2">马</span>
</div>
<div id="3">
<span id="m3">张</span>
</div>
<div id="4">
<span id="m4">王</span>
</div>
<div id="5">
<span id="m5">张</span>
</div>
<div id="6">
<span id="m6">王</span>
</div>
<div id="7">
<span id="m7">胡</span>
</div>
<div id="8">
<span id="m8">张</span>
</div>
<div id="9">
<span id="m9">王</span>
</div>
</body>
<cml>
三,属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性过滤选择器</title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
//1.选择含有属性title的div元素
$("#1").click(function(){
$("div[id]").css("background-color","red");
alert("选择含有属性title的div元素");
});
// //2.选择属性class为2的div元素
$(".2").click(function(){
$("div[class = '2']").css("background-color","blue");
alert("选择属性class为2的div元素");
});
//3.选择属性id不等于3的div元素(也会包含没有id属性的元素)
$("#3").click(function(){
$("div[id!='3']").css("background-color","yellow");
alert("选择属性id不等于3的div元素(也会包含没有id属性的元素)");
});
//4.选择属性属性title以m开头的span元素
$("#4").click(function(){
$("span[title^= 'm']").css("background-color","grey");
alert("选择属性属性title以m开头的span元素");
});
//5.选择属性属性title以5结尾的span元素
$("#5").click(function(){
$("span[title$= '5']").css("background-color","grey");
alert("选择属性属性title以5结尾的span元素");
});
//6.选择属性属性title含有6的span元素
$("#6").click(function(){
$("span[title*= '6']").css("background-color","grey");
alert("选择属性属性title含有6的span元素");
});
//7.首先选取有属性id的span元素 然后再结果中 选取属性title含有7的span元素
$("#7").click(function(){
$("span[id][title*= '7']").css("background-color","grey");
alert("首先选取有属性id的span元素 然后再结果中 选取属性title含有7的span元素");
});
//8.首先选取有属性title的span元素 选取属性title不等于8的span元素
$("#8").click(function(){
$("span[title][title!= 'm8']").css("background-color","grey");
alert("首先选取有属性title的span元素 然后再结果中 选取属性title不等于8的span元素");
});
});
</script>
</head>
<body>
<div id="1">
<span id="m1" title="m1">胡</span>
</div>
<div class="2">
<span class="m2" title="m2">马</span>
</div>
<div id="3">
<span id="m3" title="m3">张</span>
</div>
<div id="4">
<span id="m4" title="m4">王</span>
</div>
<div id="5">
<span id="m5" title="m5">张</span>
</div>
<div id="6">
<span id="m6" title="m6">王</span>
</div>
<div id="7">
<span id="m7" title="m7">胡</span>
</div>
<div id="8">
<span id="m8" title="m8">张</span>
</div>
<div id="9">
<span id="m9" title="m9">王</span>
</div>
</body>
<cml>