本文详细介绍了jQuery中的选择器和过滤器的使用方法，包括基本的选择器、过滤选择器、内容过滤选择器等，并提供了丰富的代码示例。
jQuery 之 选择器总结(下篇)
CSS是一种比较出色的技术,上面有很多的定义规则与jQuery有异曲同工之妙,甚至怀疑jQuery就是仿照CSS的理念来设计的,有CSS开发基础的人可以非常容易的进入jQuery的领域进行开发,没有接触过CSS开发的人通过学习jQuery的学习也会学习到很多CSS的规则和设计,CSS有三种方式,分别是行间样式表,内部样式表,外部样式表,其中外部样式表的引入:<link rel=stylesheet href='.../..css' type='text/css'>这句话最好记住,省的以后开发的时候老是去查别的HTMl文件找到这句话了,能省一点时间算一点时间哦.其实主要记住css级联样式表是通过<link/>标签引入的就可以了.同CSS一样jQuery也可以得到所有的元素,只有得到文档的元素之后,才能为该元素增加行为属性,下面是CSS文档和jQuery的几个比较:
1)E{CSS规则} 使用文档元素作为选择符---------------->$('element')
2)#ID{CSS规则}以文档元素的唯一标示符ID作为选择符------------------------>$('#id')
3)E.className{CSS规则}以文档的class作为选择符--------------------------->$('Element.className')或者$('.className')
4)E F{CSS规则}元素E的任意的后代F----------------->$('F E')元素F的所有后代-->$('F>E')元素F的儿子元素E
5)*{CSS规则}以文档的所有元素作为选择符-------->$('*')选择文档中所有的jQuery元素
可以看出jQuery完全继承了CSS的风格,使用jQuery的元素我们可以非常便捷和迅速的找出特定的jQuery元素,从而可以为这些元素添加行为.我们要区别jQuery对象和DOM对象,jQuery[0]---------->可以转换成DOM对象,这样是非常有用的一个做法,比如说,我们在进行条件判断的时候,DOM对象可以直接放到if()语句块中,但是jQuery永远是个对象,不可以自动转换成boolean函数的.
比如if(jQuery对象){.....操作.....}就会报告错误的,所以要用jQuery检查某个元素是否存在或者进行流程的控制的时候,应该使用jQuery的长度或者将jQuery对象转换成DOM对象进行判断,正确的做法是if(jQuery[0]){......}或者if(jQuery.length>0){.....}.
几个上篇中要注意到的问题:
1)$('prev~siblings')-------$('prev').nextAll('...')------$('prev').siblings()的区别
sibling是同胞,兄弟姐妹的意思,就是指同一辈的元素,将一个DOM理解为一棵树,里面处于同一层的就是siblings了,其中$('prev~siblings')取出的是在'prev'元素之后的所有的siblings元素,在实际的开发中,经常使用$('prev').nextAll()方法来代替上面的方法.区别主要是在$('prev').siblings()方法取出的是所有的兄弟元素,而不论是位于该prev元素的前面还是后面,另外两个方法就是只取出位于该prev元素后面的元素.
2)在基本过滤选择器中:not(selector)
要明白:not(selector)过滤器中,selector是一个过滤器,也就可以写成选择器的形式...举一个最简单的例子,就是$('div:not(:last)')就是要取出不是最后一个的所有的div元素.
3)在基本过滤选择器中:header
这个方法的作用就是来选取所有的header元素,也就是常说的标题元素,比如说<h1><h2><h3>等等这种标题元素,它返回的是一个集合元素,就是该页面上所有的标题的集合.
4)在内容过滤选择器中要记住:has(selector)元素的作用
这个地方就是选取含有选择器所匹配的元素的元素,返回的是一个集合元素,因为不仅仅只有一个元素符合咱们的过滤条件.括弧中的参数也是一个selector,也就是选择器的表达式的形式.
5)在内容过滤选择器中的:parent选择器
我们可以叫这个选择器"父母选择器",这个是选取含有子元素或者是文本元素的元素,返回的也是一个集合元素,这里应该注意的是文本元素也算是元素的.
6)子元素过滤选择器中应该记住:only-child元素
如果某个元素师他父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他的元素,该元素就不会被匹配,这个元素可以被我们称为"独生子女元素",如果该元素是"独生子女",那么该元素将会被匹配,如果该元素不是"独生子女"那么这个元素就不会被匹配.
继续上篇的内容:
表单对象属性过滤选择器的代码例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery过滤器下篇(表单对象属性过滤选择)</title> <mce:script type='text/javascript' src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> <mce:script type='text/javascript'><!-- $(document).ready(function(){ $("button[name=alter1]").click(alter1); $("button[name=alter2]").click(alter2); $("button[name=alter3]").click(alter3); $("button[name=alter4]").click(alter4); }); function alter1(){ $('#form1 input:enabled').val('这里变成supermosquito了!'); } function alter2(){ $('#form1 input:disabled').val('这里变成supermosquito了!'); } function alter3(){ var num=$('input:checked').length; alert("上面一共选择了 "+num+" 个元素"); } function alter4(){ var str=$("select :selected").text(); alert('你选择了:'+str); } // --></mce:script> </head> <body> <form id='form1' action='#'> 可用元素:<input name='add' value='可用文本框'/><br/> 不可用元素:<input name='email' disabled='disabled' value='不可以用的文本框'/><br/> 可用元素:<input name='che' value='可用文本框'/><br/> 不可用元素:<input name='name' disabled='disabled' value='不可用的文本框'/> <br/> 多选框:<br/> <input type='checkbox' name='newsletter' checked='checked' value='test1'/>test1 <input type='checkbox' name='newsletter' value='test2'/>test2 <input type='checkbox' name='newsletter' value='test3'/>test3 <input type='checkbox' name='newsletter' checked='checked' value='test4'/>test4 <input type='checkbox' name='newsletter' value='test5'/>test5 <div></div> <br/><br/> 下拉列表1:<br/> <select name='test' multiple='multiple' style='height:100px'> <option>浙江</option> <option selected='selected'>湖南</option> <option>北京</option> <option selected='selected'>天津</option> <option>广州</option> <option>湖北</option> </select> <br/><br/> 下拉列表2:<br/> <select name='test2'> <option>浙江</option> <option>湖北</option> <option selected='selected'>北京</option> <option>上海</option> <option>日照</option> <option>银海</option> <option>西安</option> </select> <div></div> </form> <button name='alter1'>点击改变可用表单内容</button><br/><font color='red'>$('#form1 input:enabled').val('string');</font><br/> <button name='alter2'>改变不可用的表单内容</button><br/><font color='red'>$('#form1 input:disabled').val('string');</font><br/> <button name='alter3'>获取多选框选中的个数</button><br/><font color='red'>$('input:checked').length;</font><br/> <button name='alter4'>获取下拉框选中的内容</button><br/><font color='red'>$("select :selected").text();</font><br/> </body> </html>
以上代码中一定要记住这四个选择器:enabled------------:disabled---------------checked-------------:selected,这几个元素分别是用来选取可以用元素,不可用元素,单选框或者复选框中被选择的元素和下拉列表中被选中的选项元素.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery过滤器下篇(表单选择器)</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("button[name$=button1]").click(function(){alert($('#form1 :input').length)});
$("button[name$=button2]").click(function(){alert($('#form1 :text').length)});
$("button[name$=button3]").click(function(){alert($('#form1 :password').length)});
$("button[name$=button4]").click(function(){alert($('#form1 :radio').length)});
$("button[name$=button5]").click(function(){alert($('#form1 :checkbox').length)});
$("button[name$=button6]").click(function(){alert($('#form1 :submit').length)});
$("button[name$=button7]").click(function(){alert($('#form1 :image').length)});
$("button[name$=button8]").click(function(){alert($('#form1 :reset').length)});
$("button[name$=button9]").click(function(){alert($('#form1 :button').length)});
$("button[name$=buttona]").click(function(){alert($('#form1 :file').length)});
$("button[name$=buttonb]").click(function(){$('#form1 :hiden').show(3000)});
});
</script>
</head>
<body>
<form id='form1' action='#'>
<input type='button' value='Button'/><br/>
<input type='checkbox' name='c'/>1
<input type='checkbox' name='c'/>2
<input type='checkbox' name='c'/>3<br/>
<input type='file'/><br/>
<input type='hidden'/><div style='display:none'>test</div><br/>
<input type='image'/><br/>
<input type='password'/><br/>
<input type='radio' name='a'/>1
<input type='radio' name='a'/>2<br/>
<input type='reset'/><br/>
<input type='submit' value='提交'/><br/>
<input type='text'/><br/>
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<button name='button1'>获得所有的input元素</button><br/><br/>
<button name='button2'>获得所有的单行文本框</button><br/><br/>
<button name='button3'>获得所有的密码框</button><br/><br/>
<button name='button4'>获得所有的单选框</button><br/><br/>
<button name='button5'>获得所有的多选框</button><br/><br/>
<button name='button6'>获得所有的提交按钮</button><br/><br/>
<button name='button7'>获得所有的图像按钮</button><br/><br/>
<button name='button8'>获得所有的充值按钮</button><br/><br/>
<button name='button9'>选取所有的按钮</button><br/><br/>
<button name='buttona'>获取所有的上传域</button><br/><br/>
<button name='buttonb'>获取所有的可见元素</button><br/><br/>
</body>
</html>
PS:
1)在表单选择器中:input是选择所有的input的元素,不仅仅包含文本框,而是取出所有的<input><textarea><select>和<button>元素的内容的.
2)在写代码的时候$('')里面带有空格和不带空格是完全不同的,带有空格的时候,系统会认为使用的是后代选择器,如果不带空格的时候,就会认为使用的是过滤选择器.所以在开发中一定要注意使用空格和不使用空格之间的区别.
其他几个小问题总结:
1)$('ul li:gt(10):not(:last)')首先获得<ul>元素下面的索引值大于10的<li>元素的集合,然后去掉元素集合中的最后一个元素.
2)同CSS选择器一样,咱们jQuery选择器中也有类似于$('div.className')的写法,意思是说选择类名为className的div元素.
3)给超链接增加onclick()方法,而不希望锚链接将咱们转到另外一个页面的时候,我们就可以再click中加入return false来让浏览器认为没有用户没有单击该链接,从而阻止该链接的跳转.
4)show();显示隐藏的匹配元素
5)css(name,value);给元素设置样式
6)text(string);设置匹配元素的文本内容
7)filter(expr);筛选出与指定的表达式匹配的元素集合,其中expr可以是多个选择器的组合.
8)addClass('className')和removeClass('className')的功能正好相反,一个是为元素增加一个类,一个则是为元素删除指定的类.
9)jQuery.is(':visible')来判断该jQuery对象是否符合后面的selector的定义,可以用来判断流程.
10)jQuery.toggle(function1,function2)---------toggle()方法可以用来交替一组动作,toggle词的意思就是切换的意思.
扫一扫
3306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
