With jQuery, you can select (query, query) HTML elements and perform "actions" on them.
jQuery syntax
#In the jQuery program, whether it is the selection of page elements or the built-in functions, They all start with the dollar sign "$", and this "$" is the most important and unique object in jQuery: the jQuery object, so when we select page elements or execute functions, we can write like this:
$(function(){})； //执行一个匿名函数$('#box'); //进行执行的ID元素选择$('#box').css('color','red'); //执行函数功能Since "$" itself is the abbreviation of jQuery object, that is to say, we can write the above code in the following form:
jQuery(function(){});jQuery('#box');jQuery('#box').css('color','red');
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#box').css('color','red');
});
// alert($===jQuery);
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>
jQuery’s loading mode
We were before The code has been using $(function(){}); This code is wrapped from beginning to end. Do you know why you do this?
The reason is that our jQuery library file is loaded before the body element. We must wait for all web page codes to be loaded before loading the JavaScript code, otherwise we will not be able to obtain
Instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#box').css('color','red');
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>So our previous JavaScript gave us:
window.onload=function(){}; //JavaScript等待加载us jQuery provides us with:
$(document).ready(function(){}); //jQuery等待加载
## The difference between the two:
1. Execution timing
window.onload: You must wait for the web page to be loaded (including images) before executing the package code.
$(document).ready(function(){}): Just wait for the DOM structure in the web page to be loaded before executing the wrapped code. The effect is higher
2. Number of executions
window.onload can only be executed once. If it is executed a second time, the first execution will be overwritten.
$(document).ready(function(){}): No matter how many times it is executed, Will not be overwritten
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
$(document).ready(function(){
alert(1)
});
$(document).ready(function(){
alert(2)
})
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>
3.Abbreviation
##window.onload None
$(document).ready(function(){}) $(function (){});
In actual applications, we rarely use window.onload directly because it needs to wait for large elements such as pictures to be loaded before executing JS code. If the network speed is slow, , the page has been fully expanded, and the images are still loading slowly. At this time, any JS interactive functions on the page are in suspended animation, such as some drop-down menus and the like.
Next Section
