jQuery框架和AJAX技术第二章课件.ppt

第二章jQuery中的选择器回顾jQuery简介编写简单的jQuery程序jQuery对象和DOM对象jQuery中的基本选择器包装集的管理目标选择器简介层次选择器过滤选择器表单选择器选择器的概念CSS选择器它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构jQuery选择器jQuery中的选择器完全继承了CSS风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。层次选择器选择器描述示例$("ancestordescendant")选取ancestor元素里的所有descendant(后代)元素$("divspan")选取<div>里的所有的<span>元素$("parent>child")选取parent元素下的child(子)元素$("div>span")选取<div>元素下元素名是<span>的子元素$("prev+next")选取紧接在prev元素后的next元素$("div+span")选取<div>元素的下一个<span>兄弟元素$("prev~siblings")选取prev元素之后的所有siblings元素$("div~span")选取<div>元素后面的所有<span>兄弟元素层次选择器示例页面JavaScript代码片段$(function(){ //将所有input对应的文本框的长度设为100px $("input").css("width","100px"); //将form下面的所有后代input元素添加红色背景色 $("forminput").css("background-color","red"); //将id为id_div的div元素下的span子节点添加下划线 $("#id_div>span").css("text-decoration","underline"); //将label元素的下一个input元素的边框样式修改 $("label+input").css("border-top","none") .css("border-left","none") .css("border-right","none"); //将id为myDiv的div元素后的所有兄弟节点添加背景色 $("#myDiv~span").css("background-color","gray");});基本过滤选择器选择器描述示例:first选取第一个元素$("div:first")选取所有<div>元素中第一个<div>元素:last选取最后一个元素$("div:last")选取所有<div>元素中最后一个<div>元素:not(selector)去除所有与给定选择器匹配的元素$("input:not(.myClass)")选取类名不是myClass的<inupt>元素:even选取索引是偶数的所有元素,索引从0开始$("input:even")选取索引是偶数的<input>元素:odd选取索引是奇数的所有元素,索引从0开始$("input:odd")选取索引是奇数的<input>元素:eq(index)选取索引等于index的元素(index从0开始)$("input:eq(1)")选取索引等于1的<input>元素:gt(index)选取索引大于index的元素(index从0开始)$("input:gt(1)")选取索引大于1的<input>元素:lt(index)选取索引小于index的元素(index从0开始)$("input:lt(1)")选取索引小于1的<input>元素:header选取所有标题元素,例如:h1,h2,h3等等$(":header")选取网页中所有的标题元素基本过滤选择器示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("tr:even").css("background-color","red"); });</script><tableborder="1"width="200"> <tr><td>这里是内容</td></tr> <tr><td>这里是内容</td></tr> <tr><td>这里是内容</td></tr> <tr><td>这里是内容</td></tr> <tr><td>这里是内容</td></tr> <tr><td>这里是内容</td></tr></table>内容过滤选择器选择器描述示例:contains(text)选取含有文本内容为text的元素$("div:contains('abc')")选取含有文本"abc"的<div>元素:empty选取不包含子元