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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 | hc22_hc22价格_hc22哈氏合金—东锜特殊钢| 正压送风机-多叶送风口-板式排烟口-德州志诺通风设备 | 柔软云母板-硬质-水位计云母片组件-首页-武汉长丰云母绝缘材料有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 工业用品一站式采购平台|南创工品汇-官网|广州南创 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 沈阳网站建设_沈阳网站制作_沈阳网页设计-做网站就找示剑新零售 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 济南轻型钢结构/济南铁艺护栏/济南铁艺大门-济南燕翔铁艺制品有限公司 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 专注氟塑料泵_衬氟泵_磁力泵_卧龙泵阀_化工泵专业品牌 - 梭川泵阀 | 气体检测仪-氢气检测仪-可燃气体传感器-恶臭电子鼻-深国安电子 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | 中式装修设计_室内中式装修_【云臻轩】中式设计机构 | 橡胶粉碎机_橡胶磨粉机_轮胎粉碎机_轮胎磨粉机-河南鼎聚重工机械制造有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | SF6环境监测系统-接地环流在线监测装置-瑟恩实业 | 正压送风机-多叶送风口-板式排烟口-德州志诺通风设备 | POS机办理_个人pos机免费领取-银联pos机申请首页 | 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 北京康百特科技有限公司-分子蒸馏-短程分子蒸馏设备-实验室分子蒸馏设备 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 100_150_200_250_300_350_400公斤压力空气压缩机-舰艇航天配套厂家 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 |