JQuery选择器:
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
jQuery 选择器的优点:
jQuery 选择器的优点:
简洁的写法 :
$(“#id”) 等价于 document.getElementById("id")
$(“tagName”) 等价于 document.getElementsByTagName("tagName")
$(“.class”)
$(“tagName”) 等价于 document.getElementsByTagName("tagName")
$(“.class”)
1)使用三种方式定位html中的元素
a)通过ID$("#ID")
b)通过标签名
$("标签名")
c)通过样式名
$(".样式名")
2)dom中,需要判段查找到的元素是否为null,
而jquery中,无需判段,因为jquery本身内置判段器,在查找不到的情况下,返回"undefined"<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script></head>
<body>
<input type="text" id="textID" value="这是jQuery" />
<div id="divID" class="divClass">这是jQuery</div>
<script type="text/javascript">
//通过"#id"来定位<input>
alert($("#textID").val());
//通过标签名定位
alert($("div").html());
alert($("input").val());
//通过样式名定位
alert($(".divClass").html());
</script>
</body>
</html>
DOM与jQuery对错误的处理方式比较
/若网页中没有id=value的元素,浏览器会报错
document.getElementById("username").value;
//需要判断document.getElementById("username")是否存在
if(document.getElementById("username")){
var username=document.getElementById("username");
alert(username.value);
}else{
alert("没有该id元素");
}
//使用jQuery处理即使不存在也不会报错
var $username=$("#usernamee");
alert("$username.val());
jQuery九类选择器
1)基本选择器
#id/标签名/样式名/选择器A,选择器B<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<div id="divID1">div1</div>
<div id="divID2">div2</div>
<div id="divID3">div3</div>
<span class="spanclass">span1</span>
<span class="spanclass">span2</span>
<span class="spanclass">span3</span>
<p align="center">p1</p>
<script type="text/javascript">
// 查找id为divID的元素
alert($("#divID1").html());
//查找标签为div的大小与长度
alert($("div").size());
alert($("div").length);
//查找样式为spanclass的的元素个数与大小
alert($(".spanclass").size());
alert($(".spanclass").length);
//查找div,span,p标签的个数
alert($("div,span,p").length);
//查找id为diviD,class为spanClass,p元素的个数
alert($("#divID1,.spanclass,p").size());
</script>
</body>
</html>
2)层次选择器
*form input:查询form下所有input元素,含有后代关系form>input:查询form下所有input元素,有有父子关系,没有后代关系
form+input:查询与form同级的第一个input元素,是兄弟关系
form~input:查询与form同级的所有input元素,是兄弟关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<form>
<input type="text" value="typetext" />
<table align="center">
<tr>
<td>
<input type="checkbox" value="checkbox" />
</td>
</tr>
</table>
</form>
<input type="radio" value="radio1" />
<input type="radio" value="radio2" />
<input type="radio" value="radio3" />
<script type="text/javascript">
/*
*form input:查询form下所有input元素,含有后代关系
form>input:查询form下所有input元素,有有父子关系,没有后代关系
form+input:查询与form同级的第一个input元素,是兄弟关系
form~input:查询与form同级的所有input元素,是兄弟关系
*/
alert($("form input").size());
alert($("form>input").size());
alert($("form+input").size());
alert($("form~input").size());
</script>
</body>
</html>
3)增强型基本选择器
:first:查询第一个元素:last:查询最后个元素
:checked:查询选中的复选框
:not(:checked):查询未选中的复选框
:even:偶数
:odd:奇数
:eq():索引从0开始
:gt():大于索引号
:lt():小于索引号
:header:查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式
4)内容选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<form>
<input type="text" value="typetext" />
<table align="center">
<tr>
<td>
<input type="checkbox" value="checkbox" />
</td>
</tr>
</table>
</form>
<hr/>
<input type="radio" value="radio1" />
<input type="radio" value="radio2" />
<input type="radio" value="radio3" />
<hr />
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<hr/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox"/>
<hr/>
<table border="1">
<tr><td>line1</td></tr>
<tr><td>line2</td></tr>
<tr><td>line3</td></tr>
</table>
<hr/>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<hr/>
<p>ppp</p>
<hr/>
<script type="text/javascript">
/*
*form input:查询form下所有input元素,含有后代关系
form>input:查询form下所有input元素,有有父子关系,没有后代关系
form+input:查询与form同级的第一个input元素,是兄弟关系
form~input:查询与form同级的所有input元素,是兄弟关系
*/
/*
alert($("form input").size());
alert($("form>input").size());
alert($("form+input").val());
alert($("form~input").size());
*/
/*
* :first:查询第一个元素
:last:查询最后个元素
:checked:查询选中的复选框
:not(:checked):查询未选中的复选框
:even:偶数
:odd:奇数
:eq():索引从0开始
:gt():大于索引号
:lt():小于索引号
:header:查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式
*/
/*
alert($("ul li:first").html());
alert($("ul>li:first").html());
alert($("ul li:last").html());
alert($("ul>li:last").html());
alert($("input:checked").size());
alert($("input:not(:checked)").size());
*/
//alert($("table tr:odd").size());
//alert($("table tr:even").size());
//alert($("table tr:eq(1)").html());
alert($("table tr:gt(0)").size());
alert($("table tr:lt(2)").size());
alert($(":header").size());
$(":header").css("background","coral");
</script>
</body>
</html>