jQuery 学习笔记

最新推荐文章于 2022-12-09 07:48:05 发布

_sunShine女孩

最新推荐文章于 2022-12-09 07:48:05 发布

阅读量763

点赞数

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

本文链接：https://blog.csdn.net/MYgirlHHH/article/details/121953659

版权

jQuery初学

jQuery 是一个便利的JavaScript库，j为JavaScript，Query为查询；
作用：封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
优点：

轻量级，不影响页面加载速度；
跨浏览器兼容；
链式编程、隐式迭代；
对事件、样式、动画支持，大大简化了DOM操作；
支持插件拓展开发，有丰富的第三方插件；
免费、开源。

入口函数

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生JS中的DOMContentLoaded。
不同于原生JS中的load事件是等页面文档、外部的JS文件、CSS文件、图片加载完毕才执行内部代码。

顶级对象 $
$ 是jQuery的别称，在代码中可以使用jQuery代替 $ ，通常直接使用 $ 。
$ 是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用 $ 包装成jQuery对象，就可以调用jQuery的方法。

<html> <!-- ex.html -->
<head>
    <meta charset="UTF-8">
    <title>JavaScript_Exercise</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="JS/fastclick.js"></script>
    <script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
    <style>
        div {
   
            width: 100px;
            height: 100px;
            background: blanchedalmond;
        }
    </style>
</head>
<body>
    <script>
        // answer one
        $(function() {
   
            $('div').hide();
        })
        // answer two
        $(document).ready(function() {
   
            $('div').hide();
        })
    </script>
    <div></div>
</body>
</html>

jQuery对象和DOM对象

区别

用原生JS获取来的对象就是DOM对象，只能使用原生的JavaScript属性和方法；
jQuery方法获取的元素就是jQuery对象，只能使用jQuery方法。
jQuery对象本质是：利用 $ 对DOM对象包装后产生的对象（伪数组形式存储）。

<html> <!-- ex.html -->
<head>
    <meta charset="UTF-8">
    <title>JavaScript_Exercise</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="JS/fastclick.js"></script>
    <script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
    <style>
        div {
   
            width: 100px;
            height: 100px;
            background: blanchedalmond;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // DOM对象
        let div = document.querySelector('div');
        console.dir(div);
        div.style.display = 'none';
        // jQuery对象
        console.log($('div'));
        $('div').hide();
    </script>
</body>
</html>

转换

DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象：$(DOM对象)

$('div');

jQuery对象转换为DOM对象

$('div')[index]; // 法 1
$('div').get(index); // 法 2
// index是索引号

<html> <!-- ex.html -->
<head>
    <meta charset="UTF-8">
    <title>JavaScript_Exercise</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="JS/fastclick.js"></script>
    <script src="JS/jQuery.min.js"></script> <!-- 引入jQuery -->
    <style>
        video {
   
            width: 400px;
            height: 500px;
        }
    </style>
</head>
<body>
    <video src="imag/lovely.mp4" muted></video> <!-- muted静音播放 -->
    <script>
        // 1.DOM对象 转换为 jQuery 对象
        let _video = document.querySelector('video'); // DOM对象
        _video.play();
        $('_video'); // jQuery对象

        // 2. jQuery对象 转换为 DOM对象
        $('video')[0].play();
        $('video').get(0).play();
    </script>
</body>
</html>

选择器 + 迭代

原生JS获取元素方式很繁杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统标准。

基本选择器

$('选择器'); //里面选择器直接写CSS选择器即可，但是要加引号

请添加图片描述

层级选择器

请添加图片描述

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程，叫做隐式迭代。给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

筛选选择器

请添加图片描述

<html> <!-- ex.html -->
<head>
    <meta charset="UTF-8">
    <title>JavaScript_Exercise</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="JS/fastclick.js"></script>
    <script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
    <style>
    </style>
</head>
<body>
    <div>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </div>
    <ol>
        <li>one</li>
        <li class="item">two</li>
        <li>three</li>
        <li>four</li>
    </ol>
    <script>
        $(function() {
   
        	console.log($('.item').parent()); // 查找亲父级
            $("div li").css('color', 'red'); // 选择div下的所有孩子，隐式迭代
            $('ol .item').siblings('li').css({
   "color":"red","font-size":"22px"});
            let index = 3;
            $('div li:eq(3)').css('color', 'green');
            $('ol li').eq(index).css('color', 'green');
        })
    </script>
</body>
</html>

链式编程

<html> <!-- ex.html -->
<head>
    <meta charset="UTF-8">
    <title>JavaScript_Exercise</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="JS/fastclick.js"></script>
    <script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
        $(function() {
   
            $('button').click(function() {
    // 隐式迭代
                $(this).css('background', 'yellow');
                $(this).siblings('button').css('background', '');

                // 链式编程
                $(this).css('background'