一、JQuery的基本使用

最新推荐文章于 2024-08-05 17:07:25 发布

m0_63634307

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量262

点赞数 10

分类专栏：笔记文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_63634307/article/details/140529515

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、jQuery的基本使用

1.jQuery概念

2.jQuery的顶级对象

（一）jQuery的基本使用

1.jQuery概念

jQuery是一个快速、简洁的JavaScript库。

JavaScript库即library，是一个封装好的特定的集合（方法和函数）。

学习jQuery本质：学习调用这些函数（方法）。

2.jQuery的顶级对象

1.$是jQuery的别称，在代码中可以使用jQuery代替$，一般为了方便，通常直接使用$。

2.$是jQuery的顶级对象，相当于原生JavaScript中window，用$把元素包装成jQuery对象，就能调用jQuery方法。

如下代码所示，div隐藏不显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <script>
        // $ 相当于 window
        // 等着dom加载完毕在执行js代码
         $(document).ready(function () {
            $("div").hide()
         })
    </script>
    <div></div>
</body>

</html>

特别注意

<script>
        // js的加载事件
        // 只能写一个，后面的会覆盖前面的
        window.onload = function () {
            alert(1)
        }
        window.onload = function () {
            alert(2)
        }      
    </script>

<script>
        // jq中的页面加载事件 可以写多个 都会被按顺序执行
        $(function () {
            alert(1)
         })
        $(function () {
             alert(2)
         })
    </script>

3.jQuery对象和DOM对象

dom对象--使用原生js获取过来的对象

jq对象--使用jq获取过来的对象通过$进行包装（伪数组的形式存储）

jq的本质是一个数组

var jq={dom对象，dom对象，dom对象....}

在jq中不能使用js的属性和方法，在js中不能使用jq的属性和方法，但二者之间可以相互转换

1.dom对象 -> jq对象

格式$(dom对象)

2.jq对象转换成dom对象

$对象[索引值]

m0_63634307

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
一、JQuery的基本使用

2.$是jQuery的顶级对象，相当于原生JavaScript中window，用$把元素包装成jQuery对象，就能调用jQuery方法。1.$是jQuery的别称，在代码中可以使用jQuery代替$，一般为了方便，通常直接使用$。在jq中不能使用js的属性和方法，在js中不能使用jq的属性和方法，但二者之间可以相互转换。jq对象--使用jq获取过来的对象通过$进行包装（伪数组的形式存储）var jq={dom对象，dom对象，dom对象....}dom对象--使用原生js获取过来的对象。
复制链接

扫一扫