jQuery基本使用、jQuery对象和DOM对象

最新推荐文章于 2024-07-20 18:16:53 发布

WangZhang_521

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/WangZhang_521/article/details/124136328

版权

jQuery 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

01-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: pink;
        }
    </style>
</head>

<body>
    <!-- 把js写在DOM元素前面，需要写入口函数才能保证js代码的正常执行 -->
    <!-- 入口函数的功能，都是等DOM元素加载完毕即可执行js代码，不必等到所有外部资源加载完成 -->
    <script>
        //$('div').hide()
        // 1.入口函数第一种写法
        // $(document).ready(function() {
        //     $('div').hide();
        // })

        // 2.入口函数第二种写法
        $(function() {
            $('div').hide();
        })
    </script>

    <div></div>

</body>

</html>

02-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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象：　用原生js获取过来的就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        console.dir(myDiv)

        // 2.jQuery对象： 用jquery方式获取过来的就是jQuery对象(利用$对DOM对象包装后产生的对象，以伪数组的形式存储)   本质：通过$把DOM元素进行了包装
        $('div') // $('div')是一个jQuery对象
        console.dir($('div'))

        // 3.jQuery 对象只能使用jQuery方法 DOM对象则使用原生的javaScript属性和方法
        // myDiv.style.display = 'none';
        //  myDiv.hide()  这个写法是错误的，myDiv是DOM对象，不能使用jquery里的hide()方法
        $('div').style.display = 'none'; // 这个写法是错误的，这个$('div')是jQuery对象，不能使用原生js的属性和方法
    </script>
</body>

</html>

03-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="mov.mp4" muted></video>
    <script>
        // 1.DOM对象转换为jQuery对象
        // (1)我们直接获取视频，得到的就是jquery对象
        // $('video');
        // (2)我们已经使用原生js 获取过来的 DOM对象
        //var myVideo = document.querySelector('video');
        //$(myVideo)  DOM对象转换为jQuery对象
        //  myVideo.play();  // myVideo.play() 正确用法    jQuery里面没有play这个方法

        // 2. jQuery对象转换为DOM对象

        //$('video')[0] //方法一 0是索引号
        // $('video').get(0) //方法二
        // jQuery对象转换为DOM对象后再添加play方法
        // $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

</html>

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本使用、jQuery对象和DOM对象

01-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"> &
复制链接

扫一扫