jQuery 初学
选择器 (一)
什么是选择器?
就是能通过各种方式来获取到元素。(类似JavaScript中的document.getElementById…document.getElementsByTagName 等等)
基本选择器
- ID选择器
#id 使用:$("#id")
/* 注意,id是元素设置的id名 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button id="box">其他品牌</button>
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#box ").css("color","#0000FF")
})
</script>
</body>
</html>
- class 选择器
.class 使用:$(".class")
/* 注意,class是元素设置的class名 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button class="box">其他品牌</button>
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".box ").css("color","#0000FF")
})
</script>
</body>
</html>
- 元素名称选择器
“element” 使用:$(“element”)
/* 注意,element是元素名称,使用元素名称选择器会选择所有的对应名称的元素 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button> 其他品牌 </button>
<button> 其他品牌2 </button>
<button> 其他品牌3 </button>
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("button").css("color","#0000FF") //三个按钮都会被选择到
})
</script>
</body>
</html>
- 所有元素选择器
" * " 使用:$(" * ")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button> 其他品牌 </button>
<button> 其他品牌2 </button>
<button> 其他品牌3 </button>
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("*").css("color","#0000FF") //页面所有元素都会被选择到
})
</script>
</body>
</html>
- 选取多个元素选择器
“div,.box,#id” 使用:$(“div,button”)
/注意,要选取多个元素,中间用逗号隔开即可/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>1234</div>
<button> 其他品牌 </button>
<button> 其他品牌2 </button>
<button> 其他品牌3 </button>
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("button,div").css("color","#0000FF") //三个按钮和一个div都会被选择到
})
</script>
</body>
</html>
小结:
刚开始学习jQuery,第一步先接触选择器,学习到了最基本的几个选择器方法,id,class,元素名一类的选择器,下一步学习层次选择器,一步步前进,给自己加油。