01 jQuery引用&对象转换&DOM操作

jQuery引用及入口

 1     <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery引用及入口</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <!--入口函数-->
10     <!--window.onload()  // 1覆盖现象 2等所有图片资源加载完成之后才调用脚本代码，用户体验欠佳-->
11     <script type="text/javascript">
12         // console.log(jQuery);
13         // console.log($);  //同上  $===jQuery
14 
15         //入口函数
16         console.log($(document));
17         //文档对象加载完就运行这个函数 不需要等图片加载完
18         $(document).ready(
19             function () {
20                 alert("dom文档对象加载完了");
21             }
22         );
23         // 简写  跟 window.onload不一样  Jquery这里不会覆盖
24         $(function () {
25             alert("文档对象确实加载完了，不会覆盖")
26         });
27 
28         //等图图片资源加载完执行函数
29         $(window).ready(
30             function () {
31                 alert("js入口函数，等图片加载完运行这个函数")
32             }
33         );
34 
35         //等图图片资源加载完执行函数，Jquery调用同样不会覆盖
36         $(window).ready(
37             function () {
38                 alert("js入口函数，等图片加载完运行这个函数，不会覆盖！")
39             }
40         )
41 
42     </script>
43 
44 </body>
45 </html>

jQuery与js对象转换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery与js对象转换</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style>
        .box{
            height: 400px;
            width: 400px;
            background: green;
        }
        #box2{
            height: 200px;
            width: 200px;
            background: red;
        }

    </style>
</head>
<body>
    <div class="box">
        <div id="box2"></div>
    </div>
    <script type="text/javascript">
        // jQuery中只有两个属性  索引和length 其他的都是方法 即封装好的API
        // jQuery对象只能用jQuery的方法(api)  js对象只能应js的方法 不能混淆

        // jQuery对象 转换为 js对象
        var jqo = $(".box");  // 获取jquery对象
        console.log(jqo); //
        var jso = jqo[0];  // 取jquery对象的第一个元素 即是js对象
        console.log(jso);
        var jso2 = jqo.get(0);  // 还可以这样取
        console.log(jso2);

        // js对象转换为jquery对象
        var jsobj = document.getElementById("box2");  // 获取js对象
        console.log(jsobj);
        var jqobj = $(jsobj);
        console.log(jqobj);

    </script>
</body>
</html>

jQuery操作dom

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery操作dom</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <div id="box"></div>
10     <div class="box"></div>
11     <div class="box"></div>
12     <script type="text/javascript">
13         // jQuery操作dom三部曲  1事件源 2事件 3事件驱动程序
14         $(function () {
15             //标签选择器
16             var jqBox1 = $("div");  // 标签选择器
17             var jqBox2 = $(".box"); // 类选择器
18             var jqBox3 = $("#box"); // id选择器
19             //修改/增加box的样式 .css
20             jqBox1.css("height","120");
21             jqBox1.css("width","80");
22             jqBox1.css("margin-top",8);
23             jqBox1.css("background","red");
24             jqBox1.text("嘿嘿嘿");  // text 加入文本
25 
26             jqBox2.css("background","green");
27             jqBox2.eq(0).text("嘎嘎嘎");  // text 加入文本
28 
29             jqBox3.css("background","yellow");
30             jqBox3.text("嘻嘻嘻");  // text 加入文本
31 
32             // js实现点击事件
33             // for(var i = 0;i < jqBox1.length; i++){
34             //     var temp = jqBox1[i];
35             //     console.log(temp.innerText);
36             //     temp.onclick=function () {
37             //         alert(1);
38             //     }
39             // }
40 
41             // jQuery 实现点击事件
42             // jqBox1.click(function () {
43             //     console.log(this); // this指的是调用方法者本身，这里调用click的是jqBox1,是一个jq对象，但是打印出来发现是js对象
44             //     console.log($(this).text()); // jq对象获取文本的方法
45             //     alert(this.innerText);
46             //
47             // })
48 
49             // 点击盒子 消失
50             jqBox1.click(function () {
51                 // $(this).css("display","none"); //jq的样式控制
52                 $(this).hide(3000); //jq的hide方法  3000秒内慢慢消失
53             })
54         })
55 
56 
57     </script>
58 </body>
59 </html>