jQuery学习笔记

最新推荐文章于 2024-06-26 14:36:56 发布
最新推荐文章于 2024-06-26 14:36:56 发布
阅读量209 收藏
点赞数
文章标签： jquery ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53472371/article/details/118757657
版权

jQuery

文章目录

为什么要学习 jQuery

jQuery其实就是一个封装了很多方法的js库。

jQuery：我们考虑如何操作 DOM，jQuery 考虑如何让我们更方便地操作 DOM。

vue 和 React：我们考虑如何操作数据，框架考虑如何将改变后的数据更新到界面。

原生js的缺点：

  • 不能添加多个入口函数（Window.onload），如果添加了多个，后面会把前面的给覆盖。
  • 原生js的api名字都太长太难记
  • 原生js有时候代码冗余
  • 原生js中有些属性或者方法有浏览器兼容问题
  • 原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

jQuery的优势：

  • 是可以有多个入口函数的
  • jquery的api名字都容易记忆
  • jquery代码简洁（隐式迭代）
  • jquery帮我们解决了浏览器兼容问题
  • 容错率高，前面的代码出了问题，后面的代码不受影响

jQuery 语法

基础语法是：

$(selector).action();
  • 美元符号 $ 定义 jQuery。
  • 选择符（selector）“查询”和“查找” HTML 元素。
  • jQuery 的 action() 执行对元素的操作。

文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

// 可以简写成

$(funciton(){

});

jQuery入口函数和Window.onload入口函数的区别

window.onload $(doucment).ready()
执行时机 必须等待网页中所有的内容加载完毕后才能执行（包括图片） 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数 不能同时编写多个。 能同时编写多个。

编写个数的意思就是：

window.onload = function () {
  alert('test1');
};
window.onload = function () {
  alert('test2');
};
//结果只会输出 test2。

$(document).ready(function () {
  alert('test1');
});
$(document).ready(function () {
  alert('test2');
});
//结果两次都输出

第一个jQuery程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    // 1.引入jquery文件
    // 2.写一个入口函数
    // 3.找到你要操作的元素（jQuery选择器），去操作它（给它添加属性，样式，文本...）
    $(document).ready(function () {
   
        $('div').width(100).height(100).css('backgroundColor','red').text('哈哈');
    });
</script>

jQuery 对象和 DOM 对象

代码笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div></div>
    <div></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    //入口函数
    $(function () {
    
        // 1.dom对象
        // 原生js选择器获取到的对象
        // 特点：只能调用dom方法或者属性，不能调用jquery的属性或者方法
        // var div1 = document.getElementById("one");
        // div1.style.backgroundColor = 'red';//dom对象是可以调用dom的属性或者方法
        //div1.css('backgroundColor','red');//报错了 div1.css is not a function,因为dom对象不能调用jquery方法



        // 2.jQuery对象(jQuery对象是个伪数组，jquery对象其实就是dom对象的一个包装集)
        // 利用jquery选择器获取到的元素
        // 特点：只能调用jquery的方法或者属性，不能调用dom对象的属性或者方法
        var $div1 = $('#one');
        // $div1.css('backgroundColor','green');//jquery对象是可以调用jquery的属性或者方法
        //$div1.style.backgoundColor = 'red';//报错了Cannot set property 'backgoundColor' of undefined


        // 3.dom对象转换成jQuery对象
        // var div1 = document.getElementById("one");
        // var $div = $(div1);
        // console.log($div1);


        //4.jquery对象转换成dom对象
        //4.1使用下标来取出来
        var $divs = $('div');
        console.log($divs);
        // var div1 = $divs[0];
        // console.log(div1);


        // 4.2使用jquery的方法 get();
        var div2 = $divs.get(1);
        console.log(div2);
    });
</script>

jQuery 选择器

基本选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="one">
    lllllll
</div>
<div class="Two">
    aaaaaaaa
</div>
<ul>
    <li>1</li>
    <li class="apple">2</li>
    <li class="three">3</li>
</ul>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
    
        $('#one').css('fontSize',40);
        $('.Two').css('fontSize',50);
        $('li').css('backgroundColor','red');
        $('.apple,.three').css('backgroundColor','white');
        $('li.apple').css('backgroundColor','green');
    });
</script>

层次选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <div>
        <span>123</span>
        <span>123</span>
        <span>123</span>
    </div>
    <div>
        <p>1</p>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
    <p>2</p>
</div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
    
        //需求1：获取id为father这个元素的所有div
        console.log($('#father>div'));

        //需求2：获取id为father这个元素的所有子id以及所有子span
        //console.log($('#father>div,p'));//不行，这种意思是获取id为father这个元素的所有子div以及页面上所有的p
        console.log($('#father>div,#father>p'));//可以

        //需求3：获取id为father这个div的所有后代div
        console.log($('#father div'));
    });
