文章目录
1.概述
我们学习jQuery，主要是学习jQuery中的方法，来简化js开发。因此，学习jQuery主要是学习jQuery对象的各种方法，但前提是要先获取jQuery对象，即操作必先选中（获取），一切从选择器开始！
如何选中元素？
语法：$(selector)
补充：context可选的，如果指定，就会在指定的元素下查找。默认值：document.
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM、Ajax等各种操作都依赖于选择器。
选择器的语法可参考官方手册的选择器章节，如下图所示
jQuery内部提供了三大类共9种选择器
- 基本选择器
- 层级选择器
- 过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器
过滤选择器一般用于对其他选择器的补充（缩小选择范围）
2.基本选择器：第1大类
基本选择器，是jQuery所有选择器的基础，通过元素的id属性、class属性、标签名称进行选择。
基本选择器的语法和用法：
- #id（id选择器）根据id属性查找一个元素例如：$("#mydiv")
- element（标签选择器） 根据元素标签名称查找所有元素，例如： $(“div”);
- .class（类选择器） 根据class属性查找元素，例如：
$(".myclass");原理是遍历所有的DOM节点，然后逐个判断是否使用了
指定的类选择器，可以想象，如果页面上节点很多的情况下，效率很低，因此类选择器通常和标签选择器同时使用，
例如：$("div.myclass")，意思是获取所有使用了.myclass类的div元素，这样，jQuery会先找页面中的所有div，然后再遍历判断，大大减少了循环次数，从而提高了查询效率！ - selector1,selector2,selectorN（组合选择，多选，混用选择器）将每一个选择器匹配到的元素合并后一起返回
例如：$("#myinput,div,p.pClass");意思是获取页面中ID为myinput的元素和所有的div元素和使用了.pClass的p元素
此种方式获取的是所有匹配元素的并集 *匹配所有元素 例如 $("*"); 意义不大！
【示例】
<div>DIVAAAA</div>
<div class="demo">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="demo">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="demo">PBBBB</p>
<p>PCCCC</p>
需求：
获取页面中ID为foo的元素的内容
通过each()遍历所有div，在每个div元素前 加入"hello"
通过size() 或 length 打印页面中 class属性为 demo 的元素数量
获取class属性为demo的div的个数
相关函数参考文档：一定要自己点进去看看，里面有例子
脚本代码：
<script type="text/javascript">
jQuery(function($) {
//获取页面中ID为foo的元素的内容
//alert( $("#foo").html() );
//通过each()遍历所有div，在每个div元素前 加入"hello"
// each中的函数中的i表示div的索引，o表示当前div对象：DOM对象！DOM对象！DOM对象！
/* $("div").each(function(i, o) {
// this === o 表示当前DOM对象
var newHTML = "hello" + $(this).html();
$(this).html(newHTML);
}); */
//$("div").prepend("hello");
//$("div").append("world");
//通过size() 或 length 打印页面中 class属性为 demo 的元素数量
alert( $(".demo").size() );
alert( $(".demo").length );
//获取class属性为demo的div的个数
alert( $("div.demo").length );
});
</script>
3.层次选择器：第2大类
层次选择器是根据DOM元素的层级关系进行选择。
参考文档：
DOM元素层级的位置关系：
ancestor 祖先元素（父亲、爷爷、。。。。）
descendant 后代元素（儿子、孙子。。。。）
parent 父元素
child 子元素
prev 上一个元素
next 下一个元素
siblings 兄弟（平级的）元素
注意：每个单词都代表任意选择器！
例如，有如下html代码：
<form id="myform">
<label>Name:</label>
<div></div>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
则：
ancestor空格descendant $("form input") 获取form元素中的input元素（儿子、孙子。。。）。
parent > child $("form>input") 获取form元素中的input元素（只有儿子）。
prev + next $("label+input") 获取匹配的每个label元素后面紧跟着的一个兄弟元素input，如果后面一个元素不是input,则不会继续查询同级的下一个input 。
prev ~ siblings $("form~input") 获取所有form元素后面的所有兄弟(平级)元素。
【需求练习】：
将class属性值为demo的元素下所有a元素字体变为红色
将class属性值为demo的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为绿色，大小变为30px
将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的
【示例代码】
<div class="demo">
<a>div link</a>
<p>
info <a>p link</a>
</p>
</div>
<a>link</a>
<p class="demo">
<a>p link</a>
</p>
<a>link</a>
使用jQuery改变元素的css样式，参考如下文档
脚本代码：
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//将class属性值为demo的元素下所有a元素字体变为红色
$(".demo a").css("color", "red");
//将class属性值为demo的元素下直接a元素字体变为蓝色
$(".demo > a").css("color", "blue");
//将div元素后所有兄弟a元素，字体变为绿色，大小变为30px
$("div~a").css({
color: "green",
//"font-size": 30, // 默认单位为px
// 样式属性可以使用驼峰名法来书写：连字符去掉，然后连字符后的每个单词的首字母大写
fontSize: "50px"
});
//将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的。
$("div+a").css("backgroundColor", "gray");
// 获取指定的样式属性
//alert( $("div+a").css("backgroundColor") );
});
</script>
【相关函数的使用】
css()函数设置css样式的两种用法：
设置一个样式用：css("属性名", "属性值")
设置多个样式用：css({"属性名1": "属性值1","属性名1": "属性值1"…})
只能获取匹配元素中的第一个元素的样式值
css()函数获取css样式：
css(“属性名”)
4.过滤选择器：第3大类(共7小类)
作用：过滤选择器通常是对基本选择器和层次选择器的结果进行过滤（缩小选择范围）。
也可以单独使用（不推荐，对整个document文档进行过滤）。
过滤选择器基本语法：通过":条件" 进行过滤，例如：
("div:first") 匹配第一个div元素
("div:last") 匹配最后一个div元素
解释如下：
$(“div”)是获取所有div，加上过滤条件":first"就表示第一个div，加上":last"就表示最后一个div
按照不同的过滤规则，过滤选择器被分为七类
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器
4.1.基本过滤选择器
基本选择器可以通过元素的索引、位置(特殊索引)和特殊性来过滤，因此可以分为三类：
- 根据索引(从0开始)来缩小范围
:eq(index) 选取指定索引的元素，例如$("tr:eq(0)")：第一个tr,$("tr:eq(-1)")最后一个tr!
:gt(index) 选取索引大于指定索引的元素，例如$("tr:gt(1)")：索引大于1的tr，即第2个tr之后的tr
:lt(index) 选取索引小于指定索引的元素，例如$("tr:lt(3)")：索引小于3的tr，即前3个tr(0,1,2)
- 根据位置(特殊索引)来缩小范围
:first 第一个位置，例如$("tr:first")：第一个tr,相当于eq(0)
:last 最后一个位置，例如$("tr:last")：最后一个tr 相当于eq(-1) -1表示从最后一个开始算
:odd 索引为奇数位置，例如$("tr:odd")：奇数索引行(1,3,5,7,9...) 实际匹配偶数行
:even 索引为偶数位置，例如$("tr:even")：偶数索引行(0,2,4,6,8,10...) 实际匹配奇数行
- 根据元素的特殊性来缩小范围
:not(selector) 去除与给定选择器匹配的元素，例如$("tr:not(:first)")，所有tr（第一个除外）
:header 匹配所有的标题元素，即h1到h6,实际上能够匹配h7,h8....hn
:animated 匹配所有正在执行动画效果的元素
:focus 当前获取焦点的元素
穿插讲解jQuery的动画效果，参考API：
参数说明：
s(speed) 动画的速度，即时间，预置3个速度："slow"600毫秒、"normal"400毫秒和"fast"200毫秒或直接指定毫秒数
e(easing) 动画的切换效果，默认是"swing"，可用参数"linear"，swing的切换过程为"缓-急-缓"，动画效果更加生动，而linear是匀速切换
fn(function) 动画执行完之后要执行的函数
o(opacity) 透明度，0~1之间的数字，0表示透明，1表示不透明，数字越小，透明度越高。
p(properties) 作为css样式属性的"key/value对"对象
d(delay) 同一个元素的下一个动画的延迟时间，例如，某元素用了1秒隐藏，3秒后再在2秒内显示
基本
show([speed,[easing],[function]]) 显示隐藏的匹配元素。$("div").show(600);
hide([speed,[easing],[function]]) 隐藏显示的匹配元素。$("div").hide();
toggle([speed,[easing],[function]]) 切换元素的显示和隐藏：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
如果不指定speed，则立即显示或隐藏
滑动
slideDown([speed], [easing], [function]) 通过高度的变化（向下增大）来动态地显示所有匹配的元素。
slideUp([speed], [easing], [function]) 通过高度的变化（向上减小）来动态地隐藏所有匹配的元素。
slideToggle([speed], [easing], [function]) 切换元素的显示和隐藏：通过高度变化来切换所有匹配元素的可见性。
如果speed不指定，默认值是"slow"600毫秒
淡入淡出
fadeIn([speed], [easing], [function]) 通过透明度的变化来实现所有匹配元素的淡入效果。
fadeOut([speed], [easing], [function]) 通过透明度的变化来实现所有匹配元素的淡出效果。
fadeTo([speed], opacity, [easing], [function]) 把所有匹配元素的透明度以渐变的方式调整到指定的透明度。
fadeToggle([speed], [easing], [function]) 通过透明度的变化来切换所有匹配元素的淡入和淡出效果。
如果speed不指定，默认值是"slow"600毫秒
自定义动画
animate(properties,[speed], [easing], [function])
用于创建自定义动画的函数。这个函数的关键在于指定样式属性的结果。这个对象中每个属性都表示一个可以变化的样式属性（如"height"、"top"或"opacity"）。注意：所有指定的属性必须用驼峰命名形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。
如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默认的动画形式。
stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画，如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
clearQueue：true或false，默认false，如果为true，则清空队列，并立即结束动画。
jumpToEnd：true或false，默认false，如果为true，则当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的动画，例如在slideUp() 和 fadeIn()两个动画之间延时1000毫秒：
$('#foo').slideUp().delay(1000).fadeIn(); // 链式编程，方法调用之后返回的还是原来的jQuery对象，可以继续调用其他方法
设置
$.fx.off 关闭页面上所有的动画。把这个属性设置为true，所有效果会立即执行完毕。
$.fx.interval 设置动画的显示帧速。所谓动画，就是从一个状态慢慢的切换成另一个状态，而每次切换的时间间隔，就称之为帧速，单位是毫秒，而每秒切换的次数，称为帧数，帧速越快(时间短)帧数越高，反之越低。
【示例练习】
<h1>表格信息</h1>
<h2>这是一张商品表</h2>
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px">
<tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr>
<tr><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr>
<tr><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr>
<tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table><br/>
<div style="border:1px solid black;">
<b>slideDown(speed, [callback]) 概述</b><br/>
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。<br/>
这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式显示出来。在jQuery1.3中，<br/>
上下的padding和margin也会有动画，效果更流畅。 参数speedString,Number三种预定速度之一的字符串<br/>
("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)<br/>
callback (可选)FunctionFunction在动画完成时执行的函数<br/>
</div><br/>
<div style="border:1px solid black;">
<b>fadeOut(speed, [callback]) 概述</b><br/>
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。<br/>
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数<br/>
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")<br/>
或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数<br/>
</div>
【需求】
设置表格第一行，字体颜色为红色，大小为20px
设置表格除标题行和第一行以外，字体颜色为蓝色，大小为20px
设置表格奇数行，背景色为橙色
设置表格偶数行，背景色为绿色
设置所有标题，字体显示为紫色
动画效果演示
让所有div立即隐藏
让第一个div在1秒内显示出来
2秒内让隐藏的div显示，显示的div隐藏
3秒内让隐藏的div滑动显示，显示的div滑动隐藏
4秒内让隐藏的div淡入，显示的div淡出
5秒内同时让显示的div高度增加100px，宽度减小到80%，字体大小改成20px，动画完成之后延迟3秒，
再把这个div在6秒内还原回去！还原完成后，给这个div添加单击事件："让隐藏的div在3秒内匀速显示出来，
设置正在执行动画的元素的背景为粉色，不执行动画的元素背景为橙色"。
脚本代码：
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//设置表格第一行，字体颜色为红色，大小为20px
//$("tr:first")
$("tr:eq(0)").css({
"color": "red",
fontSize: 20
});
//设置表格除标题行和第一行以外，字体颜色为蓝色，大小为20px
$("tr:gt(1)").css({
"color": "blue",
fontSize: 20
});
//设置表格奇数行，背景色为橙色
$("tr:even").css("backgroundColor", "orange");
//设置表格偶数行，背景色为绿色
$("tr:odd").css("backgroundColor", "green");
//设置所有标题，字体显示为紫色h1-hn
$(":header").css("color", "red");
//让所有div立即隐藏
//$("div").hide();
//让第一个div在1秒内显示出来
//$("div:first").show(1000);
//2秒内让隐藏的div显示，显示的div隐藏
//$("div").toggle(2000);
//3秒内让隐藏的div滑动显示，显示的div滑动隐藏
//$("div").slideToggle(3000);
//4秒内让隐藏的div淡入，显示的div淡出
//$("div").fadeToggle(3000);
/*使用自定义动画：animate(properties,[speed], [easing], [function])：
5秒内同时让显示的div高度增加100px，宽度减小到80%，字体大小改成20px，动画完成之后延迟3秒，
再把这个div在6秒内还原回去！还原完成后，给这个div添加单击事件："让第一个div在3秒内匀速隐藏，
设置正在执行动画的元素的背景为粉色，不执行动画的元素背景为橙色"*/
/*
$("div:last").animate({
height: "+=100px",
width: "80%",
fontSize: 20
}, 3000)
// 延迟3秒
.delay(3000)
// 下一个动画
.animate({
height: "-=100px",
width: "100%",
fontSize: "1em" // 元素的字体大小，如果大小为13px，则1em=13px,如果为20px，则1em为20px
}, 3000, function() {
$(this).click(function() {
$("div:first").hide(3000, "linear");
$("div:animated").css("backgroundColor", "pink");
$("div:not(:animated)").css("backgroundColor", "orange");
});
})
;
*/
//$.fx.off = true; // 关闭动画
//$.fx.interval = 500; // 设置切换的速度，值越小，动画效果越流畅
});
</script>
4.2.内容过滤选择器
该选择器是根据元素中是否包含指定的内容来过滤的。
参考API：
:contains(text) 过滤含有给定文本的元素，例如$("div:contains(Jack)")，$("p:contains(hello)")
:empty 过滤不包含子元素或文本的空元素，例如$("td:empty")，$("div:empty")<td></td><div></div>
:has(selector) 过滤含有指定选择器匹配的元素的元素，例如$("div:has(p)")，$("td:has(div.myClass)")
:parent 过滤含有子元素或文本的非空元素，和:empty相反
【示例练习】
<div>今天是个晴天</div>
<div>明天要去学 java</div>
<div><span>JavaScript</span> 是网页开发中脚本技术</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div><p>jQuery</p>是 JavaScript一个 轻量级框架</div>
<div></div>
【需求】
设置含有文本内容"java" 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 "这是一个空DIV"
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素或文本的span元素的字体为蓝色
【脚本代码】
<script type="text/javascript">
jQuery(function($) {
//设置含有文本内容"java" 的 div 的字体颜色为红色
$("div:contains(java)").css("color", "red");
//设置没有子元素的div元素 文本内容 "这是一个空DIV"
$("div:empty").html("这是一个空DIV");
//设置包含p元素 的 div 背景色为黄色
$("div:has(p)").css("background-color", "yellow");
//设置所有含有子元素或文本的span元素的字体为蓝色
//$("span:parent")
$("span:not(:empty)")
.css({
color: "blue",
"border": "1px solid red",
display: "block", // 让span变成块元素
width: 100,
height: 30
});
});
</script>
注意：内容过滤选择器的原理先找到所有的元素，然后再判断元素中是否包含指定的内容，
因此在效率上偏低！因此通常和基本的选择器一起使用来提高查询效率
4.3.可见性过滤选择器
该选择器是根据元素的可见性(显示或隐藏)来过滤的，其中隐藏有两种形式
一种不占位置(完全隐藏)，另一种虽然也是隐藏的，但元素的位置还占着，没有完全隐藏
参考API：
:hidden 完全隐藏的元素
:visible 看得见的和不完全隐藏的元素，和:hidden相反
【预备知识】
<div>AAAAAAAAAAAAAAAAAAAA</div>
<div style="display:none;">BBBBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCCCC</div>
<div style="visibility:hidden;">DDDDDDDDDDDDDDDDDDDD</div>
<div>EEEEEEEEEEEEEEEEEEEE</div>
显示效果如下：
【示例练习】
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px">
<tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr>
<tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr>
<tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr>
<tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />
【需求】
设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行
设置table所有"完全隐藏的行"字体为红色，并显示隐藏的行
设置隐藏域的值为hello，并输出隐藏域中的值
【脚本代码】
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*页面加载完成事件：相当于jQuery(document).ready(fn);****/
jQuery(function($) {
//设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行
$("table tr:visible") // 匹配看得见的和不完全因此的元素
.css("background", "gray")
// .show() // 将元素的display属性修改为默认值
.css("visibility", "visible")
;
//设置table所有"完全隐藏的行"字体为红色，并显示完全隐藏的行
$("table>tbody>tr:hidden").css("color", "red").show();
//设置隐藏域的值为hello，并输出隐藏域中的值
// 隐藏域不可以通过设置display属性让其显示，隐藏域永远是完全隐藏的！
alert( $("input:hidden").val("hello").show().val() );
});
</script>
</head>
<body>
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px">
<tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr>
<tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr>
<tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr>
<tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />
<!-- <div>11</div>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">1</span>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">2</span> -->
</body>
</html>
4.4.属性过滤选择器
该选择器是通过元素的属性来过滤选的。
参考API：
[attribute] 过滤拥有指定属性的元素，例如：$("input[name]") 拥有name属性的input元素<input name />
[attribute=value] 过滤指定属性的值为value的元素，例如：$("input[name=username]") name属性为username的input元素<input name="username" />
[attribute!=value] 过滤指定属性的值不为value的元素，例如：$("input[value!=张三]")
[attribute^=value] 过滤指定属性的值以value开始的元素，例如：$("input[name^=myClass]") myClass myClassasdfsadfs 匹配不到a1myClass123
[attribute$=value] 过滤指定属性的值以value结束的元素，例如：$("input[name$=myClass]") myClass hhmyClass 匹配不到a myClassb
[attribute*=value] 过滤指定属性的值包含value的元素，例如：$("input[class*=myClass]") myClass aaaamyClass111 amyClass myC5lassb
[attrSel1] [attrSel2]... 过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合，例如：$("input[name=username][value!=张三]...")
注意：如果属性的值中包含特殊字符，使用单引号将值引起来，如果没有特殊字符，也可以使用单引(保险写法！)
【示例练习】
<div>AAAA</div>
<div id="mydiv" class="demo1 a b">BBBB</div>
<div class="demo2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="demo3">FFFF</div>
<p class="p-demo">PPPPPP</p>
<input type="text" name="username"/>
【需求】
设置所有含有id属性的div字体颜色为红色
class属性中含有demo的元素背景为金色
对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容
给name属性是username的input输入框中设置一个值"zhangsan"
【脚本代码】
<script type="text/javascript">
jQuery(function($) {
//设置所有含有id属性的div字体颜色为红色
$("div[id]").css("color", "red");
//设置所有class属性中含有demo的元素背景为金色
$("[class*=demo]").css("background-color", "blue");
//对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容
$("div[id][class]").click(function() {
alert( $(this).html() );
});
//给name属性是username的input输入框中设置一个值"zhangsan"
$("input[name=username]").val("zhangsan");
// 属性中如果包含空格等特殊符号，需要使用单引号
$("div[class='demo1 a b']").css("fontSize", 100);
});
</script>
4.5.子元素过滤选择器
该选择器是对某元素中的子元素进行过滤的。
参考API：
:nth-child(index/odd/even) 主要是对元素所在的索引进行过滤，如索引为index、偶数even或奇数odd的元素，索引从1开始，
而前面讲的基本过滤中的如eq(index)中的索引是从0开始的。
还可以过滤更为复杂的索引，
如索引为3的整数倍：3n，匹配的索引如3、6、9、12等；:nth-child(3n)
索引为3的整数倍+2：3n+2，匹配的索引如2、5、11、14等。
:first-child 每个父元素的第一个子元素，结果可能是多个, $("td:first-child") $("td:first")结果只有一个
:last-child 每个父元素的最后一个子元素
:only-child 唯一的子元素，它的父元素中只有这一个子元素
注意：该选择器的实现原理是先找到所有要过滤的元素的父元素，然后再在每一个父元素中找要过滤的子元素。而基本过滤选择器的实现原理是直接对结果集进行过滤，
例如：$("td:first")是基本过滤，直接对td进行过滤，因此最多匹配一个td；而$(“td:first-child”)会先找所有td的父元素tr，然后再在每个tr中找第一个td，结果可能不止一个！
请看如下示例：
【示例练习】
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table border="1" width="300" id="mytable">
<tr><td width="80px">1</td><td>冰箱</td><td>¥999</td></tr>
<tr><td>2</td><td>洗衣机</td><td>¥999</td></tr>
<tr><td>3</td><td>热水器</td><td>¥999</td></tr>
<tr><td>4</td><td>电饭锅</td><td>¥999</td></tr>
<tr><td>5</td><td>电磁炉</td><td>¥999</td></tr>
<tr><td>6</td><td>豆浆机</td><td>¥999</td></tr>
<tr><td>7</td><td>微波炉</td><td>¥999</td></tr>
<tr><td colspan="3">8 电视 ¥999</td></tr>
<tr><td colspan="3">9 空调 ¥999</td></tr>
<tr><td>10</td><td>收音机</td><td>¥999</td></tr>
<tr><td>11</td><td>排油烟机</td><td>¥999</td></tr>
<tr><td>12</td><td>加湿器</td><td>¥999</td></tr>
<tr><td colspan="3">13 电暖气 ¥999</td></tr>
</table>
【需求】
设置表格中索引为3的倍数的行，字体颜色为红色
设置表格中奇数行背景为黄色，偶数行背景为灰色
设置表格中第一列的字体居中显示，除了最后一行
设置除了只有一列的行的字体居中显示
【脚本代码】
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//设置表格中索引为3的倍数的行，字体颜色为红色
//$("tr:nth-child(3n)").css("color", "red");
//设置表格中奇数行背景为黄色，偶数行背景为灰色
$("tr:nth-child(odd)").css("background", "yellow");
$("tr:nth-child(even)").css("background", "gray");
//设置表格中第一列的字体居中显示，除了最后一行
//$("td:first-child:not(:last)").css("text-align", "center");
$("tr:not(:last) td:first-child").css("text-align", "center");
//设置除了只有一列的行的字体居中显示
$("td:not(:only-child)").css("color", "red");
});
</script>
4.6.表单元素(有value属性的元素)过滤选择器
该选择器是根据表单元素的类型来过滤的。
参考API：
:input 所有的input、textarea、select和button元素等所有表单元素
:text 文本框<input />、<input type="text" />
:password 密码框<input type="password" />
:radio 单选框<input type="radio" />
:checkbox 多选框<input type="checkbox" />
:image 图像按钮<input type="image" src="…" />，不包含<img>标签
:button 按钮<input type="button" value="abc" />、<button type="submit">abc</button>这里的内容相当于input按钮的value值</botton>
:file 文件<input type="file" />
:hidden 隐藏域<input type="hidden" />和所有完全隐藏(display:none)的元素
:submit 提交按钮<input type="submit" />
:reset 重置按钮<input type="reset" /> 重置按钮是将表单恢复到最初的状态（并不意味着所有的输入框都是空值）
提示：该选择器可以使用属性选择器来代替，比如选择页面中所有的复选框，可以使用
$("input[type=checkbox]")，等价于$(":checkbox")
【示例练习】
<form action="regist" method="post" id="myform">
<table border="1" style="border-collapse:collapse;">
<tr height="26px">
<td align="right" width="150px">用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr height="26px">
<td align="right">密码</td>
<td><input type="password" name="password" /></td>
</tr>
<tr height="26px">
<td align="right">性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr height="26px">
<td align="right">城市</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</td>
</tr>
<tr height="88px">
<td align="right">个人简介</td>
<td>
<textarea rows="5" cols="60" name="introduce"></textarea>
</td>
</tr>
<tr height="26px">
<td align="right" colspan="2">
<input type="button" value="提交" />
</td>
</tr>
</table>
</form>
【需求】
对所有文本框和密码框添加离焦事件，校验输入内容不能为空
对button按钮添加单击事件：提交form表单
【脚本代码】
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//对所有文本框和密码框添加离焦事件，校验输入内容不能为空
$(":text,:password").blur(function() {
// 一般非空校验都需要去除两端空格再校验，对于密码类字符不需要去空格
var value = $.trim(this.value);
if (value == "") {
//this.focus(); // 让输入框获取焦点
$(this).focus();
}
});
// 表单输入框自动去空格
/* $(":text,textarea").blur(function() {
// 一般非空校验都需要去除两端空格再校验，对于密码类字符不需要去空格
this.value = $.trim(this.value);
}); */
//对button按钮添加单击事件：提交form表单
$(":button").click(function() {
$("form").submit();
});
});
</script>
【相关函数】
blur() 失去焦点事件
$.trim(value) 字符串去除两端空白
submit(); 提交表单
4.7.表单元素属性过滤选择器
表单对象属性过滤选择器是根据表单元素的某些特殊属性来进行过滤选择的。
它与表单对象过滤选择器的区别是：
表单元素过滤选择器是根据表单元素类型进行选择的；
表单元素属性过滤选择器，是根据表单元素特殊属性值进行选择的。
参考API：
:enabled 过滤可用的元素
:disabled 过滤不可用的元素
:checked 过滤被选中元素(复选框、单选框，不包括select中的option)
:selected 匹配select中所有选中的option元素
【示例练习】
性别：<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女"/>女 <br/>
爱好：<input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐
<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>
城市：<select name="city" multiple> <!-- 多选 -->
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">广州</option>
</select><br/><br/>
<input type="button" value=" 获取选中的值 " id="mybutton" />
【需求】
点击button，打印radio、checkbox和select中选中项的值。
【脚本代码】
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*页面加载完成事件：相当于jQuery(document).ready(fn);****/
jQuery(function($) {
//点击button，打印radio、checkbox和select中选中项的值。
$(":button").click(function() {
// 单选
//alert( $(":radio:checked").val() );
// 复选框
/* var values = "";
$(":checkbox:checked").each(function() {
values += "," + $(this).val();
});
alert(values.substr(1)); // substr(start,[end]) end:取几个
alert(values.substring(1)); // substring(start,[end]) end:结束的索引位置，但不包含结束的索引 */
/* var arr = [];
$(":checkbox:checked").each(function() {
arr.push( $(this).val() );
});
alert(arr.join("、")); */
// 将$(":checkbox:checked") 在map方法中处理之后返回，然后再重新封装成一个处理后的结果集（jQuery对象）
/* alert( $(":checkbox:checked").map(function() {
return this.value;
}).get().join("、、") );
// 对数组中的每个值加2，返回处理后的属组[3,4,5]
alert( $([1,2,3]).map(function(i, v) {
return this + 2;
}).get().join("、、") ); */
/* alert( $("select option:selected").map(function() {
return this.value;
}).get().join("、、") ); */
// alert( $("select")[0].value ); // 只有第一个选中的值
// jquery对select获取值做了特殊封装，获取的是选中的值的js数组
alert( $("select").val().join(",, ") );
});
});
</script>
</head>
<body>
性别：<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女"/>女 <br/>
爱好：<input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐
<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>
城市：<select name="city" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select><br/><br/>
<input type="button" value=" 获取选中的值 " id="mybutton" />
</body>
</html>
【相关函数】
map(callback) 对结果经过处理之后返回,数组方法，
arr.push(value1, value2,….)
arr.join("字符串") 使用指定字符串将数组中的元素连接起来，返回一个字符串
5.筛选节点的方法API
筛选的方法类似于前面的基本过滤选择器、内容过滤选择器等。但这里调用的是方法，不是选择器(字符串)。
使用jQuery提供的9种选择器，基本可以选中所有想要选中的元素！那么为什么还要设计出一些筛选的方法呢？原因有三：
其一：提高查询效率，这也是最主要的原因；
其二：代码变得更加优雅；
其三：更加完美的链式操作。
举个例子：设置所有div元素中的字体为红色，并给div中所有的标题添加灰色背景，最后把div中的p标签的字体设置为蓝色。
那么，按照之前讲的知识，我们应该这样做
而使用选择器结合筛选的方法，就可以这样做（尽管你可能看不懂）：
好处中最好理解的就是"其三：更加完美的链式操作"，一句话搞定！
"其二：代码更加优雅"可能你并没什么感觉，但这不重要。。。
效率方面最不好理解，前面的写法，实际上总共查询了5次，分别是：
第一次： 第一行查询div
第二、三次： 第二行再次查询div，然后查询div下的标题标签
第四、五次： 第三行又一次查询了div、接着查询div下的段落标签p
你会发现在这5次查询中，同样的div查询了3次，而后面的写法只对div查询了一次，
后面的操作都是基于第一次的查询完成的，因此在效率上要高于前面的做法。
参考API：
eq(index|-index) 结果中第N个元素，如：$("div")….eq(0)…表示第一个div；$("div").eq(-1)最后一个div $("div:eq(0)")….
first() 结果中第一个元素，如：$("div")….first()…
last() 结果中最后一个元素，如：$("div")….last()
hasClass(class) 结果中是否含有指定的类样式，如果有，则返回true。$("div").hasClass("myclass") 不需要加.
find(selector) 在结果中找符合指定选择器的后代元素 和层级选择器中的带空格的对应$("div")…find("a") $("div a")
next([selector]) 当前元素的下一个紧邻着的兄弟元素$("#myinput").next("div"); 如果下一个元素不是div，则返回空的jq对象$("#myinput+div")
parent([selector]) 匹配给定选择器的父元素，只找父元素，如果指定的父元素不符合选择器，则不会被选中
parents([selector]) 匹配给定选择器的祖先元素
prev([selector]) 当前元素的上一个紧邻着的兄弟元素
siblings([selector]) 与给定选择器匹配的所有兄弟元素 $("div").siblings("a");
筛选的方法大致分为3类：
过滤：对结果集进行筛选，返回的是结果集中的数据，或结果集中经过一些处理的数据map()。
查找：根据当前元素，获取祖先元素、后代元素、父元素、子元素以及兄弟元素。
串联：改变当前的结果集，例如：$(“div”).add(“span”)可以把span元素加入到之前的结果集中，
$(“div”).find(“p”)是查找div中的所有p元素，加上.andSelf()可以将div自身加到结果集中，
当然，在把自身加到结果集之前，可以先对结果集进行一些操作。
提示：在筛选前，可以先对结果进行某些操作，之后再调用方法筛选其他元素进行某些操作，而不需要重新写选择器来选择元素
筛选方法和选择器结合使用部分举例（对比）：
这些方法在工作中全部都能用到，而我们不可能一次全部记住，但是每一个方法都要点进去看一看，知道作用或留个印象就行。
至少当需要用的时候知道怎么查，查哪个方法，这点很重要！勇于并善于将选择器与这些筛选的方法结合使用，将使得你在用jQuery查询文档方面变得随心所欲，游刃有余！我们毫不怀疑jQuery是拥有这个能力的！但是在jQuery的使用上要想达到这个程度并非易事，还需要在实际的工作中多使用jQuery，多思考有没有更简洁更高效的写法，而不是仅仅实现功能，如果能做
到这些，你就是未来的jQuery高手！！
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
