目录
1 JQuery基本概念
JQuery实际是JavaScript的一个框架,可以用来简化JS的开发。截取下百度百科给出的概念:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 |
JavaScript框架:本质上就是js文件,内部封装了一些js代码而已,方便用户操作。举个自定义JS框架的简单例子:
- 1)写一个HTML,通过元素id获取内容并弹出信息提示窗;
- 2)封装一个js文件,其中将“通过元素id获取内容”js代码封装为get。
<!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);
}
2 JQuery快速入门
快速入门步骤: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:实现第一节中举例内容
- 写一个HTML,使用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>
3 JQuery对象和JS对象的区别与转换
以上两节的内容,一个是通过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>
由以上我们可以发现:
- 1)JQuery对象在操作时更方便;
- 2)JQuery对象和js对象方法不通用;
- 3)两者相关要进行转换:
JQuery---> js: JQuery对象[索引] 或 JQuery对象.get(索引) eg:$divs[0].innerHTML = "ddd";
js--->JQuery:$(js对象) eg:$(divs[i]).html("ccc");
———————————————————————————————————————
本文为博主原创文章,转载请注明出处!
若本文对您有些许帮助,轻抬您发财的小手,关注/评论/点赞/收藏,就是对我最大的支持!
祝君升职加薪,鹏程万里!