jQuery 选择器
jQuery最核心的组成部分就是：选择器引擎，它继承了css语法，可以对DOM元素的标签名，属性名，状态等进行快速准确的选择，并且不用担心浏览器的兼容性，
因此我们下面介绍的jQuery选择器大多与我们之前学习的CSS选择器类似
CSS选择器是用来查找和定位页面中的元素，并将样式设置到元素上
jQuery选择器也是用来查找元素，我们找到元素后，可以使用一些给定的方法来修改、删除、甚至移动元素
在使用jQuery选择器时，我们必须使用“$()”函数来包装使用我们的css规则，而css规则作为参数传递到jQuery对象内部后，在返回包含页面中对应元素的jQuery对象，随后，我们就可以对这个获取到的DOM节点进行行为操作了。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例
用户点击按钮后，所有 <p> 都会改变颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一个行为
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>运行程序尝试一下
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
注意：ID在页面只允许出现一次，我们一般都是要求开发者蹲守和保持这个规则。但如果你在页面中出现三次，并且使用css样式，那么这三个元素还会执行效果，但如果你在jQuery中这样去做，就会遇到问题，只有一个ID会生效，所以我们一定要养成习惯，在页面仅使用一个ID
通过 id 选取元素语法如下：
$("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素会变成红色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>运行程序尝试一下
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
实例
用户点击按钮后，所有带有 class="test" 属性的元素都会改变颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html>运行程序尝试一下
更多的选择器实例
| 语法 | 描述 |
|---|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
女神的闺蜜爱上我
再来学一遍，老司机，开车了
8年前 添加回复 0