pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

0基礎接觸html5之jquery(二)選擇器

jQuery中的選擇器selecor是大家經常使用的強大功能,事實上jQuery提供給我們非常豐富的手段來使用選擇器定位DOM元素。 下面先簡單介紹一下用法選擇器 實例 選取* $(quot;*quot;) 所有元素
jQuery中的選擇器selecor是大家經常使用的強大功能,事實上jQuery提供給我們非常豐富的手段來使用選擇器定位DOM元素。 下面先簡單介紹一下用法
選擇器              實例                     選取
*                     $("*")                  所有元素
#id                  $("#lastname")     id="lastname" 的元素
.class               $(".intro")            所有 class="intro" 的元素
element            $("p")                  所有 <p> 元素
.class.class       $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素

:first                 $("p:first")          第一個 <p> 元素
:last                  $("p:last")           最后一個 <p> 元素
:even                $("tr:even")         所有偶數 <tr> 元素
dd                     $("trdd")             所有奇數 <tr> 元素

:eq(index)          $("ul li:eq(3)")      列表中的第四個元素(index 從 0 開始)
:gt(no.)              $("ul li:gt(3)")       列出 index 大于 3 的元素
:lt(no)                $("ul li:lt(3)")          列出 index 小于 3 的元素
:not(selector)     $("input:not(:empty)")   所有不為空的 input 元素

:header             $(":header")            所有標題元素 <h1> - <h6>
:animated                                         所有動畫元素

:contains(text)   $(":contains('str')")  包含指定字符串的所有元素
:empty               $(":empty")            無子(元素)節點的所有元素
:hidden              $("p:hidden")          所有隱藏的 <p> 元素
:visible               $("table:visible")       所有可見的表格

s1,s2,s3               $("th,td,.intro")         所有帶有匹配選擇的元素 

[attribute]            $("[href]")                 所有帶有 href 屬性的元素
[attribute=value]  $("[href='#']")          所有 href 屬性的值等于 "#" 的元素
[attribute!=value]  $("[href!='#']")        所有 href 屬性的值不等于 "#" 的元素
[attribute$=value]  $("[href$='.jpg']")   所有 href 屬性的值包含以 ".jpg" 結尾的元素

:input                $(":input")                所有 <input> 元素
:text                  $(":text")                 所有 type="text" 的 <input> 元素
:password           $(":password")         所有 type="password" 的 <input> 元素
:radio                $(":radio")                所有 type="radio" 的 <input> 元素
:checkbox           $(":checkbox")          所有 type="checkbox" 的 <input> 元素
:submit               $(":submit")            所有 type="submit" 的 <input> 元素
:reset                 $(":reset")               所有 type="reset" 的 <input> 元素
:button
$(":button")                                      所有 type="button" 的 <input> 元素
:image
$(":image")                                        所有 type="image" 的 <input> 元素
:file                    $(":file")                   所有 type="file" 的 <input> 元素

:enabled             $(":enabled")            所有激活的 input 元素
:disabled             $(":disabled")           所有禁用的 input 元素
:selected             $(":selected")           所有被選取的 input 元素
:checked              $(":checked")           所有被選中的 input 元素



雖然選擇器是Jquery最常用也是最基礎的功能,但是很少有開發人員會考慮使用不同的選擇器來處理性能問題。這里我們將介紹幾種常用的選擇器,及其它們之間的性能差異。

1.$("#id")

使用id來定位DOM元素無疑是最佳提高性能方式,因為jQuery底層將直接調用本地方法document.getElementbyId(),如果熟悉javascript的朋友應該了解這個方法將直接通過元素id來返回對應的元素。

當然,如果這個方式不能直接找到你需要的元素,那么你可以考慮調用.find()方法。如下:

$("#gbid").find("div")

使用以上方法可以有效的縮小你定位的DOM元素。

2.$("p"),$("div"),$("input")

使用標簽名是第二優化選擇,因為jQuery將直接調用本地方法document.getElementsByTagname()來定位DOM元素。

3.$(".class")

使用.class方法對于我們來說稍微復雜些,對于比較新的瀏覽器例如,IE9,它支持本地方法document.getElementsByClassName(),而對于老的瀏覽器,例如,IE8或者更早版本來說,不得不使用DOM搜索方式來實現,自然會對于性能產生比較大的影響。所以大家得選擇使用。

4.$("[attribute=value]")

對于利用屬性來定位DOM元素,本地javascript方法中并沒有直接的實現。所以大都都是使用DOM搜索方式來達到效果,很多現代瀏覽器支持querySelectorAll()方法,但是不同瀏覽器的性能還是有區別。總體來說,使用這種方式來定位DOM元素,并不是非常理想。所以為了獲得更好的優化效果,你需要盡量避免這個對性能有害的使用方式。

5.$(":hidden")

和上面使用屬性來定位DOM的方式類似,這種偽選擇器也同樣沒有本地js方法來直接實現。而且jQuery需要搜索每一個元素來定位這個選擇器,將會對你的應用帶來比較大的性能問題。所以大家盡量不要使用,當然,如果你非要使用的話,請先是用find方法定位父元素,然后,再使用這個選擇器,這樣會幫助你很好的優化性能,如下:$("#gbdiv").find(":hidden")

以上是一個基本使用選擇器的規則,自上而下性能依次下降,如果大家在開發中使用選擇器,請遵循以上這個簡單的優化性能規則。
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。| 潍坊大集网-潍坊信息港-潍坊信息网 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 撕碎机,撕破机,双轴破碎机-大件垃圾破碎机厂家 | 杭州荣奥家具有限公司-浙江办公家具,杭州办公家具厂 | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 啤酒设备-小型啤酒设备-啤酒厂设备-济南中酿机械设备有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 电动葫芦-河北悍象起重机械有限公司 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 土壤有机碳消解器-石油|表层油类分析采水器-青岛溯源环保设备有限公司 | 壹作文_中小学生优秀满分作文大全| 过跨车_过跨电瓶车_过跨转运车_横移电动平车_厂区转运车_无轨转运车 | 楼承板设备-楼承板成型机-免浇筑楼承板机器厂家-捡来 | 学生作文网_中小学生作文大全与写作指导 | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 湖南自考_湖南自学考试网| 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 高硼硅玻璃|水位计玻璃板|光学三棱镜-邯郸奥维玻璃科技有限公司 高温高压釜(氢化反应釜)百科 | 北京翻译公司_同传翻译_字幕翻译_合同翻译_英语陪同翻译_影视翻译_翻译盖章-译铭信息 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 上海刑事律师|刑事辩护律师|专业刑事犯罪辩护律师免费咨询-[尤辰荣]金牌上海刑事律师团队 | 万师讲师网-优质讲师培训师供应商,讲师认证,找讲师来万师 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 陕西自考报名_陕西自学考试网 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | 阻垢剂-反渗透缓蚀阻垢剂厂家-山东鲁东环保科技有限公司 | 中国在职研究生招生信息网 | 板框压滤机-隔膜压滤机-厢式压滤机生产厂家-禹州市君工机械设备有限公司 |