jQuery的基础学习

最新推荐文章于 2022-08-29 16:56:37 发布

云墨书生

最新推荐文章于 2022-08-29 16:56:37 发布

阅读量545

点赞数 3

分类专栏： jQuery学习笔记文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/weixin_49794837/article/details/120360944

版权

jQuery学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery的基础

jQuery框架的概念：jQuery框架是在JavaScript的基础上，将常用操作进行封装，使页面特效实现更加容易、快速。

一、jQuery的概念

jQuery是一个JavaScript函数库。另外，jQuery也是一个轻量级“写得少，做得多”的JavaScript库。其实，这就跟Java中的那个API很相似。

jQuery库包含以下功能：

HTML元素选取；
HTML元素操作；
CSS操作；
HTML事件函数；
JavaScript特效和动画；
HTML DOM遍历和修改；
AJAX；
Utilities；
jQuery还提供了大量的插件。

二、jQuery优势

jQuery强调的理念是“写得少，做得多”。jQuery独特的选择器、链式操作、事件处理机制和封装完善的AJAX都是其他JavaScript库做不到的。概括起来，jQuery具有以下的优势：

轻量级：jQuery非常轻巧，采用UglifyJS压缩后，大小保持在30KB左右；
强大的选择器：jQuery允许开发者使用CSS1至CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器；
出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。jQuery可以轻松地完成各种原本非常复杂的操作，使其更容易编写程序；
可靠的事件处理机制：jQuery的事件处理机制吸引了JavaScript专家编写的事件处理函数的精华，使jQuery在处理事件绑定时相关可靠；
完善的AJAX：jQuery将所有的AJAX操作封装到函数$.ajax( )中，使开发者处理AJAX时能够专心处理业务逻辑而无须关心浏览器的兼容性及XMLHttpRequest对象的创建和使用问题；
丰富的插件支持：jQuery的易扩展性，吸引来自全球的开发者编写jQuery的扩展插件；
完善的文档：无论是英文还是中文，jQuery的文档都非常丰富；
开源：jQuery是一个开源的产品，也就是说，它是任何人都可以使用的。

补充：配置jQuery

当了解完jQuery后，我们要使用jQuery的第一步就是学会如何配置jQuery（重点）。

首先要到官网上下载jQuery库文件（注：有两个版本——未压缩版和压缩版）；
然后jQuery库引入到所要编写jQuery项目的文件中，形成jQuery.js文件；
最后要在html中引入jQuery的格式为：；

以下是验证jQuery是否引入成功的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证jQuery的测试（是否引入成功）</title>
    <script src = "../jQuery.js"></script>
    <style>
        div{
            width: 200px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
<!--通过测试可以得出：
        入口函数的用法：
            jQuery的入口函数是在HTML所有标签（DOM）都加载之后再执行的
-->
    <script>
        $(document).ready(function () {
            $('div').hide();
        })    //hide方法的作用是：隐藏

        $(document).ready(function () { //等待DOM元素加载完毕
            alert("成功引入jQuery");    //弹框
        });
        //注释：这段代码的作用类似于传统JavaScript中的windows.onload方法，这时为了防止文档在完全加载（就绪）之前运行jQuery代码，
        //即在DOM加载完成之后才可以对DOM进行操作。如果在文档之前没有完全加载之前就运行函数，操作可能会失败。
    </script>
    <div></div>
</body>
</html>

解释：在没有使用jQuery时，页面显示的结果为一个红色的边框。当使用jQuery时，调用了hide方法将div给隐藏起来了，而调用alert方法将显示弹框（弹框内容为成功引入jQuery）。

三、jQuery语法（重点）

jQuery语法通过选取HTML元素，并对选取的元素执行某些操作。

jQuery的基础语法如下：

$(selector).action( )

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

实例如下：

$(this).hide( )：隐藏当前元素；
$(“p”).hide( )：隐藏所有
元素；
$(“p.test”).hide( )：隐藏所有class = "test"的
元素；
$("#test").hide( )：隐藏所有id = "test"的元素。

jQuery的入口函数与JavaScript的入口函数：（重点）

jQuery入口函数如下：

$(document).ready(function (){
	//执行代码
})

或者

$(function(){
	//执行代码
})

JavaScript入口函数如下：

window.onload = function(){
    //执行代码
}

jQuery入口函数与JavaScript入口函数的全部如下：

jQuery的入口函数是在HTML所有标签（DOM）都加载之后再执行；

JavaScript的window.onload事件是等所有内容（包括外部图片之类的文件）加载完之后才会执行的；

jQuery入口函数可以书写多个，而对于JavaScript入口函数不能写多个（因为，当JavaScript每写一个入口函数就会把前一个入口函数覆盖掉）；

执行时机不同：jQuery入口函数要快于window.onload；

jQuery入口函数要等待页面上DOM树加载完毕后执行。

四、总结

对于jQuery的基础学习，我们需要掌握以下的内容：

什么是jQuery？——jQuery是一个JavaScript函数库，它是在JavaScript的基础上，将常用操作进行封装，使页面特性实现更加简便。快速；
jQuery的优势——对于这一知识点，我们只需要了解即可；
jQuery的语法是一个非常重要的知识点——这个是必须要掌握的（如果没有掌握，会对后期的学习产生困难）（重点）；
最后就是jQuery入口函数与JavaScript入口函数的区别和其写法**（重点）**。

云墨书生

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery的基础学习

jQuery的基础jQuery框架的概念：jQuery框架是在JavaScript的基础上，将常用操作进行封装，使页面特效实现更加容易、快速。一、jQuery的概念jQuery是一个JavaScript函数库。另外，jQuery也是一个轻量级“写得少，做得多”的JavaScript库。其实，这就跟Java中的那个API很相似。jQuery库包含以下功能：HTML元素选取；HTML元素操作；CSS操作；HTML事件函数；JavaScript特效和动画；HTML DOM遍历和修改；AJ
复制链接

扫一扫

专栏目录