jQuery概述

最新推荐文章于 2023-05-31 08:33:36 发布

lollipop94

最新推荐文章于 2023-05-31 08:33:36 发布

阅读量408

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/lollipop94/article/details/76422885

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jQuery简介

JavaScript和查询（Query），即用于辅助开发JavaScript的库。
继Prototype之后的一个JavaScript库，是一个开源项目。
优势有：
- 轻量级
- 强大的选择器
- 出色的DOM操作封装
- 可靠事件处理机制
- 完善的Ajax
- 不污染顶级变量
- 出色的浏览器兼容性
- 链式操作方式
- 隐式迭代
- 行为层与结构层的分离
- 丰富的插件支持
- 完善的文档
- 开源

二、jQuery代码的编写

1、获取jQuery最新版本，官方网站：http://jquery.com/。

2、jQuery库类型说明

名称	说明
jquery.js（开发版）	完整无压缩版本，主要用于测试、学习和开发。
jquery.min.js（生产版）	经过工具压缩或经过服务器开启Gzip压缩，主要应用于产品和项目。

3、jQuery环境配置

jQuery不需要安装，把下载的jquery.js放在一个位置，然后在相关HTML文档中引入该库的位置。

4、在页面中引入

在<head>标签中引入
在<body>标签中引入

以下代码可以测试是否引入了jQuery。其中，我把jquery-3.2.1.js放在了D盘下的jQuery文件夹下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>环境搭建</title>
    <script type="text/javascript" src="/D:/jQuery/jquery-3.2.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        alert($);
    </script>
</body>
</html>

当弹框出现如下内容时，表明jQuery引入成功。

特别需要注意的是，jQuery库的路径问题。引用的路径可以是绝对路径也可以是相对路径。

当使用绝对路径时，如我上面的测试代码所示，必须要在D前面加上一个“/”，否则不能成功引入。
如果在工程目录下创建一个scripts文件夹，再把jquery-3.2.1.js文件放在目录scripts下时，可以使用相对路径，如下所示。

<head>
    <script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
</head>

5、编写一个简单的jQuery代码

首先，明确一点，$就是jQuery的一个简写形式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
</head>
<body>
    <script src="/D:/jQuery/jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("Hello World!");
        });
    </script>
</body>
</html>

运行结果为弹框显示：Hello World!

【注】上述代码与传统JavaScript中的window.onload方法类似，但也有不同。

window.onload	$(document).ready()
必须等待网页中所有的内容加载完毕后（包括图片）才能执行。	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西没有加载完。
不能同时编写多个，如果有多个，只会输出最后一个操作的结果。	能同时编写多个，多个操作都执行并输出。

三、jQuery对象和DOM对象的转换

jQuery对象转成DOM对象的方法：[index]和get(index)。

var $cr = $("#cr");  //jQuery对象
//通过[index]的方法
var cr = $cr[0];     //DOM对象
//通过get(index)的方法
var cr = $cr.get(0); //DOM对象

DOM对象转成jQuery对象的方法：$(DOM对象)。

var cr = document.getElementById("cr");  //DOM对象
var $cr = $(cr);                         //jQuery对象