首頁 > web前端 > js教程 > 主體

context屬性是什麼? context屬性實例詳解

伊谢尔伦
發布: 2017-06-19 09:11:00
原創
4955 人瀏覽過

概述

context屬性傳回傳給jQuery()的原始的DOM節點內容,即jQuery()的第二個參數。如果沒有指定,那麼context指向目前的文檔(document)。

可以與selector一起使用,用於精確檢測選擇器查詢情況。這兩個屬性對外掛開發人員很有用。

如果當時沒有傳入context參數,則該參數預設為目前文件(document)。 該屬性屬於jQuery物件(實例)。

語法

jQuery1.3 新增此屬性,但在 jQuery 1.10 中被標識為過時。保持該屬性只是為了在jQuery Migrate外掛中支援live()方法的需要,該屬性可能會在未來的版本中被移除。

jQueryObject.context

context屬性的回傳值是Element類型,即使當時傳入jQuery(selector, context)函數的context參數不是Element類型。如果當時傳入的context參數是jQuery對象,則傳回該jQuery對象的context屬性。

範例說明:

以下面這段HTML程式碼為例:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
登入後複製

我們寫如下jQuery程式碼:

var $li = $("ul li");
// 返回当前文档的document对象
document.writeln( $li.context ); // [object HTMLDocument]
document.writeln( $li.context === document ); // true
var n1 = document.getElementById("n1");
var $n3 = $( "#n3", n1 );
// 返回n1
document.writeln( $n3.context ); // [object HTMLDivElement]
document.writeln( $n3.context === n1 ); // true
var $n2 = $("#n2");
var $n4 = $( "#n4", $n2 );
// 返回$n2的context属性:document对象
document.writeln( $n4.context ); // [object HTMLDocument]
document.writeln( $n4.context === document ); // true
var $n3 = $("#n3", n1);
var $n5 = $( "#n5", $n3 );
// 返回$n3的context属性:n1
document.writeln( $n5.context ); // [object HTMLDivElement]
document.writeln( $n5.context === n1 ); // true
登入後複製

示例:檢測使用的文檔內容

  jQuery代碼:  

 $("ul").append("<li>"+$("ul").context+"</li>")
           .append("<li>"+$("ul", document.body).context.nodeName+"</li>");
登入後複製

  結果:  

 [object HTMLDocument]//如果是IE浏览器,则返回[object]
   BODY
登入後複製

【注】:$("ul", document.body).context.nodeName這句話的意思是在document.body裡面找ul元素。

以上是context屬性是什麼? context屬性實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!