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元素
如果某个元素师他父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他的元素,该元素就不会被匹配,这个元素可以被我们称为"独生子女元素",如果该元素是"独生子女",那么该元素将会被匹配,如果该元素不是"独生子女"那么这个元素就不会被匹配.
继续上篇的内容:
表单对象属性过滤选择器的代码例子:
以上代码中一定要记住这四个选择器: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词的意思就是切换的意思.
分享到：
相关推荐
jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类： 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两
本篇文章主要是对jQuery选择器进行了全面的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
本篇文章主要是对jquery选择器之属性过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
本篇文章主要是对jquery选择器之内容过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
本篇文章主要是对jquery选择器之基本过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
本篇文章主要是对jQuery选择器进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。 当我们使用选择器的时候$(selector,content)，就会执行 init...
下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在上篇文章给大家介绍了div模拟版链接：//www.jb51.net/article/96211.htm，如果大家感兴趣可以参考下。 这个是select版的，若想美化...双向列表选择器select版</title> [removed][removed] <script type="te
学习jQuery已经有1年多的时间了，但是一直由于做WinForm程序开发没有经常实践。现在又开始重拾WebForm开发。写几篇jQuery系列，温习下jQuery框架的知识。
本篇文章是jQuery中的日期选择器进行了详细的分析介绍，需要的朋友参考下
jQuery 1.1.3（2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。 jQuery 1.2（2007年9月）：...
本篇文章介绍了，基于jQuery选择器的整理集合。需要的朋友参考下
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：:enabled,:disabled,:checked,:selected的用法。 您对本系列文章有任何建议或意见请...
本篇文章小编为大家介绍，基于JQuery 选择器使用说明介绍。需要的朋友参考下
从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。...
这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几种。1, 通过id获取,该元素是唯一的$(‘#id’)2, 通过className获取$(‘.cls’) 获取文档中所有className为cls的元素$(‘.cls’, el)$(‘.cls’, ‘#id’)$...
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：[attribute],[attribute=value],[attribute!... 运行后，请刷新下代码，以便加载jquery