基本选择器
最近在学习js的框架Jquery，从头学学习，感觉还是写一下笔记还是比较好理解的，这样容易自己记忆，和查询，也能帮助大家学习jquery，之前了解过js，后来再用Jquery发现，jquery的选择器真的是太强大了，下面我们来介绍下，常用的jquery选择器。
首先我们来了解下Juqery都有哪些基本选择器
- Id选择器
- .class选择器
- 元素选择器
- *选择器
1.Id选择器就是，通过元素的Id来选择要操作的DOM元素。是Jquery最常用的选择器。Id选择器的基本使用语法：$("#ID") 来选择元素，具体代码下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
<style>
</style>
</head>
<style>
#name {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
padding: 10px;
}
</style>
<body>
<script>
$(function() {
//通过ID选择器来给div添加内容
$("#name").html("<p>Hello word</p>");
});
</script>
<div id="name">
</div>
</body>
</html>
2.Class选择器，通过.class来选择DOM元素，也是比较常用的选择器，语法$(".class") 它和ID选择器不一样的地方及时，class在DOM中也可以用作改元素的样式，而ID就没有实际的意义，就是用来表示元素的不同。具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
<style>
</style>
</head>
<style>
#name {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
padding: 10px;
}
</style>
<body>
<script>
$(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
//这里class选择器，通过$(".name")可以选中class属性值为name的DOM元素
$(".name").html("<p>Hello word</p>");
});
</script>
<div class="name">
</div>
</body>
</html>
3.元素选择器，也是Jquery中常用的选择器语法为：$("div") 选中要操作得元素节点，$("div") 就是选中所有的div标签元素，我们要选中<p>你好</p> 就可以使用$("p") 具体代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
<style>
</style>
</head>
<style>
.name {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
padding: 10px;
}
</style>
<body>
<script>
$(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
//$("div")选中所有的div元素
$("div").css("border","1px solid red");
});
</script>
<div class="name">
</div>
</body>
</html>
4.*选择器，语法$("*") 选中页面的所有元素，不常用代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
<style>
</style>
</head>
<style>
.name {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
padding: 10px;
}
</style>
<body>
<script>
$(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
//$("*")选中所有的元素
$("*").css("border","1px solid red");
});
</script>
<div class="name">
</div>
</body>
</html>
以上都是基本的选择器，比较简单，但是都是比较常用的选择器，比如ID选择器和class选择器，元素选择器