选择器
作用: 用来选择标签的
jQuery中的选择器借鉴了CSS中选择器的思想,CSS中选择器选择出标签以后只能给标签加样式,而jQuery中的选择器选择出标签(或元素)后可以做任意操作。
基本选择器 Basic
1.id选择器
根据一个给定的id匹配一个元素,$(“#myDiv”)选取id为myDiv的元素。
演示:
<script src="../../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#div1").css("background-color","yellow");
});
});
</script>
html代码:
<div class="myClass" id="div1">
我是div1
</div>
<div id="div2">
我是div2
</div>
<span class="myClass" id="span1">
我是span1
</span>
2.标签选择器
$(function(){
$("div").css("background-color","yellow");
});
3.类选择器
$(function(){
$(".myClass").css("background-color","yellow");
});
4.组合选择器
$(function(){
$("div,span").css("background-color","yellow");
});
5.通配符选择器
$(function(){
$("*").css("background-color","yellow");
});
层次选择器 level
1.子级(子代选择器和后代选择器)
html代码:
<div id ="div1">
我是div1
<div id="div2">
我是div2
<span>我是span1</span>
<p>我是p1</p>
</div>
<span id="span2">
我是span2
</span>
<div id ="div3">
我是div3
</div>
</div>
js代码:子代选择器
$(function () {
$("#div1>span").css("background-color","yellow");
});
js代码:后代选择器
$(function () {
$("#div1 span").css("background-color","yellow");
});
2.同级(下一个和下面所有,上一个和上面所有)
js代码:下一个和下面所有
$(function() {
//下一个
alert($("#div1").next().html());
var $obj = $("#div1").nextAll();
//下面所有,循环遍历需要each()方法
// alert($("#div1").nextAll().html());
// $obj.each(
// function () {
// alert($(this).html());
// }
// );
});
js代码:上一个和上面所有
$(function() {
//上一个
alert($("#div2").prev().html());
// alert($("#div2-sibling").html());
//上面所有
// var $obj = $("#span1").prevAll();
// //上面所有,循环遍历需要each()方法
// $obj.each(
// function () {
// alert($(this).html());
// }
// );
});
js代码:得到同级的所有兄弟
$(function () {
// alert($("#div1").siblings().html());
//each
$("#div1").siblings().each(function () {
alert($(this).html());
})
});
过滤选择器filter(6个)
一、基本过滤10个
- 得到第一个元素
- 得到最后一个元素
- 去除所有与给定选择器匹配的元素
- 匹配一个给定索引值的元素
- 匹配所有小于给定索引值的元素
- 匹配所有索引值为奇数的元素,从0开始计数
- 匹配所有索引值为偶数的元素,从0开始计数
- 匹配所有大于给定元素值的元素
- 匹配如h1~h6的标题元素
- 匹配有动画的元素
1.$("tr:first")
2.$("tr:last")
3.$("input:not(:checked)")
4.$("tr:eq(1)")
5.$("tr:lt(2)")
6.$("tr:odd")
7.$("tr:even")
8.$("tr:gt(0)")
9.$(":header")
10.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("div:not(:animated)").animate({left:"+=800"},3000);
});
$("#btn2").click(function () {
$("div:animated").stop();
});
}) ;
</script>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: yellow;
position: relative;
}
#div1:hover{
width:300px;
height:300px;
left:20px;
top:20px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<input type="button" id="btn1" name="btn1" value="点我让div1动起来"/>
<input type="button" id="btn2" name="btn2" value="点我停止动画"/>
</body>
</html>
二、内容过滤4个
- 匹配保函给顶文本的元素
- 匹配含有选择器所匹配的元素的元素
- 匹配含有子元素或者文本的元素
- 匹配所有不包含子元素或者文本的空元素
1.$("div:contains('John')")
2.$("div:has(p)")
3.$("td:parent")
4.$("td:empty")
三、可见性过滤2个
- 匹配所有的不可见元素
- 匹配所有的可见元素
1.$(function () {
//获得html中隐藏的input隐藏域的value
alert($("input:hidden").attr("value"));
});
// $("tr:hidden")
2.$("tr:visible")
四、属性过滤7个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//查找所有含有 id 属性的 div 元素
$("div[id]")
//匹配给定的属性是某个特定值的元素
$("input[name='newsletter']").attr("checked", true);
//匹配所有含有指定的属性,但属性不等于特定值的元素。
$("input[name!='newsletter']").attr("checked", true);
//匹配给定的属性是以某些值开始的元素
$("input[name^='news']")
//匹配给定的属性是以某些值结尾的元素
$("input[name$='letter']")
//匹配给定的属性是以包含某些值的元素
$("input[name*='man']")
//复合属性选择器,需要同时满足多个条件时使用。
$("input[id][name$='man']")
</script>
</head>
<body>
</body>
</html>
五、子元素过滤4个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//匹配其父元素下的第N个子或奇偶元素
$("ul li:nth-child(2)")
//匹配第一个子元素
$("ul li:first-child")
//匹配最后一个子元素
$("ul li:last-child")
//如果某个元素是父元素中唯一的子元素,那将会被匹配
$("ul li:only-child")
</script>
</head>
<body>
</body>
</html>
六、表单对象属性过滤4个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//匹配所有可用元素
$("input:enabled")
//匹配所有不可用元素
$("input:disabled")
//匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$("input:checked")
//匹配所有选中的option元素
$("select option:selected")
</script>
</head>
<body>
</body>
</html>
表格隔行换色jQuery实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$(".tableClass tbody tr:even").css("background-color","yellow");//偶数
$(".tableClass tbody tr:odd").css("background-color","blue");//奇数
})
</script>
</head>
<body>
<table class="tableClass">
<tr class="tableHead">
<th>商品编号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>商品种类</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Macbook air</td>
<td>苹果轻薄笔记本</td>
<td>笔记本</td>
</tr>
<tr class="winBlue">
<td>2</td>
<td>iPad air2</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
</tr>
<tr>
<td>3</td>
<td>iphone6 plus</td>
<td>苹果最新手机</td>
<td>手机</td>
</tr>
</tbody>
</table>
</body>
</html>
补充:each()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//不用each是 CoffeeMilkSoda
// document.write($("li").text() + "<br/>");
// $("li").each(function () {
// document.write($(this).text()+"<br/>");
// })
//不用each,太复杂
// var $obj = $("ul>li");
// for(var i in $obj){
// if($obj[i] instanceof HTMLLIElement){
// document.write($obj[i].innerHTML+"<br/>");
// }
// }
});
</script>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>