Usage analysis of jQuery of method in jQuery

  • 2020-05-10 17:36:41
  • OfStack

This article illustrates the use of the jQuery() method in jQuery as an example. Share with you for your reference. The details are as follows:

Definition and usage of the jQuery() method:
This method accepts a set of selectors to match the corresponding elements. Such as:

jQuery("div")

In practice, $1 usually defines jQuery as $. In fact, $is short for jQuery. For example, $("li") can be written as jQuery("li").
The core functionality of jQuery is implemented in this way, or in some way using this method. The following is a detailed introduction to the use of method 1 next time.
Grammatical structure 1:
When the jQuery() method has no arguments, it returns an empty jQuery object.

jQuery()

Example code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jQuery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert(jQuery().length);
  })
})
</script>
</head>
<body>
  <button> Click to view </button>
</body>
</html>

Grammatical structure 2:

jQuery(selector,context)

Parameter list:

参数 描述
selector 用来匹配元素的选择器。
context 可选。待查找的DOM元素集、文档或者jQuery对象。
如果没有指定,则就是当前整个文档。

If not specified, it is the entire current document.

Example code:
Example 1:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jquery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").css("color","red");
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>DIV+CSS The zone </li>
    <li>jQuery The zone </li>
    <li>HTML The zone </li>
  </ul>
</div>
<ul>
  <li>ASP The zone </li>
  <li> The home of the script <span> You are welcome </span></li>
</ul>
<p> The sun came out </p>
<button> Click to view </button>
</body>
</html>

The above code is able to set the font color in the li element to red.
Example 2:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jquery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li",$("div")).css("color","red");
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>DIV+CSS The zone </li>
    <li>jQuery The zone </li>
    <li>HTML The zone </li>
  </ul>
</div>
<ul>
  <li>ASP The zone </li>
  <li> The home of the script <span> You are welcome </span></li>
</ul>
<p> The sun came out </p>
<button> Click to view </button>
</body>
</html>

The above code sets the font color to red in the li element in div.
Grammatical structure 3:
Convert the array of DOM and DOM elements into jQuery objects.

jQuery(element|elementArray)

Parameter list:

参数 描述
element 要转换成jQuery对象的DOM元素。
elementArray 要转换成jQuery对象的DOM元素数组。

Example code:
Example 1:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jquery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(document.getElementById("first")).css("color","red");
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li id="first">DIV+CSS The zone </li>
    <li>jQuery The zone </li>
    <li>HTML The zone </li>
  </ul>
</div>
<ul>
  <li>ASP The zone </li>
  <li> The home of the script <span> You are welcome </span></li>
</ul>
<p> The sun came out </p>
<button> Click to view </button>
</body>
</html>

The above code can set the font color to red in the li element with id as first.
Example 2:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jQuery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(document.getElementsByTagName("li")).css("color","red");
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li id="first">DIV+CSS The zone </li>
    <li>jQuery The zone </li>
    <li>HTML The zone </li>
  </ul>
</div>
<ul>
  <li>ASP The zone </li>
  <li> The home of the script <span> You are welcome </span></li>
</ul>
<p> The sun came out </p>
<button> Click to view </button>
</body>
</html>

Grammatical structure 4:

jQuery(callback)

jQuery(callback) is a shortened form of $(document).ready() is used in several of the examples above.
It is used to execute the callback function after the document has been loaded
Parameter list:
参数 描述
callback 文档加载完成之后要执行的函数。

Example code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>jQuery() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery(function(){
  alert(" The document is loaded ");
})
</script>
</head>
<body>
</body>
</html>

jQuery(function(){
    alert(" The document is loaded ");
})

The function is the same as the following code:

$(document).ready(function(){
    alert(" The document is loaded ");
})

I hope this article has been helpful to your jQuery programming.


Related articles: