博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
為jQuery擴充功能,得到DOM同級元素
阅读量:6375 次
发布时间:2019-06-23

本文共 974 字,大约阅读时间需要 3 分钟。

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詳細的說明及範例:

在簡睿隨筆中也有中文一覽表及說明:

转载地址:http://oxjqa.baihongyu.com/

你可能感兴趣的文章
flask, SQLAlchemy, sqlite3 实现 RESTful API 的 todo list, 同时支持form操作
查看>>
家里蹲大学数学杂志期刊模式目录
查看>>
数据结构:最小生成树--Kruskal算法
查看>>
Swift_1_基本数据类型
查看>>
POJ 1849 Two(遍历树)
查看>>
Recurrent Neural Network[CTC]
查看>>
VS注释与取消注释快捷键
查看>>
深入解析Vuex实战总结
查看>>
.NET编译项目时出现《此实现不是 Windows 平台 FIPS 验证的加密算法的一部分》处理方法...
查看>>
流水落花春去也
查看>>
从.NET中委托写法的演变谈开去(下):性能相关
查看>>
C# 多人聊天程序
查看>>
【教训】为什么不作备份?!
查看>>
网搜索引擎架构设计
查看>>
iOS笔记:内存管理
查看>>
python开发_python中str.format()
查看>>
HTML5, CSS3, ES5新的web标准和浏览器支持一览 转
查看>>
ThinkPHP3.0启动过程
查看>>
【leetcode】Longest Common Prefix (easy)
查看>>
JAX-WS(JWS)发布WebService
查看>>