jQuery syntax

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.

Continuing Learning

||

new file

<!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>

submit Reset Code
Automatic operation

jQuery syntax

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]