jQuery学习-day01

短命女 2021-11-14 13:42 390阅读 0赞

第一个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>
        
         
        <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>

转载于:https://www.cnblogs.com/lijingjaj/p/11209332.html