以下是关于“jQuery 使用手册(二)”的完整攻略：
jQuery 使用手册(二)
1. 选择器
在 jQuery 中，可以使用选择器来选择需要操作的 HTML 元素。
1.1 基本选择器
- 筛选所有元素：
* - 根据标签选择元素：
tagname - 根据 id 选择元素：
#id - 根据 class 选择元素：
.class
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落。</p>
<p id="myP">这是另一个段落。</p>
<p class="myClass">这是第三个段落。</p>
<script>
// 筛选所有元素
$("*").css("border", "1px solid gray");
// 根据标签选择元素
$("p").css("background-color", "yellow");
// 根据 id 选择元素
$("#myP").css("color", "red");
// 根据 class 选择元素
$(".myClass").css("font-weight", "bold");
</script>
</body>
</html>
1.2 层次选择器和过滤选择器
除了基本选择器之外，还可以使用层次选择器和过滤选择器来更精准地选择元素。
- 子选择器：
parent > child - 后代选择器：
ancestor descendant - 并集选择器：
selector1,selector2,... - 过滤选择器：
:first、:last、:even、:odd、:eq(n)、:gt(n)、:lt(n)、:header、:not(selector)、:contains(text)、:has(selector)、:parent、:empty、:focus、:enabled、:disabled、:selected、:checked
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<ul>
<li>苹果</li>
<li class="fruits">香蕉</li>
<li>橙子</li>
</ul>
</div>
<script>
// 子选择器：匹配直接作为父元素的子元素
$("#myDiv > ul > li").css("background-color", "yellow");
// 后代选择器：匹配符合条件的任何后代元素
$("#myDiv li").css("font-weight", "bold");
// 并集选择器：匹配所有指定元素的并集
$("li, span").css("color", "red");
// 过滤选择器：选择所有奇数位置的 li 元素
$("#myDiv li:odd").css("background-color", "gray");
</script>
</body>
</html>
2. 事件
在 jQuery 中，可以使用 .on() 方法来绑定事件处理程序。
2.1 常用事件
click：鼠标单击事件dblclick：鼠标双击事件mousedown：鼠标按下事件mouseup：鼠标抬起事件mousemove：鼠标移动事件mouseover：鼠标移到元素上事件mouseout：鼠标移出元素事件keydown：键盘按下事件keyup：键盘抬起事件focus：元素获得焦点事件blur：元素失去焦点事件load：元素加载完成事件
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
margin: 30px auto;
text-align: center;
padding-top: 40px;
}
</style>
</head>
<body>
<div>
<p>请单击我！</p>
</div>
<script>
$("div").on("click", function() {
$(this).toggleClass("active");
});
$("div").on("mouseover", function() {
$(this).css("background-color", "gray");
});
$("div").on("mouseout", function() {
$(this).css("background-color", "yellow");
});
</script>
</body>
</html>
以上就是关于“jQuery 使用手册(二)”的完整攻略，希望能对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 使用手册(二) - Python技术站
微信扫一扫 
支付宝扫一扫 