javascript

Usage analysis of jQuery of method in jQuery

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.