zoukankan      html  css  js  c++  java
  • 為jQuery擴充功能,得到DOM同級元素 简单

    jQuery提供簡單易用的DOM操作能力,讓我們可以專注於Javascript程式的邏輯而不用去理會煩人的DOM操作、瀏覽器相容等問題。
    我們可以利用next()來取得同級的下一個元素,利用prev()來取得同級的上一個元素,但是jQuery並無直接由函數提供取得同級的第一個元素、同級的最後一個元素、同級的任一元素,因此我們可以利用jQuery強大的Selector(選擇器)達成這樣的需求,並替jQuery擴充功能。

    擴充jQuery的功能函數,把以下程式碼加入JQuery中

    1. //取得第一個同級元素  
    2. $.fn.first = function()  
    3. {  
    4.     return this.parent().children(":first");  
    5. }  
    6. //取得最後一個同級元素  
    7. $.fn.last = function()  
    8. {  
    9.     return this.parent().children(":last");  
    10. }  
    11. //由索引值取得任一個同級元素,索引值從0開始  
    12. $.fn.eq = function(eIdx)  
    13. {  
    14.     return this.parent().children(":eq("+ eIdx +")");  
    15. }  

    使用範例 – 利用jQuery擴充操作DOM,取得同級的第一個元素、同級的最後一個元素、同級的任一元素:

    1. $(function()  
    2. {  
    3.     alert($("#item3").first().attr("id"));//顯示item1(同級的第一個元素)  
    4.     alert($("#item3").last().attr("id"));//顯示item5(同級的最後一個元素)  
    5.     alert($("#item3").eq(1).attr("id"));//顯示item2(同級的任一元素)  
    6. });  

    以上範例需搭配以下HTML內容

    1. <div>  
    2. <ul id="ul1">  
    3. <li id="item1">項目一</li>  
    4. <li id="item2">項目二</li>  
    5. <li id="item3">項目三</li>  
    6. <li id="item4">項目四</li>  
    7. <li id="item5">項目五</li>  
    8. </ul>  
    9. </div>  

    關於Selector可進一步參考官方提供的jQueryAPI詳細的說明及範例:
    API/1.2/Selectors

    在簡睿隨筆中也有中文一覽表及說明:
    jQuery神奇的選擇器(Selector)

  • 相关阅读:
    nginx 启动相关的
    爬取豆瓣读书/文件存储数据/数据库存储数据
    python Web 开发三剑客比较
    scrapy
    爬虫自动登录抽屉
    组合搜索
    html瀑布流
    Ajax上传文件/文件预览
    Form组件
    django分页
  • 原文地址:https://www.cnblogs.com/xiangxiaodong/p/2369622.html
Copyright © 2011-2022 走看看