不看后悔系列——JQuery学习笔记

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量1.9k 收藏 23
点赞数 9
分类专栏： 前端 文章标签： JQery 前端 JavaScript B站
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44799924/article/details/115710612
版权
本文详细介绍了jQuery的入门知识，包括jQuery的下载、加载模式、选择器、事件处理、DOM操作等方面。重点讲解了jQuery的核心函数、选择器（如基本选择器、过滤选择器）、属性操作（attr与prop方法的区别）以及事件处理机制，旨在帮助开发者快速理解和掌握jQuery的实用技巧。
摘要由CSDN通过智能技术生成

文章目录

初识jQuery

jQuery是什么？
在这里插入图片描述

  • jQuery是一个JavaScript库，旨在简化HTML DOM树遍历和操作，以及事件处理，动画和Ajax。它是使用许可的MIT许可证的免费开源软件。Web分析表明它是大范围部署最广泛的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）。
  • jQuery的语法旨在使导航文档，选择DOM元素，创建动画，处理事件和开发Ajax应用程序变得更加容易。jQuery还为开发人员提供了在JavaScript库之上创建插件的功能。这使开发人员能够为低级交互和动画，高级效果和高级，可主题的小部件创建抽象。jQuery库的模块化方法允许创建功能强大的动态Web页面和Web应用程序。