</script>

过滤选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
        <li>我是第6个li标签</li>
        <li>我是第7个li标签</li>
        <li>我是第8个li标签</li>
        <li>我是第9个li标签</li>
        <li>我是第10个li标签</li>
    </ul>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
    
        //设置奇数行li标签颜色为天蓝色
        $('li:odd').css('backgroundColor','skyblue');
        //设置偶数行li标签背景色为粉色
        $('li:even').css('backgroundColor','pink');
        //首位两行li显示红色
        $('li:eq(0)').css('backgroundColor','red');
        $('li:eq(9)').css('backgroundColor','red');
    });
</script>

表单选择器

为了使用户能够更加灵活的操作表单，jQuery 中专门加入了表单选择器，利用这个选择器，我们能够特别方便的获取到表单的某个或某类型的元素。

  • :input 选取所有的 、、和 元素。

  • :text 选取所有的单行文本框。

  • :password 选取所有的密码框

  • :radio 选取所有的单选框

  • :checkbox 选取所有的多选框

  • :submit 选取所有的提交按钮

  • :image 选取所有的图像

  • :reset 选取所有的重置按钮

  • :button 选取所有的按钮

  • :file 选取所有的上传域

  • :hidden 选取所有不可见元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input text="text" id="form1" />
<input text="textaera" />
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
    
        $('#form1:input').css({
    
            height: '300px',
        });
        // $('#form1 input').css({
    
        //     height: '300px',
        // });
    });
</script>

筛选选择器（了解）

在这里插入图片描述

jQuery 中的事件和动画

事件

事件绑定

  • bind() 向元素添加事件处理程序（3.0 版本已经弃用）
  • on() 向元素添加事件处理程序（自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。）
  • one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

注意：

  • 使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

  • 如需移除事件处理程序，请使用 off() 方法。

  • 如需添加只运行一次的事件然后移除，请使用 one() 方法。

绑定事件处理器分类：

在这里插入图片描述
在这里插入图片描述

语法为：

$(selector).on(event,childSelector,data,function)

参数说明：

  • event 必需。表示事件类型，规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。事件类型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress 等，也可以为自定义名称。

  • childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

  • data 可选。规定传递到函数的额外数据。

  • function 可选。规定当事件发生时运行的函数。

代码示例1：为 li 元素绑定 click 事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
    
        $('ul li').on('click', function () {
    
            $(this).clone().appendTo('ul');
        });
    });
</script>
</body>
</html>

代码示例2：将上节事件绑定的例子简写绑定事件

  • 像 click，mouseover 和 mouseout 这类事件，我们经常会用到，jQuery 为此提供了一套简写的方法，使得我们能够减少代码量。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
    
        $('ul li').click(function () {
    
            $(this).clone().appendTo('ul');
        });
    });
</script>
</body>
</html>

合成事件

hover() 方法的语法结构为：

$(selector).hover(inFunction, outFunction);

参数说明：

  • inFunction 必需。规定 mouseover 事件发生时运行的函数。

  • outFunction 可选。规定 mouseout 事件发生时运行的函数。

hover() 方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第 1 个函数，当光标移出这个元素时，会触发指定的第 2 个函数。

代码示例：当鼠标移动到 li 上时字体大小变成 24px，移开变为 14px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(function () {
    
        $('ul li').hover(
            function () {
    
                $(this).css({
    
                    'font-size': '24px',
                });
            },
            function () {
    
                $(this).css({
    
                    'font-size': '14px',
                });
            }
        );
    });
</script>
</body>
</html>

事件冒泡

什么是事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个 click 事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的 onclick 属性赋一个函数的名字，就是让这个函数去处理该按钮的 click 事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="content">
    我是外层div元素
    <span>我是内部span元素</span>
    我是外层div元素
</div>
<script type="text/javascript">
    $(function () {
    
        $('span').on('click', function () {
    
            alert('我是内部span元素，我被点击了');
        });
        $('#content').on('click', function () {
    
            alert('我是外部div元素，我被点击了');
        });
        $('body').on('click', function () {
    
            alert('我是body元素，我被点击了');
        });
    });
</script>
</body>
</html>

在点击 span 元素的时候，会触发 span 元素的 click 事件，会输出三条记录，这就是事件冒泡所引起的。 span 元素的 click 事件按照以下的顺序冒泡：

  • span

  • div

  • body

之所以称为事件冒泡，是因为事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的结果，比如我们上面的例子中，需求是点击 span 元素，只触发 span 元素的 click 事件，然而 div 元素 和 body 元素的 click 事件也被触发了，因此，我们需要对事件的作用范围进行限制。

