jQuery课堂笔记（一）

最新推荐文章于 2024-11-04 16:17:23 发布

程果果.

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量150

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_73656077/article/details/127376415

版权

一、jQuery是什么？

jQuery是一个JavaScript库，是由John Resig创建于2006年1月的开源项目，jQuery凭借着简介的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档，操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说：1、jQuery是一个优秀的JavaScript库。2、jQuery极大地简化了JavaScript编程。3、jQuery很容易学习。

二、jQuery的优点

jQuery强调的理念是“写得少，做的多”jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是JavaScript望尘莫及的。总结有以下优点：

1、轻量级。jQuery非常轻巧，经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右。
强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

2、出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。

可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。

3、完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
不污染顶级变量。jQuery 只建立一个名为jQuery 的对象，所有的函数方法都在这个对象之下。
出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异。

4、链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。
隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。

5、行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素，然后直接给元素添加事件。这种将行为层和结构层完全分离的思想，可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时，后期维护也非常方便。

6、丰富的插件支持。jQuery 的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持，而且还不断地有新的插件面世。

三、

1、引入

<script src="jquery-3.3.1.min.js></script>  该标签如果用来引包，里面不允许写任何js语句！

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    alert("hello world.");
</script>

注：使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包

2、入口函数

$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。

js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});

1. 两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2. JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3. JQ入口允许存在多个，且并行存在，都会生效；
4. JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。

3、演示

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
 
    // JS 页面加载完成
    window.onload = function () {
        alert("test1");
    }
 
    window.onload = function () {
        alert("test2");
    }
 
    // $ 符号就是 jquery 的简写方式.
    // 复杂书写 : 
    $(document).ready(function () {
        alert("test3");
    });
 
    // 简化书写
    $(function () {
        alert("test4");
    })
 
</script>