JQuery实际是JavaScript的一个框架,可以用来简化JS的开发。截取下百度百科给出的概念:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 |
---|
JavaScript框架:本质上就是js文件,内部封装了一些js代码而已,方便用户操作。举个自定义JS框架的简单例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义JS框架</title>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//1、根据id获取元素对象
// var div1 = document.getElementById("div1")
// var div2 = document.getElementById("div2");
var div1 = get("div1")
var div2 = get("div2");
//2、获取标签体内容
alert(div1.innerHTML);
alert(div2.innerHTML);
</script>
</body>
</html>
//封装一个方法,获取元素对象,根据id获取
function get(id) {
return document.getElementById(id);
}
快速入门步骤:1)下载JQuery文件;-》2)在项目中导入JQuery的js文件;-》3)使用JQuery。
1)下载JQuery文件
【目前jQuery有三个大版本】: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护, 功能不再新增。因此一般项目来说,使用1.x版本就可以了, 最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护, 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x, 最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求, 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。最新版本:3.5.1
【jquery-xxx.js与jquery-xxx.min.js的区别】:
jquery-xxx.js | jquery-xxx.min.js | |
---|---|---|
版本 | 开发版本,给开发人员看的,缩进和注释比较友好; | 生产版本,程序中使用,没有缩进; |
体积 | 体积大 | 体积小,程序加载快一些 |
2)导入JQuery的js文件:导入的是min.js文件
3)使用JQuery:实现第一节中举例内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//使用JQuery获取元素对象
var div1 = $("#div1"); //$是方法对象名称,括号内传递是选择器,#根据id找
alert(div1.html());
var div2 = $("#div2"); //$是方法对象名称,括号内传递是选择器,#根据id找
alert(div2.html());
</script>
</body>
</html>
以上两节的内容,一个是通过js原生代码获取的JS对象,一个是通过$符获取的JQuery对象,二者有什么区别吗?能否互相转换?首先看下二者操作的对比:分别通过js和JQuery方式获取名称叫div的所有html元素对象,并修改标签体内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和js对象的转换</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//1、通过js方式获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length); //divs:object HTMLCollection,可当做数组使用
//对divs中所有的div标签体内容变为aaa
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = "aaa";
}
//--------------------------------------------
//2、通过JQuery方式获取名称叫div的所有html元素对象
var $divs = $("div");
alert($divs.length);//$divs:object Object,可当做数组使用
//对divs中所有的div标签体内容变为bbb
$divs.html("bbb"); //方便很多
</script>
</body>
</html>
由以上我们可以发现:
———————————————————————————————————————
本文为博主原创文章,转载请注明出处!