jQuery学习-day01

第一个JQ代码

 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.原生JS和JQ入口函数的区别

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        window.onload = function(){
        //这个是原生js
        //1.用原生Js获取页面节点
        var img = document.getElementsByTagName("img");
        console.log(img);

        //2.原生Js入口函数可以拿到DOM元素的宽高
        var width = window.getComputedStyle(img).width;
        console.log("onload",width);
        }
        
    </script>
    <!-- 
        原生JS和JQ入口函数的加载模式不同
        原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
        JQ会等到DOM元素加载完毕，但是不会等到图片也加载完毕就会执行
     -->
     <!-- 
        1.原生JS如果编写了多个入口函数，后面编写的会覆盖前面的
        2.JQ中编写多个入口函数，后面不会覆盖前面的
      -->
    <script type="text/javascript">
        
        $(document).ready(function(){
        //这个是jQuery
        //1.用jQuery获取页面节点
            var $img = $("img")[0];
            console.log($img);

        //2.通过JQ入口函数不可以拿到DOM元素的宽高
        // var $width = $img.width();
        // console.log("ready",$width);
        // });

        //3.后面的不会覆盖前面的
        $(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的冲突问题

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
 6     <script type="text/javascript">
 7         /*
 8         1.释放$的使用权
 9         注意点：释放操作必须在编写其他JQ代码之前编写释放之后就不能再使用$,改为使用JQ
10         jQuery.noConflict();
11 
12         2.自定义一个访问符号
13         */
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>

入口函数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
 6     <script type="text/javascript">
 7         //$();就代表调用JQ的核心函数
 8 
 9         //1.接收一个函数
10         $(function(){
11             alert("cooc");
12 
13         //2.接收一个字符串
14 
15         //2.1接收一个字符串选择器
16         //返回一个JQ对象，对象中保存了找到的DOM元素
17         var $box1 = $(".box1");
18         var $box2 = $("#box2");
19         console.log($box1);
20         console.log($box2);
21 
22         //2.2接收一个代码片段
23         //会返回一个JQ对象，对象中保存了创建的DOM元素
24         var $p = $("<p>我是段落</p>");
25         console.log($p);
26         $box1.append($p);
27 
28         //3.接收一个DOM元素
29         //会被包装成一个JQ对象返回给我们
30         var span = document.getElementsByTagName("span")[0];
31         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>

猜你喜欢