Usage analysis of jQuery() method in jQuery_jquery
May 16, 2016 pm 04:24 PMThe examples in this article describe the usage of the jQuery() method in jQuery. Share it with everyone for your reference. The details are as follows:
Definition and usage of jQuery() method:
This method can accept a set of selectors to match the corresponding elements. For example:
In practical applications, $ is generally used to define jQuery. In fact, $ is the abbreviation of jQuery. For example, $("li") can be written as jQuery("li").
The core functions of jQuery are all implemented through this method, or are implemented using this method in some way. The following is a detailed introduction to the usage of this method.
Grammar structure 1:
When the jQuery() method does not have any parameters, it will return an empty jQuery object.
Example code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>jQuery() function-Script Home</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 see the effect</button>
</body>
</html>
Grammar structure 2:
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="http://www.jb51.net/" />
<title>jquery() function-Script Home</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 Zone</li>
<li>jQuery Zone</li>
<li>HTML Zone</li>
</ul>
</div>
<ul>
<li>ASP Zone</li>
<li>Script House<span>Welcome</span></li>
</ul>
<p>The sun is out</p>
<button>Click to see the effect</button>
</body>
</html>
The above code can set the font color in the li element to red.
Example 2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>jquery() function-Script Home</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 Zone</li>
<li>jQuery Zone</li>
<li>HTML Zone</li>
</ul>
</div>
<ul>
<li>ASP Zone</li>
<li>Script House<span>Welcome</span></li>
</ul>
<p>The sun is out</p>
<button>Click to see the effect</button>
</body>
</html>
The above code sets the font color in the li element in the div to red.
Grammar structure three:
Convert DOM elements and DOM element arrays into jQuery objects.
Parameter list:
Example code:
Example 1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>jquery() function-Script Home</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 area</li>
<li>jQuery Zone</li>
<li>HTML Zone</li>
</ul>
</div>
<ul>
<li>ASP Zone</li>
<li>Script House<span>Welcome</span></li>
</ul>
<p>The sun is out</p>
<button>Click to see the effect</button>
</body>
</html>
The above code can set the font color in the li element with id first to red.
Example 2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>jQuery() function-Script Home</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 area</li>
<li>jQuery Zone</li>
<li>HTML Zone</li>
</ul>
</div>
<ul>
<li>ASP Zone</li>
<li>Script House<span>Welcome</span></li>
</ul>
<p>The sun is out</p>
<button>Click to see the effect</button>
</body>
</html>
Grammar structure four:
jQuery (callback) is the abbreviation of $(document).ready(), which is used in several examples above.
Its function is to execute the callback function
after the document is loaded. Parameter list:
Example code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>jQuery() function-Script Home</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery(function(){
alert("Document loading completed");
})
</script>
</head>
<body>
</body>
</html>
alert("Document loading completed");
})
The function is the same as the following code:
alert("Document loading completed");
})
I hope this article will be helpful to everyone’s jQuery programming.
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.
Mar 28, 2024 pm 12:50 PM
How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.
How to enter bios on Colorful motherboard? Teach you two methods
Mar 13, 2024 pm 06:01 PM
How to enter bios on Colorful motherboard? Teach you two methods
How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)
May 01, 2024 pm 12:01 PM
How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)
Summary of methods to obtain administrator rights in Win11
Mar 09, 2024 am 08:45 AM
Summary of methods to obtain administrator rights in Win11
Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed!
Mar 23, 2024 am 10:42 AM
Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed!
Detailed explanation of Oracle version query method
Mar 07, 2024 pm 09:21 PM
Detailed explanation of Oracle version query method
The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)
May 04, 2024 pm 06:01 PM
The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)
How to set font size on mobile phone (easily adjust font size on mobile phone)
May 07, 2024 pm 03:34 PM
How to set font size on mobile phone (easily adjust font size on mobile phone)
