closest()函式parent()函式的區別
標題中的兩個在實際編碼中非常的常用,它們之間有相同之處,但是不同的地方更多,下面通過程式碼例項介紹一下它們一些相同的和不同,希望能夠給需要的朋友帶來一定的幫助。
一.closest()函式:
此函式可以從當前元素本身向上層匹配,並返回最先匹配的元素。
此函式的匹配元素的數量是0個或者1個。
更多相關內容可以參閱jQuery closest()一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{padding:20px;} .main{ width:200px; height:200px; background:green; margin-bottom:5px; } .box{ width:150px; height:150px; background:red; } p{ width:50px; height:50px; background:blue; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").closest("div").css("background-color","yellow"); }) </script> </head> <body> <div class="main"> <div class="box"> <p></p> </div> </div> </body> </html>
以上程式碼將從p元素開始向上查詢div元素,並將最先被查詢到的元素的背景顏色設定為黃色。
二.parent()函式:
此函式這裡就不介紹了,具體可以參閱jQuery parent()和jQuery parents()和parent()區別一章節。
最後總結:
1.兩個函式都是獲取匹配元素集合中元素的父級元素,但是parent()函式獲取的是一級父元素,而closest()函式獲取的可以是一級父元素也可以不是一級父元素。
2.兩個函式獲取的匹配元素集合中每一個元素的父級元素的數量都是0個或者1個。
相關文章
- 函式宣告和函式表示式的區別函式
- 箭頭函式、簡寫函式、普通函式的區別函式
- prop()函式和attr()函式的區別函式
- JavaScript函式宣告和函式表示式區別JavaScript函式
- 建構函式與普通函式的區別函式
- 箭頭函式與普通函式的區別函式
- append()函式與html()函式的區別APP函式HTML
- jquery position()函式和offset()函式的區別jQuery函式
- # 普通函式和箭頭函式的區別函式
- 函式過載與函式模板的區別函式
- jquery的$.each()函式和$.map()函式的區別jQuery函式
- python內建函式-eval()函式與exec()函式的區別Python函式
- C#中解構函式,Close函式,Dispose函式的區別C#函式
- 箭頭函式與普通函式區別函式
- fill函式與memset函式的區別(c++)函式C++
- JavaScript建構函式和普通函式的區別JavaScript函式
- 正規表示式match()函式和exec()函式的區別函式
- TypeScript 中函式的理解?與 JavaScript 函式的區別?TypeScript函式JavaScript
- 箭頭函式和普通函式的10個區別函式
- 面試題:箭頭函式和普通函式的區別面試題函式
- StretchBlt函式和BitBlt函式的區別和用法函式
- 簡述箭頭函式和普通函式的區別函式
- JavaScript:鉤子函式與回撥函式的區別JavaScript函式
- SQL server 表值函式 標量值函式 區別SQLServer函式
- js表示式方式和函式語句方式宣告函式的區別JS函式
- php取整函式ceil,floor,round,intval函式的區別PHP函式
- closest()、parents()和parent()方法的區別簡單介紹
- 深入理解箭頭函式和傳統函式的區別函式
- Day 59/100 箭頭函式和普通函式的區別函式
- JavaScript方法和函式區別JavaScript函式
- C/C++的mem函式和strcopy函式的區別和應用C++函式
- [譯] 使用 closest() 函式獲取正確的 DOM 元素函式
- 區分函式防抖&函式節流函式
- 前端面試ES6系列:箭頭函式和普通函式的區別前端面試函式
- 例項物件和函式物件的區別物件函式
- Python中函式和方法的區別Python函式
- javascript兩種宣告函式方式的區別JavaScript函式
- 儲存過程和函式的區別儲存過程函式