35. jquery basic syntax at the front

Tag: Radius height interlaced color page log ons blank processing code

1. Concept 1.1 Basic knowledge

jquery is a multi-browser-compatible JavaScript library that encapsulates some of the features commonly used during development, like Python modules

jquery is written with JS, JS is the basis

jquery is simple to write, highly efficient and compatible.

1.2 RELATED LINKS

Official website: http://jquery.com/

Official website API Document: http://api.jquery.com/

Chinese API Documentation: HTTP://WWW.CSS88.COM/JQAPI-1.9/

Note: There are two versions in the official website, one is compressed version, for the production environment to use, one is not compressed, for development use

You go in and copy it down and put it in a file that ends with JS (like Jquery-3.3.1.js)

1.3 Use steps

Introduction Package <script type= "Text/javascript" src= "Jquery-3.3.1.js" ></script>

Define the entry function $ (document). Ready (function () {---})

Event Handling Obtn.click (function () {---})

Simple to use:

<! DOCTYPE html>div{width:100px;            height:100px; Background-Color:green; Margin-top:20px;        Display:none; }    </style> $ (document). Ready (function(){            //get DOM elements based on tag name            varOBTN = $ (' button '); varOdiv = $ (' div '); Obtn.click (function(){                //Display The box, you can add the displayed time, the 2s gradient display effectOdiv.show (2000); //Set ContentOdiv.html (' 666 '); //odiv.show (+). HTML (' 666 ');            }); })    </script> <button> Operations </button> <div></div> <div></div> <div>&lt ;/div> </body>The entry function for 1.4jQuery and the $ sign entry function:
Native JS entry function: Can only occur once, there will be more than one occurrence of event coverage
         // Native JS's entry function. All content on the page is loaded before execution.         // not only to wait for the text to load, but also to wait for the picture to be loaded before executing the function.        function  () {           alert (1);       }    
jquery entry function: Can occur any time, does not occur overwrite
// 1. When the document is loaded and the picture is not loaded, the function can be executed.        $ (document). Ready (function  () {           alert (1);       })
Or
  // 3. When the document is loaded and the picture is loaded, the function is executed.        $ (window). Ready (function  () {           alert (1);       })
$ symbol:
jquery uses the $ notation because it's simple to write, and when printed, it turns out that he's actually the same, and it actually represents a function name.
    // Call the function above our custom $     $ (document). Ready (function//  Call entry functions     $ // Call the entry function // get all div tag elements      
Comparison of Dom objects and jquery objects in 1.5js
DIV structure
        <div id= "App" ></div>        <div class= "box" ></div>        <div class= "box" ></div >        <div></div>   
Native JS gets these element nodes
    <script type= "Text/javascript" >        var mybox = document.getElementById ("app");           // get a single element by ID         Console.log (mybox);         var boxarr = document.getelementsbyclassname ("box");  // a pseudo-array is obtained through class         Console.log (Boxarr);         var divarr = document.getElementsByTagName ("div");    // a pseudo-array is obtained through a tag         Console.log (Divarr);    
Effect:
Get these element nodes (all arrays) through jquery:
    <script type= "Text/javascript" >        // Note Writing method, must have $ character        Console.log ($ (' #app '));        Console.log ($ ('. Box '));        Console.log ($ (' div '));     </script>    
Effect:
jquery has its own CSS () method to set CSS properties directly in the code for the DIV
$ (' div '). css ({                ' width ': ' 200px ',                ' height ': ' 200px ',                " Background-color ": ' Red ',                ' margin-top ': ' 20px '            )
Conversion between 1.6jQuery and Dom objects
the jquery object is created after wrapping the DOM object, but the two cannot be mixed, and the DOM object can use the DOM method so that the jquery object can use the jquery method
Dom object converted to jquery object (the library is already imported by default)
<body>      <input type= "text" name= "username" id= "username" value= "Miss Wang"  />      <script>          // get DOM Object          var username=document.getelementbyid ("username");          alert (username.value);                     // You can use the methods in jquery after converting to jquery object conversions.          var $username =$ (username);          Alert ("^^ ^" +$username. Val ());       </script>        </body>  
jquery objects converted to DOM objects
<body> <input type= "text" name= "username" id= "username" value= "xiao Wang teacher"/> <script>//get jquery Object        var$username =$ ("#username");                    Alert ($username. Val ()); //convert to DOM object        //(1) JQuery object is an array object, you can get the corresponding Dom object by means of [index]        varUsername= $username [0];                    alert (Username.value); //jquery itself provides, through the. Get (Index) method, to get the corresponding DOM object        //convert to DOM object        varusername1 = $username. Get (0);      alert (Username1.value); </script> </body>
Here's a look at examples
Use jquery for alternating colors:
<!     DOCTYPE html>//Call the entry function$ (document). Ready (function(){            //declaring Variables                varLis = $ (' li ');  for(vari=0;i<lis.length;i++){                    if(i%2===0) {Lis[i].style.backgroundcolor = "green";} Else{Lis[i].style.backgroundcolor = "yellow";}}}) </script> </body>
Using jquery to switch colors with one click
<! DOCTYPE html>. c1{width:200px;            height:200px;            BORDER:1PX solid Grey; Border-radius:50%; Margin-top:50px; Margin:0Auto; }. c2 {background-Color:yellow; }    </style>//Find button Add event$ (". Btn"). On (' click ',function () {            //let the color change when you click$ (". C1"). Toggleclass (' C2 '))         }); </script></body>
Let's take a look at the problem of Haiyan's finishing work:
35. jquery basic syntax at the front