JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器
1. 什么是jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#test”).html();
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码：
document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
//dom转化为JQUery对象 $(DOM对象)
var username = document.getElementById("username");
var $username = $(username);jQuery对象转成DOM对象两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
//JQUERY对象转化为DOM对象
//方法一：jquery对象是一个数组对象，获取利用索引值进行转换成DOM对象
var $username = $("#username");
// var username = $username[0];
// alert(username.value);
//方法二：在jquery中，提供了一个get(index)方法，get()中传入索引值，来进行转换成DOM对象
var username = $username.get(0);
alert(username.value); 2.选择器
（1）基本选择器
基本选择器是 jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用).
1、#id 用法:
$(”#myDiv”); 返回值
单个元素的组成的集合。 说明:这个就是直接选择html中的id=”myDiv”
2、Element 用法:
$(”div”) 返回值
集合元素。 说明:element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div,input,
a等等.
3、class 用法:
$(”.myClass”) 返回值
集合元素。 说明:这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
4、*
用法: $(”*”) 返回值 集合元素。说明:匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN 用法:$(”div,span,p.myClass”)
返回值 集合元素。说明:将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素pclass=”myClass”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
<input type="text" value="" name="username" id="username"/>
<div id="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span>
<span class="mini"> span
</span>
</body>
<script language="JavaScript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
//document.getElementById("b1").onclick = function(){}
$("#b1").click(function(){
/*
* css(name,value)
* * 改变标签的样式
* * name：属性名称，对应要到css帮助文档中查找对应的名称
* * value：属性的值
*/
$("#one").css("background","#0000FF");
});
//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
$("#b2").click(function(){
$("div").css("background","#00FFFF");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background","#FF0033");
});
//<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
$("#b4").click(function(){
$("*").css("background","#00FF33");
});
//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
$("#b5").click(function(){
//多个选择器并列使用，用","隔开
$("span,#two").css("background","#3399FF");
});
</script>
</html>
（2）层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器.
1 、ancestor descendant
用法:$(”form input”) ; 返回值 集合元素
说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent> child”区分开.
2、parent > child
用法: $(”form > input”) ; 返回值 集合元素
用法: $(”form > input”) ; 返回值 集合元素
说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
3、prev + next
用法:$(”label + input”) ; 返回值 集合元素
说明:匹配所有紧接在prev元素后的next元素
4、prev ~ siblings
用法:$(”form ~ input”) ; 返回值 集合元素
说明:匹配prev元素之后的所有siblings元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”)
选择器只能选择“# prev ”元素后面的同辈元素;而jQuery
中的方法siblings()与前后位置无关,只要是同辈节点就可以选取
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<div id="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span>
</body>
<script language="JavaScript">
//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
//祖先元素和后代元素的关系
$("body div").css("background","#0000FF");
});
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
$("#b2").click(function(){
//父元素和子元素的关系
$("body>div").css("background","#FF0033");
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background","#0000FF");
});
//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
$("#b4").click(function(){
//获取指定元素的后面所有兄弟元素
$("#two~div").css("background","#0000FF");
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
$("#b5").click(function(){
//获取指定元素的所有兄弟元素
$("#two").siblings("div").css("background","#0000FF");
});
</script>
</html>
（3）基础过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以
“:” 开头
1、:first
用法:$(”tr:first”) ; 返回值 单个元素的组成的集合
用法:$(”tr:first”) ; 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素
2、:last
用法:$(”tr:last”) 返回值 集合元素
用法:$(”tr:last”) 返回值 集合元素
说明: 匹配找到的最后一个元素.与:first 相对应.
3、:not(selector)
用法:$(”input:not(:checked)”)返回值 集合元素
用法:$(”input:not(:checked)”)返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even
用法:$(”tr:even”) 返回值 集合元素
用法:$(”tr:even”) 返回值 集合元素
说明:匹配所有索引值为偶数的元素，从 0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd
用法:$(”tr:odd”) 返回值 集合元素
用法:$(”tr:odd”) 返回值 集合元素
说明:匹配所有索引值为奇数的元素,和:even对应,从0 开始计数.
6、:eq(index)
用法:$(”tr:eq(0)”) 返回值 集合元素
用法:$(”tr:eq(0)”) 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
7、:gt(index)
用法:$(”tr:gt(0)”) 返回值 集合元素
用法:$(”tr:gt(0)”) 返回值 集合元素
说明: 匹配所有大于给定索引值的元素.
8、:lt(index)
用法:$(”tr:lt(2)”) 返回值 集合元素
用法:$(”tr:lt(2)”) 返回值 集合元素
说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法)
用法:$(”:header”).css(”background”,“#EEE”) 返回值 集合元素
用法:$(”:header”).css(”background”,“#EEE”) 返回值 集合元素
说明: 匹配如h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法) 返回值 集合元素
说明: 匹配所有正在执行动画效果的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<br>
<div id="mover" >
动画
</div>
<br>
</body>
<script language="JavaScript">
//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background","#0000FF");
});
//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background","#0000FF");
});
//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
$("#b3").click(function(){
//包含没有class属性的标签
$("div:not(.one)").css("background","#0000FF");
});
//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background","#0000FF");
});
//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background","#0000FF");
});
//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background","#0000FF");
});
//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background","#0000FF");
});
//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background","#0000FF");
});
//<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
$("#b9").click(function(){
$(":header").css("background","#0000FF");
});
//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/>
function mover(){
$("#mover").slideToggle("slow",mover);
}
mover();
$("#b10").click(function(){
$(":animated").css("background","#0000FF");
});
</script>
</html>
（4）内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text)
用法: $(”div:contains(’John’)”) 返回值 集合元素
用法: $(”div:contains(’John’)”) 返回值 集合元素
说明:匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty
用法: $(”td:empty”) 返回值 集合元素
用法: $(”td:empty”) 返回值 集合元素
说明:匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法:$(”div:has(p)”).addClass(”test”) 返回值 集合元素
说明:匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent
用法: $(”td:parent”) 返回值 集合元素
用法: $(”td:parent”) 返回值 集合元素
说明:匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one div
</div>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one">
</div>
<br>
<div id="mover" >
动画
</div>
<br>
</body>
<script language="JavaScript">
//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("div:contains('di')").css("background","#0000FF");
});
//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
$("#b2").click(function(){
$("div:empty").css("background","#0000FF");
});
//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
$("#b3").click(function(){
$("div:has(.mini)").css("background","#0000FF");
});
//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
$("#b4").click(function(){
$("div:parent").css("background","#0000FF");
});
//<input type="button" value=" 改变不含有文本 di 的 div 元素的背景色" id="b5"/>
$("#b5").click(function(){
$("div:not(:contains('di'))").css("background","#0000FF");
});
</script>
</html>
（5）可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden
用法: $(”tr:hidden”) 返回值 集合元素
用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素，input元素的type属性为“hidden”的话也会被匹配到.意思是css中display:none和inputtype=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”,点号”.”和逗号”,”的区别.
2、:visible
用法: $(”tr:visible”) 返回值 集合元素
用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one div
</div>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<div class="visible" >
这是隐藏的xx
</div>
<div class="one">
</div>
<br>
<div id="mover" >
动画
</div>
<br>
</body>
<script language="JavaScript">
//<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background","#0000FF");
});
//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/>
$("#b2").click(function(){
$("div:hidden").show().css("background","#0000FF");
});
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
/*
* <input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
*/
var $inputs = $("input:hidden");
// for(var i=0;i<$inputs.length;i++){
// var input = $inputs[i];
//
// alert(input.value);
// }
/*
* each(function(index,domEle){})
* * jquery中的普通遍历方法，需要jquery对象来调用
* * 回调函数：function(index,domEle){}
* * index：获取到的标签的索引值
* * domEle：dom对象
*/
$inputs.each(function(index,domEle){
//alert(domEle.value); //不一定行
//alert($(domEle).val());
//alert(this.value); //this代表的是domEle
alert($(this).val());
});
});
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
$("#b4").click(function(){
/*
* <input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
*/
var $inputs = $("input:hidden");
/*
* jquery.each(object,function(index,domEle){})
* * 全局遍历函数，不需要jquery对象来调用
* * object：要遍历的数组或对象
* * 回调函数：function(index,domEle){}
* * index：获取到的标签的索引值
* * domEle：dom对象
*/
$.each($inputs,function(index,domEle){
alert(domEle.value);
});
});
</script>
</html>
（6）属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute]
用法: $(”div[id]“) ; 返回值 集合元素
用法: $(”div[id]“) ; 返回值 集合元素
说明:匹配包含给定属性的元素.例子中是选取了所有带”id”属性的div标签.
2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明:匹配给定的属性是某个特定值的元素.例子中选取了所有name属性是newsletter的input元素.
3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明:匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.
4、[attribute^=value]
用法: $(”input[name^=‘news’]“) 返回值 集合元素
用法: $(”input[name^=‘news’]“) 返回值 集合元素
说明:匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
5、[attribute$=value]
用法: $(”input[name$=‘letter’]“) 返回值 集合元素
用法: $(”input[name$=‘letter’]“) 返回值 集合元素
说明:匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value]
用法: $(”input[name*=‘man’]“) 返回值 集合元素
用法: $(”input[name*=‘man’]“) 返回值 集合元素
说明:匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
说明:复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有id属性,并且它的name属性是以man结尾的元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 含有属性title 的div元素" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/>
<input type="button" value="属性title值 含有es的div元素." id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one div
</div>
<div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div>
<div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<div class="visible" >
这是隐藏的
</div>
<div class="one">
</div>
<br>
<div id="mover" >
动画
</div>
<br>
</body>
<script language="JavaScript">
//<input type="button" value=" 含有属性title 的div元素" id="b1"/>
$("#b1").click(function(){
$("div[title]").css("background","#0000FF");
});
//<input type="button" value=" 属性title值等于test的div元素" id="b2"/>
$("#b2").click(function(){
$("div[title=test]").css("background","#0000FF");
});
//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
$("#b3").click(function(){
$("div[title!=test]").css("background","#0000FF");
});
//<input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/>
$("#b4").click(function(){
$("div[title^=te]").css("background","#0000FF");
});
//<input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/>
$("#b5").click(function(){
$("div[title$=est]").css("background","#0000FF");
});
//<input type="button" value="属性title值 含有es的div元素." id="b6"/>
$("#b6").click(function(){
$("div[title*=es]").css("background","#0000FF");
});
//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
$("#b7").click(function(){
//多个属性过滤选择器并列使用，就这样并列放置就OK
$("div[id][title*=es]").css("background","#0000FF");
});
</script>
</html>
（7）子元素过滤选择器
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”) 返回值 集合元素
用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明:匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的eq()有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child
用法: $(”ul li:first-child”) 返回值 集合元素
用法: $(”ul li:first-child”) 返回值 集合元素
说明:匹配第一个子元素.’:first’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child
用法: $(”ul li:last-child”) 返回值 集合元素
用法: $(”ul li:last-child”) 返回值 集合元素
说明:匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child
用法: $(”ul li:only-child”) 返回值 集合元素
用法: $(”ul li:only-child”) 返回值 集合元素
说明:如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one div
</div>
<div id="one" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test">
<div class="mini" >class是 mini******</div>
</div>
<div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02" (**************
<div class="mini01" >class是 mini01</div>
<div class="mini" >cdddddddlass是 mini</div>
</div>
<div class="visible" >
这是隐藏的
</div>
<div class="one">
</div>
<br>
<div id="mover" >
动画
</div>
<br>
</body>
<script language="JavaScript">
//<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
$("#b1").click(function(){
/*
* * :nth-child()子元素过滤选择器，使用时需在其前面增加空格
* * :nth-child()子元素过滤选择器，其索引值是从"1"开始
*/
$("div[class=one] :nth-child(2)").css("background","#0000FF");
});
//<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
$("#b2").click(function(){
$("div[class=one] :first-child").css("background","#0000FF");
});
//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
$("#b3").click(function(){
$("div[class=one] :last-child").css("background","#0000FF");
});
//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/>
$("#b4").click(function(){
$("div[class=one] :only-child").css("background","#0000FF");
});
</script>
</html>
（8）表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
1、:enabled
用法: $(”input:enabled”) 返回值 集合元素
用法: $(”input:enabled”) 返回值 集合元素
说明:匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled
用法: $(”input:disabled”) 返回值 集合元素
用法: $(”input:disabled”) 返回值 集合元素
说明:匹配所有不可用元素.与上面的那个是相对应的.
3、:checked
用法: $(”input:checked”) 返回值 集合元素
用法: $(”input:checked”) 返回值 集合元素
说明:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
4、:selected
用法: $(”select option:selected”) 返回值 集合元素
用法: $(”select option:selected”) 返回值 集合元素
说明:匹配所有选中的option元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
</body>
<script language="JavaScript">
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
/*
* <input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
*/
$("input[type=text]:enabled").val("xxx");
});
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
$("input[type=text]:disabled").val("xxx");
});
//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
/*
* <input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
*/
alert($("input[type=checkbox]:checked").length);
});
//<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
$("#b4").click(function(){
/*
* <select name="job" id="job" multiple="multiple" size=4>
<option >程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
*/
$("select option:selected").each(function(index,domEle){
alert($(domEle).text());
});
});
</script>
</html>（9）表单选择器
1、:input
用法:$(”:input”) ; 返回值 集合元素
用法:$(”:input”) ; 返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素
2、:text
用法:$(”:text”) ; 返回值 集合元素
用法:$(”:text”) ; 返回值 集合元素
说明: 匹配所有的单行文本框.
3、:password
用法:$(”:password”) ; 返回值 集合元素
用法:$(”:password”) ; 返回值 集合元素
说明: 匹配所有密码框.
4、:radio
用法:$(”:radio”) ; 返回值 集合元素
用法:$(”:radio”) ; 返回值 集合元素
说明: 匹配所有单选按钮.
5、:checkbox
用法:$(”:checkbox”) ; 返回值 集合元素
用法:$(”:checkbox”) ; 返回值 集合元素
说明: 匹配所有复选框
6、:submit用法:$(”:submit”) ; 返回值 集合元素
7、:image
用法:$(”:image”) 返回值 集合元素
用法:$(”:image”) 返回值 集合元素
说明: 匹配所有图像域.
8、:reset
用法:$(”:reset”) ; 返回值 集合元素
用法:$(”:reset”) ; 返回值 集合元素
说明: 匹配所有重置按钮.
9、:button
用法:$(”:button”) ; 返回值 集合元素
用法:$(”:button”) ; 返回值 集合元素
说明: 匹配所有按钮.这个包括直接写的元素button.
10、:file
用法:$(”:file”) ; 返回值 集合元素
用法:$(”:file”) ; 返回值 集合元素
说明: 匹配所有文件域.
11、:hidden
用法:$(”input:hidden”) ; 返回值 集合元素
用法:$(”input:hidden”) ; 返回值 集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=":input" id="b1"/>
<input type="button" value=":text" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br>
<input type="radio" name="sex" value="男" checked="checked" >男
<input type="radio" name="sex" value="女" >女
<br>
<select name="job" id="job" multiple="multiple" size=4>
<option value="程序员" selected="selected" >程序员</option>
<option value="中级程序员" >中级程序员</option>
<option value="高级程序员">高级程序员</option>
<option value="系统分析师">系统分析师</option>
</select>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="大专">大专</option>
</select>
<textarea cols=4 rows=4>textarea</textarea>
<button value="确定">确定</button>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
</body>
<script language="JavaScript">
//<input type="button" value=":input" id="b1"/>
$("#b1").click(function(){
$(":input").each(function(index,domEle){
alert($(domEle).val());
});
});
</script>
</html>
