jQuery parents()和parent()區別
一.parents()函式:
此函式能夠獲取匹配元素的所有父元素,程式碼示例:
[JavaScript] 純文字檢視 複製程式碼$(".mayi").parents().css("color","red");
以上程式碼可以將所有class屬性值為"mayi"的元素的所有父級元素的字型顏色設定為紅色。
看一段完整的程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>計算被選中核取方塊的數量-螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".mayi").parents().css("color","red"); }) </script> </head> <body> <div> 螞蟻部落一 <div> 螞蟻部落一一 <span class="mayi">螞蟻部落歡迎您</span> </div> </div> </body> </html>
以上程式碼可以將span元素的所有父元素中的字型顏色設定為紅色。
二.parent()函式:
此函式能夠能夠獲取所有匹配元素的一級父元素,而不是所有父元素。
[JavaScript] 純文字檢視 複製程式碼$(".mayi").parents().css("color","red");
以上程式碼可以將class屬性值為mayi的元素的一級父元素中的字型顏色設定為紅色。
看一段完整的程式碼:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>計算被選中核取方塊的數量-螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".mayi").parent().css("color","red"); }) </script> </head> <body> <div> 螞蟻部落一 <div> 螞蟻部落一一 <span class="mayi">螞蟻部落歡迎您</span> </div> </div> </body> </html>
以上程式碼只能夠span元素的一級父元素中的"螞蟻部落一一"的字型顏色設定為紅色。
這兩個函式的最大區別就是父元素的返回,從函式的名稱也能夠感知到,帶有s能夠獲取所有的父元素,沒有s的只能夠獲取一級父元素,很簡單這裡就不多介紹了,可以參閱相關閱讀。
相關閱讀:
(1).css()函式可以參閱jQuery css()一章節。
(2).parent()函式可以參閱jQuery parent()一章節。
(3).parents()函式可以參閱jQuery parents()一章節。
相關文章
- jquery $(this) 和this的區別jQuery
- JQuery this和$(this)的區別jQuery
- jQuery的html()和text()區別jQueryHTML
- jquery prop和attr的區別jQuery
- jquery中prop和attr的區別jQuery
- Jquery中attr和prop的區別jQuery
- 使用jquery和使用框架的區別jQuery框架
- jQuery中css()和attr()方法的區別jQueryCSS
- JQuery中html()和val()的用法區別jQueryHTML
- php物件導向知識 this,self,parent的區別PHP物件
- jquery Promise和ES6 Promise的區別jQueryPromise
- docment.getelementbyid 和jquery裡的$(#'id')區別jQuery
- axios,Ajax,jQuery ajax,axios和fetch的區別iOSjQuery
- jQuery實戰之 attr() 和 prop() 的區別jQuery
- $refs 、$parents
- XML和HTML的主要區別、 jQuery 能做什麼?JavaScript中的“=、==、===”區別?XMLHTMLjQueryJavaScript
- jquery中append、prepend, before和after方法的區別jQueryAPP
- jquery中$.get()提交和$.post()提交有區別嗎?jQuery
- jQuery html(),text(),val()區別jQueryHTML
- jQuery的AJAX請求中contentType和dataType的區別jQuery
- jQuery中onload與ready區別jQuery
- Jquery中獲取iframe的程式碼(window.top.parent)jQuery
- jQuery基礎與js的區別jQueryJS
- Ajax,jQuery ajax,axios和fetch介紹、區別以及優缺點jQueryiOS
- window.onload()函式和jQuery中的document.ready()區別函式jQuery
- jquery中dom節點操作方法empty和remove的區別jQueryREM
- Checkbox點選多次失效原因,源於Jquery中.attr和.prop的區別jQuery
- jquery中append()方法與after()方法的區別jQueryAPP
- 和區別
- window.onload()函式和jQuery中的document.ready()有什麼區別?函式jQuery
- ../和./和/的區別
- LinkedList和ArrayList的區別、Vector和ArrayList的區別
- http和https的區別/get和post的區別HTTP
- ||和??的區別
- /*和/**的區別
- JQuery的ready函式與JS的onload的區別jQuery函式JS
- window.parent
- Synchronize和ReentrantLock區別ReentrantLock
- SSL和TLS 區別TLS