首页 > 代码库 > 锋利的jQuery第二章
锋利的jQuery第二章
感觉还是看书好一些,jQuery并不难,但是对于一些东西如果你不知道,你就会感觉到很头疼,比如以前看选择器,网上那么多文章,总结的挺好的,但是不能看下去,太多了,对电脑不爽。现在从书上看到这些总结,感觉很清晰,也可以接受。
1,用jQuery判断某个元素是否存在
if($("#tt").length > 0) { //使用长度判断}if( $("#tt")[0] ) { //转为Dom对象判断}
2,选择器,根据例子记忆很好理解
(1)基本选择器:id,class,标签
#id 根据特定的id匹配一个元素 $("#test")选择id为test的元素.class 根据类名匹配元素 $(".test")选择class为test的元素element 根据元素名匹配 $("p")选择所有的<p>元素* 匹配所有元素 $("*")选择所有的元素selector1,selector2 匹配多个匹配器 $("div,span,p.myClass")选择所有的div,span,class为myClass的<p>标签如果想改变这些获取到的jQuery对象的背景色,只需要在后面加上:.css("background","#bbffaa");
(2)层次选择器:后代元素,子元素,相邻元素,同辈元素
$("div span") 选择<div>里的所有的<span>元素(所有后代)$("div>span") 选择<div>里的所有子元素<span>(只是子元素)$(".one+div") 选择class为one的下一个<div>同辈元素$(".one~div") 选择class为one的所有<div>同辈元素
如果想改变这些获取到的jQuery对象的背景色,只需要在后面加上:.css("background","#bbffaa");
(3)过滤选择器
a1,基本过滤选择器
$("div:first") 所有<div>元素的第1个<div>$("div:last") 所有<div>元素的最后一个<div>$("input:not(.myClass)") 所有class不是myClass的<input>元素$("input:even") 所有索引是偶数的<input>$("input:odd") 所有索引是奇数的<input>$("input:eq(1)") 索引为1的<input>$("input:gt(1)") 索引大于1的<input>$("input:lt(1)") 索引小于1的<input>$(":header") 网页中所有的<h1><h2><h3>----$("div:animated") 正在执行动画的<div>$(‘:focus‘) 当前获得焦点的元素
说明:除了 :关键字 不能改,其他的元素都可以改。
b2,内容过滤选择器:
$("div:contains(‘我‘)") 选择含有文本"我"的<div>$("div:empty") 不包含子元素(文本也算)的<div>$("div:has(p)") 含有<p>元素的<div>$("div:parent") 含有子元素(文本也算)的<div>说明:除了 :关键字 不能改,其他的元素都可以改。
c3,可见性过滤选择器:
$(":hidden") 所有不可见元素,含<input type="hidden"/>,<div style="display:none;">,<div style="visibility:hidden;">等$("input:hidden") 选择input不可见元素$("div:visible") 选择所有可见的<div>元素
d4,属性过滤选择器:
[attribute] $("div[id]") 所有拥有属性id的元素[attribute=value] $("div[title=test]") 所有属性title等于test的<div>[attribute!=value] $("div[title=test]") 所有属性title不等于test的<div>[attribute^=value] $("div[title^=test]") 所有属性title以"test"开始的<div>[attribute$=value] $("div[title$=test]") 所有属性title以"test"结束的<div>[attribute*=value] $("div[title*=test]") 所有属性title包含"test"的<div>[attribute|=value] $("div[title|=test]") 所有属性title等于"test"或以"test"为前缀(后面跟着连字符-)的<div>[attribute~=value] $("div[title~=test]") 所有属性title用空格分开包含"test"的<div>[attribute1][attribute2][attributeN] $("div[id][title$=‘test‘]") 所有属性title以"test"开始的<div>为了区分如下有html元素:(1)<div title="en">title为en的div元素</div>(2)<div title="en-UK">title为en-UK为div元素</div>
(3)<div title="english">title为english为div元素</div>(4)<div title="en uk">title为en uk的div元素</div>(5)<div title="uken">title为uken的div元素</div>
例子如下:
$(‘div[title^="en"]‘) 属性title以en开始的有:(1)(2)(3)(4)
$(‘div[title*="en"]‘) 属性title包含en的有:(1)(2)(3)(4)(5)
$(‘div[title|="en"]‘) 属性title等于en或以en为前缀的有:(1)(2)
$(‘div[title~="en"]‘) 属性title用空格分隔的包含en的有:(4)
e5,子元素过滤选择器
(1)nth-child(even)选择父元素下的索引值为偶数的元素(2)nth-child(odd) 选择父元素下的索引值为奇数的元素(3)nth-child(index)选择父元素下的索引值为index的元素(从1开始)(4)nth-child(3n) 父元素下索引值为3的倍数的元素(从1开始)(5)nth-child(3n+1)父元素下索引值为3n+1的元素(6):first-child 父元素下的第一元素 如$("ul li:first-child")选择ul下的第一个li元素(7):last-child 父元素下的最后一个元素(8):only-child 如果某元素下仅有唯一子元素,选择出来 如$("ul li:only-child") 在ul中选择是唯一子元素的li元素
f6,表单对象属性过滤选择器
:enabled $("#form1 :enabled") 选择id为form1的表单内的所有可用元素:disabled $("#form2 :disabled") 选择id为form2的表单内的所有不可用元素:checked $("input:checked") 所有被选中的input元素(单选框和复选框):selected $("select option:selected"),选择下拉列表被选中的所有元素
(4)表单选择器
:input $(":input") 所有<input><textarea><select><button>元素:text $(":text") 所有单行文本框:password $(":password") 所有密码框:radio $(":radio") 所有单选框:checkbox $(":checkbox") 所有多选框:submit $(":submit") 所有提交按钮:image $(":image") 所有图像按钮:reset $(":reset") 所有重置按钮:button $(":button") 所有按钮:file $(":file") 所有文件上传域:hidden $(":hidden") 所有不可见元素(前面已提过)
3 选择器注意事项
(1)对于 . # ( ] 等特殊字符,需要转义字符: \\
(2)属性选择器中不再需要@符号,直接写为:$("div[title=‘test‘]")
(3)选择器中还有空格
$(‘.test :hidden‘) 带空格 选择class为test的元素里面的隐藏元素 如:<div class="test"> <div style="display:none;">aa</div></div>选择的就是中间的那个元素$(‘.test:hidden‘) 不带空格 选择class为test的隐藏元素 如:<div class="test" style="display:none;>bb</div>选择的就是这个元素
(4)is方法
jQuery的is方法常用来做判断if($obj.is(":checked")){ //如果单选框或复选框被选中}if($obj.is(":visible")){ //如果$obj对象 可见}
4,最后一个例子,实现全部产品和部分产品的切换显示:
html代码:
<body><div class="SubCategoryBox"> <ul> <li><a href=http://www.mamicode.com/"#">佳能</a> <i> (30440) </i></li> <li><a href=http://www.mamicode.com/"#">索尼</a> <i> (27220) </i></li> <li><a href=http://www.mamicode.com/"#">三星</a> <i> (20808) </i></li> <li><a href=http://www.mamicode.com/"#">尼康</a> <i> (17821) </i></li> <li><a href=http://www.mamicode.com/"#">松下</a> <i> (12289) </i></li> <li><a href=http://www.mamicode.com/"#">卡西欧</a> <i> (8242) </i></li> <li><a href=http://www.mamicode.com/"#">富士</a> <i> (12545) </i></li> <li><a href=http://www.mamicode.com/"#">柯达</a> <i> (21121) </i></li> <li><a href=http://www.mamicode.com/"#">宾得</a> <i> (45415) </i></li> <li><a href=http://www.mamicode.com/"#">理光</a> <i> (4512) </i></li> <li><a href=http://www.mamicode.com/"#">奥林巴斯</a> <i> (45415) </i></li> <li><a href=http://www.mamicode.com/"#">明基</a> <i> (5451) </i></li> <li><a href=http://www.mamicode.com/"#">爱国者</a> <i> (5412) </i></li> <li><a href=http://www.mamicode.com/"#">其他品牌相机</a> <i> (4521) </i></li> </ul> </div><div class="showmore"> <a href=http://www.mamicode.com/"more.html"><span>显示全部品牌</span></a></div></body>
jquery代码:
<script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $catogory=$(".SubCategoryBox ul li:gt(5):not(:last)");//选择出ul下索引大于5不包括最后一个的所有对象 $catogory.hide();//隐藏 $togglebtn=$("div.showmore > a"); $togglebtn.click(function(){ if($catogory.is(":visible")){ $catogory.hide(); $(this).find("span") //$(this)不要写成$this .css("background","url(img/down.gif)no-repeat 0 0") //添加样式 .text("显示全部品牌"); $("ul li").removeClass("promopted"); //去掉高亮样式显示 }else{ $catogory.show(); $(this).find("span") .css("background","url(img/up.gif)no-repeat 0 0") //添加样式 .text("精简显示品牌"); $("ul li").addClass("promopted"); //去掉高亮样式显示 }//else return false; //超链接不跳转 }) //$togglebtn.click }); //$(document) </script>
总结:总算学完jquery选择器了,以前看到很多选择器就头大,不知道是什么,现在如果遇到不知道的,直接来这里查看就行了。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。