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词的意思就是切换的意思.
3209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
