search

Home >Web Front-end >JS Tutorial >What is $(dom).context in JQuery code? how to use?

What is $(dom).context in JQuery code? how to use?

伊谢尔伦
伊谢尔伦Original
2017-06-16 14:36:182352browse

context, returns the original DOM node content passed to jQuery(), which is the second parameter of jQuery(). If not specified, context points to the current document
For example: $("p span",context);
means selecting the "p span" object from the context object. This is a usage of jQuery, which is to select Find objects within a certain range.
And $(dom)[0].attributes directly finds the attributes under the first dom. It is different from context and specifies the search object.

context Return value: Element

Newly added in jQuery1.3, it returns the original DOM node content passed to jQuery(), which is the second parameter of jQuery(). If not specified, the context points to the current document (document). It can be used with selector for Accurately detect selector query situations. These two properties are useful to plugin developers.

Example: Detect the content of the document 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.

Sample code one: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/"/>
<title>php.cn</title> 
<style type="text/css"> 
p 
{ 
  width:150px; 
  height:150px; 
  border:1px solid blue; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){ 
  $("button").click(function(){ 
    alert($("li").context); 
  })
})
</script>  
</head> 
<body> 
<p> 
  <ul> 
    <li>测试脚本</li> 
  </ul> 
</p> 
<button>点击测试</button> 
</body> 
</html>

By default, the original DOM node passed to jQuery() is Document, and [object] will be returned in IE browser. Other browsers return [object HTMLDocument].

Sample code two: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php.cn</title>
<style type="text/css">
p 
{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){ 
  $("button").click(function(){ 
    alert($("li",document.getElementById("myid")).context); 
  })
})
</script>
</head>
<body>
<p>
  <ul id="myid">
    <li>测试脚本</li>
  </ul>
</p>
<button>点击测试</button>
</body>
</html>

The return value of the above code is [object HTMLUListElement], but in IE browser it is [object]

The above is the detailed content of What is $(dom).context in JQuery code? how to use?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use selector and context in jQuery object?Next article：How to use selector and context in jQuery object?

Related articles

See more