jQuery learning -day01

The first JQ Code

 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script src="../js/jquery-1.12.4.js"></script>
 7     <script>
 8     $(document).ready(function(){
 9         //所有的jQuery代码写在这里面
10         alert("hello coco");
11     });
12 </script>
13 </head>

2. The primary difference between the entry function JS and JQ

<! DOCTYPE HTML> 
<HTML> 
<head> 
    <title> </ title> 
    <Script type = "text / JavaScript" the src = "../ JS / jQuery-1.12.4.js"> </ Script> 
    <Script = type "text / JavaScript"> 
        the window.onload = function () {
         // this is the native JS 
        // 1. Get original page node with Js 
        var IMG = document.getElementsByTagName ( "IMG" ); 
        the console.log (IMG) ; 

        // 2. Js native function entry can get width and height of the DOM element 
        var width = window.getComputedStyle (IMG) .width; 
        the console.log ( "the onload" , width); 
        }
        
     </ Script>
    <! -  
        loading JS native mode entry function and different JQ
        Native JS will wait until the DOM element is loaded, and the picture will be loaded to perform 
        JQ will wait until the DOM element is loaded, but do not wait until the picture is also loaded will be executed
      -> 
     <! - 
        1 . If you write a native JS a plurality of inlets functions programmed after overwrite the previous
         2 in the preparation of a plurality of inlets .JQ functions, not covering the front of the back
       -> 
    <Script type = "text / JavaScript"> 
        
        $ (Document) .ready ( function ( ) {
         // this is the jQuery 
        // 1. Get page node with the jQuery 
            var $ IMG = $ ( "IMG") [0 ]; 
            the console.log ($ IMG); 

        // 2. function can not get through the inlet JQ width and height of the DOM element 
        // var width = $ $ img.width (); 
        // the console.log ( "READY", $ width); 
        // }); 

        // 3. does not cover the back of the front
        $(document).ready(function(){
            alert("hello1");
        });
        $(document).ready(function(){
            alert("hello2");
        });
    });
    </script>
</head>
<body>
<img src="https://i0.hdslb.com/bfs/sycp/creative_img/201907/576c9c5cc88aeae2a153a45700cd3eb6.jpg">
</body>
</html>

JQ of conflict

. 1 <! DOCTYPE HTML>
 2 <HTML>
 . 3 <head>
 . 4      <title> </ title>
 . 5      <Script type = "text / JavaScript" the src = "../ JS / jQuery-1.12.4.js"> < / Script>
 . 6      <Script type = "text / JavaScript">
 . 7          / * 
. 8          1. release of the right to use $
 9          Precautions: releasing operations must not be used after prepared $ released before preparation of other JQ code to use JQ
 10          jQuery.noConflict ();
 . 11  
12 is          2. access a custom symbol
 13 is          * / 
14  
15          var Happy = jQuery.noConflict ();
16         happy(function(){
17             alert("hello coco");
18         });
19     </script>
20 </head>
21 <body>
22 
23 </body>
24 </html>

Entry function

. 1 <! DOCTYPE HTML>
 2 <HTML>
 . 3 <head>
 . 4      <title> </ title>
 . 5      <Script type = "text / JavaScript" the src = "../ JS / jQuery-1.12.4.js"> < / Script>
 . 6      <Script type = "text / JavaScript">
 . 7          // $ (); represents JQ core function call 
. 8  
. 9          // 1. the function received a 
10          $ ( function () {
 . 11              Alert ( "COOC" );
 12 is  
13 is          // 2 receives a string 
14  
15          // 2.1 receives a string selector 
16          // Returns a JQ object stored in the object found in the DOM elements 
. 17          varbox1 = $ $ (. "box1" );
 18 is          var $ BOX2 = $ ( "# BOX2" );
 . 19          the console.log ($ box1);
 20 is          the console.log ($ BOX2);
 21 is  
22 is          // 2.2 reception code fragment 
23          // return a JQ object stored in the object created DOM element 
24          var $ P $ = ( "<P> I paragraph </ P>" );
 25          the console.log (P $);
 26 is          $ box1.append (P $);
 27  
28          // 3. receiving a DOM element 
29          // will be packaged into a JQ object returns to us 
30          var span = document.getElementsByTagName ( "span") [0 ];
 31 is          Console. log (span);
32         var $span = $(span);
33         console.log($span);
34 
35         });
36 
37 
38     </script>
39 </head>
40 <body>
41 <div class="box1"></div>
42 <div id="box2"></div>
43 <span id="text"></span>
44 </body>
45 </html>

jQuery learning -day01

Guess you like