体验jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <style>
        *{
    
            margin: 0;
            padding: 0;
        }
        div{
    
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        window.onload = function (ev) {
    
            // 1.利用原生的JS查找DOM元素
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("box1")[0];
            var div3 = document.getElementById("box2");
             console.log(div1);
             console.log(div2);
             console.log(div3);
            // 2.利用原生的JS修改背景颜色
             div1.style.backgroundColor = "red";
             div2.style.backgroundColor = "blue";
             div3.style.backgroundColor = "yellow";
        }

        $(function () {
    
            var $div1 = $("div");
            var $div2 = $(".box1");
            var $div3 = $("#box2");
             console.log($div1);
             console.log($div2);
             console.log($div3);
            $div1.css({
    
               background: "red",
                width: "200px",
                height: "200px"
            });
            $div2.css({
    
                background: "blue"
            });
            $div3.css({
    
                background: "yellow"
            });
        });
    </script>

</head>
<body>
	<div></div>
	<div class="box1"></div>
	<div id="box2"></div>
</body>
</html>

为什么要使用jQuery

  • 强大选择器: 方便快速查找DOM元素

    • 如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
    • jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器

  • 链式调用: 可以通过.不断调用jQuery对象的方法

  $(document).ready(function () {
   
       var $div1 = $("div");
       // 链式调用
        $div1.eq(1).css(
            'background',"red"
        ).css('width', '200px');
    });
  • 隐式遍历(迭代): 一次操作多个元素
$(document).ready(function(){
   
	//隐式遍历找到的所有div
	$("div).css('background','red');
});
  • 读写合一: 读数据/写数据使用是一个函数
$(document).ready(function () {
   
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
  • 事件处理
  • DOM操作(C增U改D删)
  • 样式操作
  • 动画
  • 丰富的插件支持
  • 浏览器兼容(前端开发者痛点)

    • JQery1.x版：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日).

    • JQery2.x版：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4 (2016年5月20日)

    • JQery3.x版：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。

应该选择几点几版本jQuery?

  • 查看百度网页源码：使用的是1.x
  • 查看腾讯网页源码：使用的是1.x
  • 查看京东网页源码：使用的是1.x
  • 综上所述学习1.x,选择1.x

应该使用开发版还是生产版?

  • 开发版: 所有代码没有经过压缩,体积更大(200-300KB)
  • 生产版:所有代码经过压缩,提及更小(30-40KB)
  • 初学者为了更好的理解jQuery编码时使用开发板,项目上线时为了提升访问速度使用生产版

1.jQuery下载地址

jQuery下载

1.2 jQuery和JS的加载模式

原生JS和jQuery入口函数的加载模式不同

  • 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
  • jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery和JS入口函数的区别</title>
    <style>
        div {
    
            width: 100px;
            height: 100px;
        }
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        // 原生JS和jQuery入口函数的加载模式不同
        // 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
        // jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
        
        // 原生JS的固定写法
        window.onload = function (ev) {
    
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            var width = window.getComputedStyle(img).width;
            console.log(width);     //540px
        }
        
        //jQuery固定写法
        $(document).ready(function (ev) {
    
            var $width = $("img").width();
            console.log($width);        // 0
        });
    </script>
</head>
<body>
	<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>
  • 多个window.onload只会执行一次, 后面的会覆盖前面的
  • 多个$(document).ready()会执行多次,后面的不会覆盖前面的

不会覆盖的本质

  • jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰
  /****只弹出Hello 3***/
        window.onload = function (ev) {
   
            alert("Hello 1");
        }
        window.onload = function (ev) {
   
	        alert("Hello 2");
        }
        window.onload = function (ev) {
   
	        alert("Hello 3");
        }
        /***** 都会弹出****/
        $(document).ready(function (ev) {
   
	        alert("Hello 1");
        });
        $(document).ready(function (ev) {
   
	        alert("Hello 2");
        });
        $(document).ready(function (ev) {
   
	        alert("Hello 3");
        });

在这里插入图片描述

为什么我们能访问$符号

  • 因为$符号是jQuery框架对外暴露的一个全局变量
window.jQuery = window.$ = jQuery;
  • 所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery

1.3 jQuery入口函数的其他编写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /*
        window.onload = function (ev) {
            // 1.通过原生的JS入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("images")[0];
            console.log(images);
            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(images).width;
            console.log("onload", width);
        }
        */

        /*
        * 1.原生JS和jQuery入口函数的加载模式不同
        * 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
        * jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
        * */
        /*
        $(document).ready(function () {
            // 1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images");
            console.log($images);
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
            var $width = $images.width();
            console.log("ready", $width);
        });
        */

        /*
        1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
        2.jQuery中编写多个入口函数,后面的不会覆盖前面的
        */
        // window.onload = function (ev) {
    
        //     alert("hello lnj1");
        // }
        // window.onload = function (ev) {
    
        //     alert("hello lnj2");
        // }

        $(document).ready(function () {
    
            alert("hello lnj1");
        });
        $(document).ready(function () {
    
            alert("hello lnj2");
        });
    </script>
</head>
<body>
	<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">
</body>
</html>

1.4 jQuery入口函数的其它写法

<script>
        // 1.第一种写法
        $(document).ready(function () {
    
            // alert("hello lnj");
        });

        // 2.第二种写法
        jQuery(document).ready(function () {
    
            // alert("hello lnj");
        });

        // 3.第三种写法(推荐)
        $(function () {
    
            // alert("hello lnj");
        });

        // 4.第四种写法
        jQuery(function () {
    
            alert("hello lnj");
        });
    </script>

1.5jQuery冲突问题

很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过访 问 , B 框 架 也 通 过 访问,B框架也通过访问,B框架也通过访问),解决方案见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery冲突问题</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>
    <script>
        // 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
        // jQuery.noConflict();

        // 2.自定义一个访问符号
        var nj = jQuery.noConflict();
        nj(function () {
    
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>

2.jQuery核心函数和工具方法

2.1jQuery核心函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jQuery核心函数</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $();就代表调用jQuery的核心函数

        // 1.接收一个函数
        $(function () {
    
            alert("hello lnj");
            // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 2.2接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);
            // 3.接收一个DOM元素
            // 会被包装成一个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
        });
    </script>
</head>
<body>
	<div class="box1"></div>
	<div id="box2"></div>
	<span>我是span</span>
</body>
</html>

2.2 JQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-jQuery对象</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
    
            /*
            * 1.什么是jQuery对象
            * jQuery对象是一个伪数组
            *
            */
            var $div = $("div");
            console.log($div);

            var arr = [1, 3, 5];
            console.log(arr);
        });
    </script>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
</body>
</html>

什么是伪数组?

  • 有0到length-1的属性
  • 并且有length属性

例如：

var obj = {
   0:"lnj", 1:"33", 2:"male", length: 3}

2.3 JQuery静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-静态方法和实例方法</title>
    <script>
        // 1.定义一个类
        function AClass() {
    
        }
        // 2.给这个类添加一个静态方法
        // 直接添加给类的就是静态方法
        AClass.staticMethod = function () {
    
            alert("staticMethod");
        }
        // 静态方法通过类名调用
        AClass.staticMethod();

        // 3.给这个类添加一个实例方法
        AClass.prototype.instanceMethod = function () {
    
            alert("instanceMethod");
        }
        // 实例方法通过类的实例调用
        // 创建一个实例(创建一个对象)
        var a = new AClass();
        // 通过实例调用实例方法
        a.instanceMethod();
    </script>
</head>
<body>

</body>
</html>

2.4 静态方法each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-静态方法each方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {
    0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        /*
        第一个参数: 遍历到的元素
        第二个参数: 当前遍历到的索引
        注意点:
        原生的forEach方法只能遍历数组, 不能遍历伪数组
        */
         arr.forEach(function (value, index) {
    
             console.log(index, value);
         });
         obj.forEach(function (value, index) {
    
             console.log(index, value);
         });

        // 1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数: 当前遍历到的索引
        第二个参数: 遍历到的元素
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
         $
最低0.47元/天 解锁文章
筱筱攻城狮
关注
专栏目录
锋利的JQuery学习笔记.pdf
08-14
锋利的JQuery学习笔记
jQuery——学习笔记.md
08-01
jq语法
JQuery 学习笔记01 JQuery初接触
12-09
《JQuery 学习笔记01 - JQuery初接触》 jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更快速、更方便地处理DOM操作、事件处理、动画效果和Ajax交互。这篇学习...
Jquery 学习笔记（一）
10-29
### Jquery 学习笔记（一） #### Jquery基础知识点 ##### 结构与行为的分离 在传统的Web开发中，经常会有像`<button onclick="..."></button>`这样的内联JavaScript代码，这种方式将JavaScript代码直接写在了HTML...
抖音很火的立方体相册(HTML+CSS编写)
热门推荐
筱筱攻程师的博客
12-04 2万+
话不多说：先看图说话 首先立方体会不定向移动，鼠标移上去后会打开，具体效果看git图片 接下来呈上代码： 1.页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>一叶兰</title> <link rel="stylesheet" href...
自整理笔记——React基础之JSX语法
筱筱攻程师的博客
03-26 396
JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。 使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入b...
史上最详细的JavaScript的this指向问题，看完你就会！
筱筱攻程师的博客
09-17 347
JS中的this指向问题一直困扰了我很久，不知道this怎么用，什么时候用。今天有幸看了马老师的视频，特在此做一个总结与记录 本文章主要从以下六个方面来解释this指向问题： (1)this的默认绑定 (2)隐式绑定 (3)隐式丢失 (4)显式绑定 (5)new的绑定 (6)严格模式下的this指向 下面开始剖析： (1)this的默认绑定 <script type="text/javascript"> //1.全局环境下的this指向了windows console.l
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 424
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1087
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 912
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 705
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 954
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
JavaScript 实现文本转语音功能
bjjgff的博客
11-08 515
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！相关文章你从未见过的 10 个令人惊叹的 JavaScript 技巧HTML+CSS+JS 实现动态模态超级英雄卡片效果使用 HTML 和 CSS 创建 3D 菜单效果。
SpringBoot 实战：文件上传之秒传、断点续传、分片上传
江南一点雨的专栏
11-12 368
好了，以上就是关于文件上传中秒传、断点续传和分片上传的实战分享。通过这些技术的应用，我们可以极大地提升文件上传的效率和稳定性，改善用户体验。希望各位小伙伴在自己的项目中也能灵活运用这些技巧，解决实际问题。
ArkTS--应用状态
qq_63946637的博客
11-10 621
本文旨在帮助大家学习鸿蒙中的LocalStorage和AppStorage
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1549
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
【JavaEE进阶】导读
2401_83227065的博客
11-08 1127
随着技术的发展, ⽆论是后端开发还是前端开发, 开发的时候都很少使⽤原⽣的代码，⽐如：JDBC、JS 等. 取⽽代之的是各种开发框架. 如：后端框架：Spring, SpringBoot, Mybatis等，前端常⽤的框架： Vue、Node等. 这些框架都有⼀个共同的特点, 就是简单, ⾼效. 这极⼤的提⾼了我们的开发效率. 那什么是框架呢?通俗的来讲: 框架是实现某种功能的半成品, 他提供了⼀些常⽤的⼯具类, 我们在框架的基础上, 可以更加⾼效的进⾏开发.
Webserver(5.1)五种IO模型
学习历程记录和分享
11-08 365
容易出现EAGAIN，就是时间还未发生，根据errno来决定。IO事件就绪，进程收到SIGIO信号，然后处理IO事件。在通知SIGIO阶段是异步的，可以去做自己的事情。调用某个函数，等待这个函数返回，期间什么也不做，不停地去检查这个函数有没有返回，必须等返回才能进行下一步动作。同步的话就是客户端主动一点去接收数据，异步的话就比较被动，等着对方通知你来接收数据。在处理IO的时候，阻塞与非阻塞都是同步IO，只有使用了特殊的API才是异步IO。同步就是recv去读取数据，异步是内核把buf准备好了会发信号通知。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值