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