-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-08-20
来源 ：
阅读 1257
评论 0
摘要：本篇教程介绍了jQuery教程 选择器实例讲解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 选择器实例讲解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
<
1.基本选择器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("#one").css("background-color", "pink");
});
$("#btn2").click(function() {
$(".mini").css("background-color", "pink");
});
$("#btn3").click(function() {
$("div").css("background-color", "pink");
});
$("#btn4").click(function() {
$("*").css("background-color", "pink");
});
$("#btn5").click(function() {
$("#two,.mini").css("background-color", "pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素" />
<input type="button" id="btn2" value="选择样式为mini的元素" />
<input type="button" id="btn3" value="选择所有的div元素" />
<input type="button" id="btn4" value="选择所有元素" />
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素" />
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
2.层级选择器示例（不完整示例，理解层级选择器方法即可）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("body div").css("background-color", "gold");
});
$("#btn2").click(function() {
$("body>div").css("background-color", "gold");
});
$("#btn3").click(function() {
$("#two+div").css("background-color", "gold");
});
$("#btn4").click(function() {
$("#one~div").css("background-color", "gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素" />
<input type="button" id="btn2" value="选择body中的第一级的孩子" />
<input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" />
</body>
</html>
3.基本过滤选择器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
</body>
</html>
4.属性选择器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("div[id]").css("background-color", "red");
});
$("#btn2").click(function() {
$("div[id='one']").css("background-color", "red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为one的div" />
</body>
</html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