停止事件冒泡：

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在 jQuery 中提供了 event.stopPropagation() 方法来停止冒泡。使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法，如果 event.stopPropagation() 被调用则该方法返回 true，否则返回 false。

停止事件冒泡：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="content">
    我是外层div元素
    <span>我是内部span元素</span>
    我是外层div元素
</div>
<script type="text/javascript">
    $(document).ready(function () {
    
        $('span').on('click', function (event) {
    
            alert('我是内部span元素，我被点击了');
            event.stopPropagation(); //停止事件冒泡
        });
        $('#content').on('click', function (event) {
    
            alert('我是外部div元素，我被点击了');
            event.stopPropagation(); //停止事件冒泡
        });
        $('body').on('click', function () {
    
            alert('我是body元素，我被点击了');
        });
    });
</script>
</body>
</html>
阻止默认行为：

网页中的元素都有自己默认的行为。比如单击超链接后会跳转，单击“提交”按钮后表单会提交，有时候我们需要阻止元素的默认行为。 在 jQuery 中提供了 event.preventDefault() 方法阻止元素发生默认的行为。使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法。

代码示例：阻止链接打开 url

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="https://www.lanqiao.cn/">实验楼</a>
<script type="text/javascript">
    $(document).ready(function () {
    
        $('a').click(function (event) {
    
            event.preventDefault();//阻止元素发生默认的行为
        });
    });
</script>
</body>
</html>

另外表单中我们可以使用该方法来阻止表单的提交，比如当用户名为空时，点击提交按钮，出现提示信息让用户输入内容，并且表单不能提交，只有在用户名里输入内容时，才能提交表单。

事件对象的属性

  1. event.type 获取事件的类型
    代码示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="https://www.lanqiao.cn/">实验楼</a>
<script type="text/javascript">
    $(function () {
    
        $('a').click(function (event) {
    
            event.preventDefault();//阻止元素发生默认的行为
            alert(event.type);//获取事件的类型
        });
    });
</script<
最低0.47元/天 解锁文章
Pulseum
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery 学习笔记
Dshuai7191的博客
08-26 314
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
JQuery学习笔记
kianagrow的博客
05-15 1112
jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1236
本文主要介绍有关jQuery的相关知识点
jquery学习笔记
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 46
搜狗问问-搜狗旗下最大互动问答社区 搜狗问问-搜狗旗下最大互动问答社区
jQuery学习笔记之jQuery常用方法
2401_85124381的博客
06-18 786
/ prop() 方法，直接操作的就是布尔值console.log($btn.prop(“disabled”)) //禁用按钮设置，输出值为布尔值$btn.prop(“disabled”,false) // 开启按钮jQuery 操作样式方法css() 方法jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值。• 语法：jQuery对象.css(name,value);• 参数1：字符串格式的 css 样式属性名• 参数2：设置或更改的属性值。
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
Jquery 学习笔记（二）
10-29
在本篇 jQuery 学习笔记（二）中，我们将重点探讨 jQuery 中的选择器，这部分内容深受 CSS 选择器的影响。 首先，jQuery 的选择器系统与 CSS 的选择器体系非常相似，允许开发者高效地选取页面中的特定元素。CSS ...
【ajax核心05】宏任务与微任务
大前端开发工程师、互联网方向创业者
06-23 763
宏任务与微任务分类、JS代码的执行流程、对应的经典面试题案例整理
【ajax核心03】封装底层axios函数
大前端开发工程师、互联网方向创业者
06-21 546
利用XMLHttpRequest对象、Promise对象、URLSearchParams对象、setRequestHeader方法，进行获取、查找、发送数据的需求封装
AJAX 数据库
06-18 669
AJAX（Asynchronous JavaScript and XML）是一种流行的网络开发技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。AJAX技术与数据库的结合，为现代网络应用提供了更加丰富和动态的用户体验。本文将探讨AJAX如何与数据库交互，以及这种交互在实际应用中的优势和挑战。
【ajax核心02】底层原理-Promise对象
大前端开发工程师、互联网方向创业者
06-21 409
ajax之利用promise对象管理异步任务、Promise三种标记状态、Promise.all使用方法
【ajax基础04】form-serialize插件
大前端开发工程师、互联网方向创业者
06-19 541
form-serialize插件基础知识整合与使用
【ajax07基础】回调函数地狱
大前端开发工程师、互联网方向创业者
06-23 336
回调函数地狱以及利用Promise链式调用解决回调函数地狱问题
【ajax实战02】数据管理网站—验证码登录
最新发布
大前端开发工程师、互联网方向创业者
06-26 369
验证码提交服务器思路整理、以及提交成功或失败后页面前端的显示或隐藏
日常工作记录目录
与海
06-21 672
EasyExcel实现二维码下载与展示

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值