jquery的基本使用

最新推荐文章于 2024-11-05 15:26:40 发布

九阈

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量87

点赞数

分类专栏： # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_46048542/article/details/125503046

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

jquery的下载

官网地址：https://jquery.com/
请添加图片描述

点进去复制粘贴到vscode新建的文件下面

jquery的基本使用-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            $('div').hide();
        })
    </script>
    <div></div>
</body>
</html>

等价于

   <script>
        $(document).ready(function(){
            $('div').hide();
        })
    </script>

请添加图片描述

jquery的顶级对象$

1.$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。
2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法。

jquery对象和DOM对象

请添加图片描述

jquery对象和DOM对象相互转换

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <video src="1.mp4" muted></video>
    <script>
        //（1）DOM对象转换为jquery对象
        //我们直接获取视频，得到就是jquery对象
        $('video')
        //jquery里面没有play这个方法
        //我们使用原生js获取过来DOM对象
        //jquery对象转换为DOM对象
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>
</html>