jquery选择器特别丰富，先介绍三种，以后补充。
1、id选择器：一个用来查找的ID，即元素的id属性
描述：$( "#id" )
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
2、类选择器，顾名思义，通过class样式类名来获取节点
描述：$( ".class" )
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
3、元素选择器：根据给定（html）标记名称选择所有的元素
描述：$( "element" )
搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持
下面有一个综合示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<img id="img_id" class="img_class" title="title"
src="2.jpg" />
<script type="text/javascript">
$(function() {
/* id选择器 */
$("#img_id").toggle(
function() {
/* id选择器 */
alert("1img_id");
$("#img_id").attr("src", "1.jpg");
$("#img_id").attr("title", this.src);
}, function() {
/* 元素选择器 */
alert("2img");
$("img").attr("src",
"2.jpg");
$("img").attr("title", this.src);
}, function() {
/* class选择器 */
alert("3img_class");
$(".img_class").attr("src", "1.jpg");
$(".img_class").attr("title", this.src);
})
})
</script>
</body>
</html>
顺便补充一下jquery的toggle，中文意思是切换键，功能也是切换。简单说，使用方法toggle(function1,function2,function3)，在点击图片时循环执行function方法，需要注意的是jquery的选择很重要，我用的是1.7,而1.9以上就不行了。
1、id选择器：一个用来查找的ID，即元素的id属性
描述：$( "#id" )
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。
补充一点，js的document.getElementById和jquery的id选择器有一点区别，但是也能使用，例子如下：
<input name="VehicleNo"type="hidden" id="VehicleNo" value="123000" />
<script type="text/javascript">
var uid = document.getElementById("VehicleNo");//js获取上面的id
var uid2 = $("#VehicleNo");//jquery获取上面的id
var uidvalue = uid.value;//js获取value值123000
var uidvalue2 = uid2[0].value;//jquery获取value值123000，注意uid2[0].value才能获取值（可以F12调试查看一下），此时uidvalue=uidvalue2
<script>2、类选择器，顾名思义，通过class样式类名来获取节点
描述：$( ".class" )
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
3、元素选择器：根据给定（html）标记名称选择所有的元素
描述：$( "element" )
搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持
下面有一个综合示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<img id="img_id" class="img_class" title="title"
src="2.jpg" />
<script type="text/javascript">
$(function() {
/* id选择器 */
$("#img_id").toggle(
function() {
/* id选择器 */
alert("1img_id");
$("#img_id").attr("src", "1.jpg");
$("#img_id").attr("title", this.src);
}, function() {
/* 元素选择器 */
alert("2img");
$("img").attr("src",
"2.jpg");
$("img").attr("title", this.src);
}, function() {
/* class选择器 */
alert("3img_class");
$(".img_class").attr("src", "1.jpg");
$(".img_class").attr("title", this.src);
})
})
</script>
</body>
</html>
顺便补充一下jquery的toggle，中文意思是切换键，功能也是切换。简单说，使用方法toggle(function1,function2,function3)，在点击图片时循环执行function方法，需要注意的是jquery的选择很重要，我用的是1.7,而1.9以上就不行了。
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
