What is the context attribute? Detailed explanation of context attribute examples

Overview

contextAttributesReturns the original DOM node content passed to jQuery(), that is The second parameter of jQuery(). If not specified, context points to the current document (document).

Can be used with selector to accurately detect selector query situations. These two properties are useful to plugin developers.

If the context parameter is not passed in at that time, this parameter defaults to the current document (document). This property belongs to the jQuery object (instance).

Syntax

This property was added in jQuery 1.3, but was marked as obsolete in jQuery 1.10. This attribute is maintained only to support the live() method in the jQuery Migrate plug-in. This attribute may be removed in a future version.

jQueryObject.context

The return value of the context property is of Element type, even if the context parameter passed into the jQuery(selector, context) function is not of Element type. If the context parameter passed in at that time is a jQuery object, the context property of the jQuery object is returned.

Example description:

Take the following HTML code as an example:

<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>

We write the following jQuery code:

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

Example: Detect the document content used

jQuery code:

 $("ul").append("<li>"+$("ul").context+"</li>")
           .append("<li>"+$("ul", document.body).context.nodeName+"</li>");

Result:

 [object HTMLDocument]//如果是IE浏览器，则返回[object]
   BODY

[Note]: $("ul", document.body).context.nodeName This sentence means to find the ul element in document.body.

The above is the detailed content of What is the context attribute? Detailed explanation of context attribute examples. For more information, please follow other related articles on the PHP Chinese website!