首页 » jQuery » jQuery概述

jQuery概述

原文 http://blog.csdn.net/lollipop94/article/details/76422885

2017-07-31 12:20:03阅读(597)

一、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概述

特别需要注意的是,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对象

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