JQuery选择器
JQuery选择器用于查找满足条件的元素,比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象,相当于getElementById:
1、id 选择器 $(“#div1”).html(“<font color=red>hello</font>”)。语法、意义类似于CSS选择器
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(function () {
-
//显示1个:我是d1
-
$("#d1").text("我是d1");
-
//显示2个:我的类选择器Div2
-
$(".Div2").text("我的类选择器Div2");
-
//显示5个,并把前面的覆盖了
-
$("div").text("都是我div的");
-
})
-
</script>
-
</head>
-
<body>
-
<div id="d1"></div>
-
<div id="Div1"></div>
-
<div class="Div2"></div>
-
<div id="Div3"></div>
-
<div class="Div2"></div>
-
</body>
-
</html>
-
2、标签选择器 $("TagName")来获取所有指定标签名的jQuery对象,相
当于getElementsByTagName:
$(function() {
$("#btnClick").click(function() {
$("p").html("我们都是P");
});
});
3、类选择器
JQuery中注册事件监听的写法:click()、leave()、focus()、blur...,自己动手写click函数。
规则: $(who).when({what}); 例: $(‘#a’).click(function(){});
4、复合选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于CSS选择器)
5.层次选择器:
(1)$("div p")获取div下的所有p元素(后代,子、子的子……)
(2)$("div > p")获取div下的直接p子元素
(3)$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用)
(4)$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)
jQuery修改样式:$("#div1").css("background", "red");
获得样式$(“#div1”).css(“background”);
修改value:$(“#un”).val(“abc”),
获得value:$(“#un”).val()
$(function() {
$("#wrap p").css("background-color","red");
})
类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法,不是属性,jQuery中很少有属性的用法,因为属性写法很难“链式编程”。
如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:
if ($("#btn1").length <= 0) { alert("id为btn1的元素不存在!"); }