JQuery selector
The selector is the foundation of JQuery. In JQuery, event handling, DOM traversal and Ajax operations all rely on the selector.
Advantages of JQuery selector:
· The writing of the introduction
$("#id") is equivalent to document.getElementById("id");
· Perfect event handling mechanism
2, JQuery selector is similar to CSS selector, used to select web pages
Classification of elements in JQuery selector:
CSS-like selector: basic selector, hierarchical selector, attribute selector
Filter selector: basic filter selector, visibility filter selector
Basic selector The
basic selector includes label selector, class selector, ID selector, union selector, intersection selector and global selector.
Code display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js">
//src=""引号里写的是jquery-1.8.3.js的路径
</script>
</head>
<body>
<script type="text/javascript">
$(function() {
//标签选择器
$("h2").css("background-color","red"); //设置所有h2标签的背景颜色
//类选择器
$(".t").css("background-color","blue"); //设置所有类名为t的背景颜色
//id选择器
$("#a").css("background-color","black"); //设置所有id名为a的背景颜色
//并集选择器
$("h1,h3,.t").css("background-color","pink"); //设置所有h1、h3、类名为t的元素的背景颜色
//交集选择器
$("h2.s").css("background-color","orange");//设置所有类名为s的h2元素的背景颜色
//全局选择器
$("*").css("background-color","blue"); //设置所有元素的背景颜色
})
</script>
<h1>我</h1>
<h2>爱</h2>
<h2 class="s">好</h2>
<h3 class="t">你</h3>
<h4>哈</h4>
<h5 class="t">呵</h5>
<h6 id="a">滚</h6>
</body>
</html>
Attribute selector The
attribute selector selects elements through the attributes of HTML elements.
Code display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
//属性选择器
$("[title]").css("background-color","coral") //改变含义title属性的li标签的背景颜色
$("[title=s]").css("background-color","coral") //改变title属性值为s的li标签的背景颜色
})
</script>
<ul>
<li title="#">喜洋洋</li>
<li>汤姆</li>
<li title="a">福禄娃</li>
<li>黑猫警长</li>
<li>天线宝宝</li>
<li title="s">奥特曼</li>
<li>阿童木</li>
</ul>
</body>
</html>
Basic filter selector The
basic filter selector can select the first element, the last element, and the element with an even or odd index. The
basic filter selector can select elements according to the value of the index.
Code display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//基本过滤选择器
//选择第一个
$("li:first").css("background-color","coral")
//选择最后一个
$("li:last").css("background-color","red")
//选择下标为偶数 下标从0开始
$("li:even").css("background-color","red")
//选择下标为奇数 下标从0开始
$("li:odd").css("background-color","blue")
//选取下标为3的元素 下标从0开始
$("li:eq(3)").css("background-color","red")
//选取下标大于2的元素，不包括下标为2的元素
$("li:gt(2)").css("background-color","red")
//选取下标小于3的元素，不包括下标为3的元素
$("li:lt(3)").css("background-color","red")
})
</script>
</head>
<body>
<ul>
<li>喜洋洋</li>
<li>汤姆</li>
<li>福禄娃</li>
<li>黑猫警长</li>
<li>天线宝宝</li>
<li>奥特曼</li>
<li>阿童木</li>
</ul>
</body>
</html>
Visibility filter selector
Visibility selector can obtain elements through their display status.
Code display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可见性过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("[name=show]").click(function(){
$("p:hidden").show();
});
$("[name=hidd]").click(function(){
$("p:visible").hide();
});
});
</script>
</head>
<body>
<p>落霞与孤鹜齐飞</p>
<p style="display: none;">秋水共长天一色</p>
<input type="button" name="show" value="点我显示"/>
<input type="button" name="hidd" value="点我隐藏" />
</body>
</html>