• #id
• element
• .class
• .class.class
• *
• selector1, selector2, selectorN
#id
用法: $(“#myDiv”);
说明: 这个就是直接选择html中的id=”myDiv”,值得注意的是:如果选择器中包含特殊字符，可以用两个斜杠(\\)转义,至少,”.”, “[",
"]” 是特殊字符.选择符内可以把双引号改为单引号,不过在复杂点的获取DOM的时候,单引号总是会引发歧义或错误,还是使用双引号吧.
element
用法: $(“div”);
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.
.class
用法: $(“.myClass”);
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
.class.class
用法: $(“.myClass.myOtherClass”);
说明: 这个用法貌似是新的,意思就是仅匹配html中class=”myClass myOtherClass”的元素,而class=”myClass”和class=”
myOtherClass”这样的class是不匹配的.
*
用法: $(“*”);
说明: 匹配所有元素,多用于结合上下文来搜索.目前我还没用上它,不过看说明说是用来结合搜索用的,那么肯定会在大规模应用中用到吧.
selector1, selector2, selectorN
用法: $(“div,span,p.myClass”)
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表
示匹配元素p class=”myClass”
层次(Hierarchy)的理解:使用构造的选择符来层层过滤DOM元素.
Hierarchy包括了四部分:
ancestor descendant
parent > child
prev + next
prev ~ siblings
ancestor descendant
用法: $(“form input”) ;
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
parent > child
用法: $(“form > input”) ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用
XPath选择符的.
prev + next
用法: $(“label + input”) ;
说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.
prev ~ siblings
用法: $(“form ~ input”) ;
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,
其后辈元素不被匹配.
基础过滤(Basic Filters)是相对于以后要学习的其他的过滤方法而言的,基础过滤(我小学没毕业,不知道是不是这样翻译)所过滤的内容都
是利用jQuery获得到的DOM元素,我的理解就是像一个大筛子,把利用那些基本选择器获得到的集合进行按规则剔除.
Basic Filters包括了十部分,稍稍有点多:
:first
:last
:not(selector)
:even
: odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
:first
用法: $(“tr:first”) ;
说明: 匹配找到的第一个元素.我以前就遇到了取第一个和最后一个的情况.
:last
用法: $(“tr:last”) ;
说明: 匹配找到的最后一个元素.与 :first 相对应.
:not(selector)
用法: $(“input:not(:checked)”) ;
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
:even
用法: $(“tr:even”) ;
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以
table中的第一个tr就为偶数0.
: odd
用法: $(“tr:odd”) ;
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
:eq(index)
用法: $(“tr:eq(0)”) ;
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
:gt(index)
用法: $(“tr:gt(0)”) ;
说明: 匹配所有大于给定索引值的元素.
:lt(index)
用法: $(“tr:lt(2)”) ;
说明: 匹配所有小于给定索引值的元素.
:header
用法: $(“:header”).css(“background”, “#EEE”) ;
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
:animated
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
div.colored { background:green; }
</style>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>
说明: 匹配所有正在执行动画效果的元素.这个需要好好理解下,因为看起来比之前的理解上都难一点.其中,toggleClass是添加/移除
class;slideToggle是收缩/伸展块级元素.也就是说slideToggle让其中的一个div在不断的执行动画(收缩/伸展),当点击button时,就用
div:animated匹配到了这个元素上,所以改变了颜色.
内容过滤(Content Filters).
对于jQuery的学习,最好的办法就是实际使用它,并多多的使用!不然很快就会忘记的.
• :contains(text)
• :empty
• :has(selector)
• :parent
:contains(text)
用法: $(“div:contains(‘John’)”) ;
说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是
查找被标签”围”起来的文本内容是否符合指定的内容的.
:empty
用法: $(“td:empty”) ;
说明: 匹配所有不包含子元素或者文本的空元素.嗯,这个看名字就大概知道是什么意思了,就是元素里面没有任何东西(子元素/内容)的时候
就匹配.
:has(selector)
用法: $(“div:has(p)”).addClass(“test”) ;
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加
上class=”test”.
:parent
用法: $(“td:parent”) ;
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
可见度过滤(Visibility Filters),无非就是能看见和不能看见.所以Visibility Filters只包括了两部分:
:hidden
:visible
:hidden
用法: $(“tr:hidden”)
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”
hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
:visible
用法: $(“tr:visible”)
说明: 匹配所有的可见元素.
属性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面
都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记不住,在以后用到的时候也可以很
快的查找api并应用上.
其包括以下几个选择器:
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attributeFilter1][attributeFilter2][attributeFilterN]
[attribute]
用法: $(“div[id]“) ;
说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,
新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.
[attribute=value]
用法: $(“input[name='newsletter']“).attr(“checked”, true);
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
[attribute!=value]
用法: $(“input[name!='newsletter']“).attr(“checked”, true);
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定
值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.
[attribute^=value]
用法: $(“input[name^='news']“) ;
说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
[attribute$=value]
用法: $(“input[name$='letter']“) ;
说明: 匹配给定的属性是以某些值结尾的元素.
[attribute*=value]
用法: $(“input[name*='man']“) ;
说明: 匹配给定的属性是以包含某些值的元素.
[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有
id 属性,并且它的 name 属性是以 man 结尾的元素.
通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导
后代过滤(Child Filters)的意思就是利用其他jQuery选择器选择到了一组dom,而其都具有相同的属性与特征,无法再细化选择的时候,Child
Filters 此时就派上了用场了.它就是用来选择此组元素中的第几个.
其包括以下几个选择器:
:nth-child(index/even/odd/equation)
:first-child
:last-child
: only-child
:nth-child(index/even/odd/equation)
用法: $(“ul li:nth-child(2)”) ;
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是
从0开始,后者是从1开始.
:first-child
用法: $(“ul li:first-child”) ;
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
:last-child
用法: $(“ul li:last-child”) ;
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
: only-child
用法: $(“ul li:only-child”) ;
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才
会被匹配!
然就很容易分开区别了.
这组表单(Forms)选择器内容稍稍多了点,有十一个,其实也就是input的那些type啦,但是熟悉html的童鞋快速的掌握这些一点问题都没有!
其包括以下几个选择器:
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
:input
用法: $(“:input”) ;
说明: 这个自然就是选择所有的input类型了,不管type等于何值(首先得是符合游戏规则的).
:text
用法: $(“:text”) ;
说明: 匹配所有的单行文本框.
:password
用法: $(“:password”) ;
说明: 匹配所有密码框.
:radio
用法: $(“:radio”) ;
说明: 匹配所有单选按钮.
:checkbox
用法: $(“:checkbox”) ;
说明: 匹配所有复选框
:submit
用法: $(“:submit”) ;
说明: 匹配所有提交按钮.
:image
用法: $(“:image”) ;
说明: 匹配所有图像域.
:reset
用法: $(“:reset”) ;
说明: 匹配所有重置按钮.
:button
用法: $(“:button”) ;
说明: 匹配所有按钮.这个包括直接写的元素button.
:file
用法: $(“:file”) ;
说明: 匹配所有文件域.
:hidden
用法: $(“input:hidden”) ;
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的
也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度
或高度为0的,看个例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
});
</script>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span>
</span>
</body>
</html>
在这里,大家需要仔细数一数那个个数.这个改变是从1.3.2开始
表单过滤(Form Filters)是jQuery文档中分出来的选择器中的最后一组,但这并不表示我们仅仅应用这些选择器就能够驰骋DOM海洋了,我们
还需要学习后面的过滤器等等.
其包括以下几个选择器:
:enabled
:disabled
:checked
:selected
:enabled
用法: $(“input:enabled”) ;
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
:disabled
用法: $(“input:enabled”) ;
说明: 匹配所有不可用元素.与上面的那个是相对应的.
:checked
用法: $(“input:checked”) ;
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
:selected
用法: $(“select option:selected”) ;
说明: 匹配所有选中的option元素.