一.基本选择器
下面的实例是根据我自己的项目需要来写的,大家从中提取与知识点相关的部分自行理解就阔以啦!!!
1. id选择器 jQuery("#ID") 或者$("#id")
-
jQuery("#ID") 或者$("#id") : 查找id为为ID的元素
-
它调用JavaScript函数
document.getElementById()
-
实例
//1.btn1 id $("#btn1").click(function(){ $("#one").css("background-color","#bbffaa"); });
2. 类选择器 jQuery(".CLASS") 或者$(".CLASS")
-
jQuery(".CLASS") 或者$(".CLASS") : 查找类为CLASS的元素
-
它调用JavaScript的原生
getElementsByClassName()
函数来实现 -
实例
//2.选择所有class为mini的元素 $("#btn2").click(function(){ $(".mini").css("background-color","#bbffaa"); });
3. 标签选择器 jQuery(“element”) 或者$(“element”)
-
jQuery(“element”) 或者$(“element”) :查找标签element的元素
-
它调用JavaScript的
getElementsByTagName()
-
实例
//3.选择元素名是div的所有元素 $("#btn3").click(function(){ $("div").css("background-color","#bbffaa"); });
4. 全局选择器 jQuery("") 或者$("")
-
jQuery("*") 或者$(" * ") : 匹配所有元素
-
实例
//4.选择所有元素 $("#btn4").click(function(){ $("*").css("background-color","#bbffaa"); });
5. 并集选择器 jQuery(" selector1,…,selectorN")
jQuery(" selector1,…,selectorN")
或者 $(" selector1,…,selectorN")
-
jQuery(“element”) 或者$(“element”) : 将每一个选择器匹配到的元素合并后一起返回。
-
实例
//5.选择所有span元素和id为two的元素 $("#btn5").click(function(){ $("span,#two").css("background-color","#bbffaa"); });
* 基本选择器完整程序
我把程序分享给你,自行认真验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
div,span,p{
width:140px;
heigth:140px;
margin:5px;
background-color:#aaa;
border:#000 2px solid;
float:left;
font-size:20px;
}
div.mini{
width:50px;
heigth:50px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
/*
1.后代选择器 $("E F")
2.子代选择器 $("E>F")
3.相邻选择器 $("E+F")
4.同辈选择器 $("E~F")
*/
//1.选择body中的所有div元素
$("#btn1").click(function(){
$("body div").css("background-color","#bbffaa");
});
//2.选择body中,div子元素(div孙子元素不能算)
$("#btn2").click(function(){
$("body > div").css("background-color","#bbffaa");
});
//3.同父条件下,选择id为one元素后的紧跟(第一个)div元素
$("#btn3").click(function(){
$("#one+div").css("background-color","#bbffaa");
});
//4.选择id为two的元素后面所有div兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background-color","#bbffaa");
});
})
</script>
</head>
<body>
<form>
<div class="one" id="one">
id为one的div,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two">
1id为two,class为one title为test的div
<div class="mini" title="other">class为mini title为other</div>
<div class="mini" title="test">class为mini title为test</div>
</div>
<br><br>
<div class="one">
2
<div class="mini">class为mini</div>
<div class="hhh">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
</div>
<br><br>
<div class="one">
<div class="hhh">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini title为tesst</div>
</div>
</form>
<br><br>
<div style="display:none;" class="none">style为display:"none"的div</div>
<br><br>
<div class="hide">class为hide</div>
<br><br>
<div>
包含input的type为hideen的div<input type="hidden" size="8">
</div>
<br><br>
<span class="one" id="span">span元素</span>
<br><br>
<h1>控制台</h1>
<button id="btn1">1.选择body中的所有div元素</button><br><br>
<button id="btn2">2.选择body中,选择div子元素</button><br><br>
<button id="btn3">3.同父条件下,选择id为one元素后的紧跟(第一个)div元素</button><br><br>
<button id="btn4">4.选择id为two的元素后面的所有div兄弟元素</button>
</body>
</html>
二.层次选择器
1. 后代选择器 $(“E F”)
-
选择给定的祖先元素的所有后代元素。
-
一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。
-
实例
//1.选择body中的所有div元素 $("#btn1").click(function(){ $("body div").css("background-color","#bbffaa"); });
2. 子代选择器 $(“E>F”)
-
选择所有指定“E”元素中指定的"F"的直接子元素。 (只能是儿子级别,不能是孙子级别)
-
子元素组合选择器(E > F)它只会选择第一级的后代。
-
实例
//2.选择body中,div子元素(div孙子元素不能算) $("#btn2").click(function(){ $("body > div").css("background-color","#bbffaa"); });
3. 相邻选择器 $(“E+F”)
-
选择紧跟(其后的第一个)在 “E” 元素后的 “F” 元素
-
必须在同一个父元素下
-
实例
//3.同父条件下,选择id为one元素后的所有div元素 $("#btn3").click(function(){ $("#one+div").css("background-color","#bbffaa"); });
4. 同辈选择器 $(“E~F”)
-
匹配 “E” 元素之后的所有 ”F“ 元素
-
不要求统一父级,而是匹配所有F!
-
实例
//4.选择id为two的元素后面所有div兄弟元素 $("#btn4").click(function(){ $("#two~div").css("background-color","#bbffaa"); });
* 层次选择器完整程序
我把程序分享给你,自行认真验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
div,span,p{
width:140px;
heigth:140px;
margin:5px;
background-color:#aaa;
border:#000 2px solid;
float:left;
font-size:20px;
}
div.mini{
width:50px;
heigth:50px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
/*
1.后代选择器 $("E F")
2.子代选择器 $("E>F")
3.相邻选择器 $("E+F")
4.同辈选择器 $("E~F")
*/
//1.选择body中的所有div元素
$("#btn1").click(function(){
$("body div").css("background-color","#bbffaa");
});
//2.选择body中,div子元素(div孙子元素不能算)
$("#btn2").click(function(){
$("body > div").css("background-color","#bbffaa");
});
//3.同父条件下,选择id为one元素后的紧跟(第一个)div元素
$("#btn3").click(function(){
$("#one+div").css("background-color","#bbffaa");
});
//4.选择id为two的元素后面所有div兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background-color","#bbffaa");
});
})
</script>
</head>
<body>
<form>
<div class="one" id="one">
id为one的div,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two">
1id为two,class为one title为test的div
<div class="mini" title="other">class为mini title为other</div>
<div class="mini" title="test">class为mini title为test</div>
</div>
<br><br>
<div class="one">
2
<div class="mini">class为mini</div>
<div class="hhh">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
</div>
<br><br>
<div class="one">
<div class="hhh">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini title为tesst</div>
</div>
</form>
<br><br>
<div style="display:none;" class="none">style为display:"none"的div</div>
<br><br>
<div class="hide">class为hide</div>
<br><br>
<div>
包含input的type为hideen的div<input type="hidden" size="8">
</div>
<br><br>
<span class="one" id="span">span元素</span>
<br><br>
<h1>控制台</h1>
<button id="btn1">1.选择body中的所有div元素</button><br><br>
<button id="btn2">2.选择body中,选择div子元素</button><br><br>
<button id="btn3">3.同父条件下,选择id为one元素后的紧跟(第一个)div元素</button><br><br>
<button id="btn4">4.选择id为two的元素后面的所有div兄弟元素</button>
</body>
</html>
三.过滤选择器(直接举例)
1. 选择第一个div元素
//1.选择第一个div元素
$("#btn1").click(function(){
$("div:first").css("background-color","#bbffaa");
});
2. 选择class不为one的所有div元素
//2.选择class不为one的所有div元素
$("#btn2").click(function(){
$("div:not(.one)").css("background-color","#bbffaa");
});
3. 选择索引值为等于0的div元素
//3.选择索引值为等于0的div元素
$("#btn3").click(function(){
$("div:eq(0)").css("background-color","#bbffaa");
});
4. 选择当前正在执行动画的所有元素
//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
$(":animated").css("background-color","#bbffaa");
});
5. 选择含有子元素的div元素
//5.选择含有子元素的div元素
$("#btn5").click(function(){
$("div:parent").css("background-color","#bbffaa");
});
6. 选择所有不可见的div元素
//6.选择所有不可见的div元素
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background-color","#bbffaa");
});
7. 选择属性title值等于"test"的div元素
//7.选择属性title值等于"test"的div元素
$("#btn7").click(function(){
$("div[title='test']").css("background-color","#bbffaa");
});
8. 选择class为one的div父元素下的第一个子元素
//8.选择class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
$("div.one > :first").css("background-color","#bbffaa");
});
9. 选择每个class为one的div父元素下的第一个子元素
//9.选择每个class为one的div父元素下的第一个子元素
$("#btn9").click(function(){
$("div.one > :first-child").css("background-color","#bbffaa");
});
* 过滤选择器完整程序
我把程序分享给你,自行认真验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style type="text/css">
div,span,p{
width:140px;
heigth:140px;
margin:5px;
background-color:#aaa;
border:#000 2px solid;
float:left;
font-size:20px;
}
div.mini{
width:50px;
heigth:50px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//执行动画的div
function anmateIt(){
$("#mover").slideToggle(1000,anmateIt);//自己调用自己,根本停不下来------
}
//slideToggle 上上下下运动
anmateIt();
})
$(function(){
//1.选择第一个div元素
$("#btn1").click(function(){
$("div:first").css("background-color","#bbffaa");
});
//2.选择class不为one的所有div元素
$("#btn2").click(function(){
$("div:not(.one)").css("background-color","#bbffaa");
});
//3.选择索引值为等于0的div元素
$("#btn3").click(function(){
$("div:eq(0)").css("background-color","#bbffaa");
});
//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
$(":animated").css("background-color","#bbffaa");
});
//5.选择含有子元素的div元素
$("#btn5").click(function(){
$("div:parent").css("background-color","#bbffaa");
});
//6.选择所有不可见的div元素
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background-color","#bbffaa");
});
//7.选择属性title值等于"test"的div元素
$("#btn7").click(function(){
$("div[title='test']").css("background-color","#bbffaa");
});
//8.选择class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
$("div.one > :first").css("background-color","#bbffaa");
});
//9.选择每个class为one的div父元素下的第一个子元素
$("#btn9").click(function(){
$("div.one > :first-child").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<div class="one" id="one">
id为one的div,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two">
id为two,class为one title为test的div
<div class="mini" title="other">class为mini title为other</div>
<div class="mini" title="test">class为mini title为test</div>
</div>
<br><br>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
</div>
<br><br>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini title为tesst</div>
</div>
<br><br>
<div style="display:none;" class="none">style为display:"none"的div</div>
<br><br>
<div class="hide">class为hide</div>
<br><br>
<div>
包含input的type为hideen的div<input type="hidden" size="8">
</div>
<br><br>
<span class="one" id="span">span元素</span>
<br><br>
<div id= "mover">正在执行的div动画</div>
<br><br>
<h1>控制台</h1>
<button id="btn1">1.选择第一个div元素</button><br><br>
<button id="btn2">2.选择class不为one的所有div元素</button><br><br>
<button id="btn3">3.选择索引值为等于0的div元素</button><br><br>
<button id="btn4">4.选择当前正在执行动画的所有元素</button><br><br>
<hr>
<button id="btn5">5.选择含有子元素的div元素</button><br><br>
<button id="btn6">6.选择所有不可见的div元素</button><br><br>
<button id="btn7">7.选择属性title值等于"test"的div元素</button><br><br>
<button id="btn8">8.选择每个class为one的div父元素下的第一个子元素</button><br><br>
<button id="btn9">9.选择每个class为one的div父元素下的第一个子元素</button>
</body>
</html>
四.表单过滤、对象属性选择器(直接举例)
1. 对表单内可用input 赋值操作
(如有需要可以添加背景色 方便查看变化)
//1.对表单内可用input 赋值操作 (如有需要可以添加背景色 方便查看变化)
$("#btn1").click(function(){
$("input:enabled").val("新赋值1").css("background-color","#bbffaa");
})
2. 对表单内不可用input 赋值操作
//2.对表单内不可用input 赋值操作
$("#btn2").click(function(){
$("input:disabled").val("新赋值2").css("background-color","#bbffaa");
})
3. 获取多选框中的个数(重点)
//3.获取多选框中的个数(重点)
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
4. 获取多选框中的内容(有坑)
//4.获取多选框中的内容(有坑)
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
//办法1:
/*
for(var i= 0;i<$cc.length;i++)
{
alert($cc[i].value); //$cc[i]是一个数组 是DOM对象
}
*/
//办法2:使用。each迭代数组
$cc.each(function(){
//alert(this.value);//dom方法
//或者
alert($(this).val());//jquery方法
});
});
5. 获取下拉框中的内容
//5.获取下拉框中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
//只有jquery对象才能使用.each() 就是说$ss必须的是jquery,才能$ss.each()的表达方式
$ss.each(function(){
//this是dom对象 $(this)对象是jquery对象
//alert(this.value);
//或者
alert($(this).val());
})
});
* 表单过滤、对象属性选择器完整程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单过滤选择器&对象属性过滤选择器</title>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内可用input 赋值操作 (如有需要可以添加背景色 方便查看变化)
$("#btn1").click(function(){
$("input:enabled").val("新赋值1").css("background-color","#bbffaa");
})
//2.对表单内不可用input 赋值操作
$("#btn2").click(function(){
$("input:disabled").val("新赋值2").css("background-color","#bbffaa");
})
//3.获取多选框中的个数(重点)
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
//4.获取多选框中的内容(有坑)
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
//办法1:
/*
for(var i= 0;i<$cc.length;i++)
{
alert($cc[i].value); //$cc[i]是一个数组 是DOM对象
}
*/
//办法2:使用。each迭代数组
$cc.each(function(){
//alert(this.value);//dom方法
//或者
alert($(this).val());//jquery方法
});
});
//5.获取下拉框中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
//只有jquery对象才能使用.each() 就是说$ss必须的是jquery,才能$ss.each()的表达方式
$ss.each(function(){
//this是dom对象 $(this)对象是jquery对象
//alert(this.value);
//或者
alert($(this).val());
})
});
});
</script>
</head>
<body>
<form id="form1" action="#">
可用元素:<input name="add" value="可用文本框1" /><br><br>
不可用元素:<input name="email" disabled="disabled" value="不可用文本框" /><br><br>
可用元素:<input name="che" value="可用文本框2"/><br><br>
不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br><br>
多选框:<br>
<input type="checkbox" name="newsLetter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsLetter" value="test2" />test2
<input type="checkbox" name="newsLetter" value="test3" />test3
<input type="checkbox" name="newsLetter" checked="checked" value="test4"/>test4
<input type="checkbox" name="newsLetter" value="test5" />test5
<br><br>
下拉列表1:<br>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br>
下拉列表2:<br>
<select name="test2" multiple="multiple" style="height:100px">
<option>浙江</option>
<option>辽宁</option>
<option>北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
<h1>控制台</h1>
<h1>表单对象属性过滤选择器</h1>
<button id="btn1">1.对表单内 可用input赋值操作</button><br><br>
<button id="btn2">2.对表单内 不可用input赋值操作</button><br><br>
<button id="btn3">3.获取多选框选中的个数</button><br><br>
<button id="btn4">4.获取多选框中的内容</button><br><br>
<button id="btn5">5.获取下拉菜单中的内容</button><br><br>
</body>
</html>