jQuery概述

来源：互联网发布：西安行知中学小升初编辑：程序博客网时间：2024/06/08 06:50

一、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对象

阅读全文

1 0