JQuery笔记1-开篇初识

最新推荐文章于 2021-04-09 17:57:27 发布

blog12138

最新推荐文章于 2021-04-09 17:57:27 发布

阅读量170

点赞数

分类专栏： JQ 文章标签： JQ jQuery

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109563504

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

开篇引言
一、顶级对象
二、初体验-onload事件
- 1.JS中的onload事件
- 2.JQ中的onload事件
三、初体验-DOM与JQ互转
四、初体验-开关灯demo
总结

开篇引言

JQuery：JS框架库，直白的说就是将原生js进行了封装，使用JQ可以不用考虑兼容问题，这是其优势之一，其二便是轻量级，一个文件，大小不过几百k而已；其三就是链式编程，写的少，做的多；在这些不止于这些优势的情况下，有必要学习一下。

一、顶级对象

Dom中的顶级对象：document ---- 页面中的顶级对象
document点出来的是DOM中的属性和方法
Bom中的顶级对象：window—浏览器中的顶级对象
window点出来的是浏览器中的属性和方法
如：document.window
JQuery中的顶级对象：JQuery（$）
$点出来的是jQuery中的方法。

二、初体验-onload事件

1.JS中的onload事件

JS中的onload只有一个生效，只能写一次，结果只能打印ssss

<script>
        //页面加载的事件：
        window.onload=function () {
            console.log("hhhh");
        }
        //DOM中的页面加载事件只有一个生效，只能写一个。
        window.onload=function () {
            console.log("ssss");
        }
</script>

2.JQ中的onload事件

JQ中的onload事件可以写多个，而下面的第二种方式加载更快，最常使用。

<script src="jquery-1.12.2.js"></script>
    <script>
        //Jquery的代码，window.onload,可以实现多个onload事件，
        $(window).load(function () {
            console.log("hhh");
        });
        $(window).load(function () {
            console.log("sss");
        });
        //页面中所有的元素（标签、图片、文字、、、、）记载完毕才会触发。


        //第二种页面加载事件的写法---都是方法
        //页面中基本的标签加载完毕后，就可以触发了。所以会比前面那段代码先执行。
        $(document).ready(function () {
            console.log("cccc");
        });
        //页面中基本的标签加载后就触发执行。
        jQuery(function () {
            console.log("bbbb");
        });
        //页面中基本的标签加载后就触发执行。
        //最常用
        $(function () {
           console.log("vvvv");
        });
    </script>

打印结果：
在这里插入图片描述

三、初体验-DOM与JQ互转

有些情况需要使用JQ有些时候JQ做不了就要使用原生的JS，所以涉及到互转的情况。

DOM转JQ： $(DOM对象)
JQ转DOM有两种方式：
2.1： $("dom").get(0);
2.2：$("dom")[0]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //实现JQ与DOM互转


        //dom实现按钮操作改背景颜色
        window.onload= function () {
            //dom操作
            // var btn = document.getElementById('btn');
            // btn.onclick = function () {
            //     this.style.backgroundColor = 'red';
            // };

            //dom转JQ对象,只需要吧DOM对象放在$（dom对象）---JQ对象
            // $(btn).click(function () {
            //     $(this).css('backgroundColor','red')
            // });

            //把JQ对象转DOM对象有两种方式
            // 1.$(btn).get(0);
            // 2.$(btn)[0]
            // var btn = document.getElementById('btn');//Dom对象
            // var obj = $(btn).get(0);
            // obj.onclick = function () {
            //     this.style.backgroundColor = 'green';
            // }
            // 方式2
            // var btn = document.getElementById('btn');//Dom对象
            // var obj = $(btn)[0];
            // obj.onclick = function () {
            //     this.style.backgroundColor = 'green';
            // }
        };
        $(function () {
            $('#btn').click(function () {
                $(this).css('backgroundColor', 'yellow');
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</body>
</html>

四、初体验-开关灯demo

实现一个点击按钮页面开关灯效果，分别有原生JS实现和JQ实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 点击按钮设置body的背景颜色，实现网页开光灯的效果
        //DOM的方式：
        // window.onload = function () {
        //     document.getElementById("btn").onclick = function () {
        //         //判断按钮的value值
        //         if(this.value === '关灯'){
        //             document.body.style.backgroundColor = 'black';
        //             this.value = '开灯';
        //         }else {
        //             document.body.style.backgroundColor = 'white';
        //             this.value = '关灯';
        //         }
        //     }
        // };
    </script>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取按钮，注册事件，修改样式
            $("#btn").click(function () {
                if ($(this).val() === '关灯') {
                    $('body').css('backgroundColor','black');
                    $(this).val('开灯');
                }else {
                    $('body').css('backgroundColor','white');
                    $(this).val('关灯');
                }
            });
        })
    </script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>