【JQuery框架】JQuery对象和JS对象的区别和转换
目录
jQuery的概念
jQuery快速入门
1、下载jQuery
2、导入JQuery的js文件
3、jQuery的使用
jQuery对象和JS对象区别与转换
jQuery转为js
js转为jQuery
Hello!你好呀,我是灰小猿,一个超会写bug的程序猿!
在了解jQuery对象和JS对象之间的区别和转换前,我们先对jQuery框架进行一个简单的入门。
jQuery的概念
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。其使用的目的是为了简化JS开发
而对于JavaScript框架,其本质上就是一些js文件,封装了js的原生代码而已。
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插件不支持这个版本。目前该版本是官方主要更新维护的版本。关于最新版本可以到官方网站查看,直达官网。
我们在下载使用jQuery时会发现,一般会有两个js文件,一个是带.min的,另一个是不带.min的。
jquery-xxx.js 与 jquery-xxx.min.js区别:
1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
所以我们一般在使用时导入的是第二个jquery-xxx.min.js的生产版本
2、导入JQuery的js文件
即导入min.js文件
之后在html文件的头部导入对该js文件的链接,如下所示:
<head><meta charset="UTF-8"><title>jquery快速入门</title><script src="js/jquery-3.3.1.min.js"></script>
</head>
3、jQuery的使用
我们使用jQuery获取元素对象时,可以使用“$()”来作为一个选择器,对标签体中的内容进行获取。下面分别使用jQuery和不使用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对象获取指定ID对象var div1 = $("#div1");var div2 = $("#div2");//通过alert将结果输出(以jQuery形式获取值)alert(div1.html());alert(div2.html());/*** 以下是不使用jQuery的方法* *///不使用jQuery获取指定ID对象var div3 = document.getElementById("div1");var div4 = document.getElementById("div2");//不使用jQuery获取元素内容alert(div3.innerHTML);alert(div4.innerHTML);</script></body>
</html>
jQuery对象和JS对象区别与转换
相比于JS对象,jQuery对象在操作时更加方便,代码更加简洁
但是需要注意的是:jQuery对象和JS对象的方法是不通用的,那么我们如果想在jQuery中使用js方法,或在js中使用jQuery方法该怎么办呢?
因此,在这里和大家分享一下jQuery对象和JS对象之间的相互转换
jQuery转为js
使用jQuery对象[索引] 或者 jQuery对象.get(索引)将jQuery对象转化为js对象,即可使用js的方法。
详细使用如下代码:
<!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>/*** jQuery 转为 js* *///1、通过js方式获取名叫div的所有html元素对象var divs = document.getElementsByTagName("div");alert(divs.length); //可以将其当成数组来使用//对divs中所有div让其标签体内容变为“aaa”for (var i = 0;i<divs.length;i++){// divs[i].innerHTML = "aaa"$(divs[i]).html("ccc") //将js对象divs[i]转化为jQuery对象}</script>
</body>
</html>
js转为jQuery
使用“$”符的括号中包含js对象,如:$(js对象)
之后就可以使用jQuery的方法了,
详细使用如下代码:
<!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>/*** js 转化为 jQuery* *///2、通过jQuery方式获取所有名叫div的所有html对象var $divs2 = $("div");alert($divs2);//对divs中所有div让其标签体内容变为“aaa”// $divs2.html("bbb");$divs2[0].innerHTML = "ddd"; //将jQuery对象对象转化为js$divs2.get(1).innerHTML = "eee" //将jQuery对象对象转化为js</script>
</body>
</html>
好了,关于jQuery对象和JS对象区别与转换的相关内容就先和小伙伴们分享到这里,之后还会继续和小伙伴们分享jQuery的选择器、DOM操作以及jQuery的高级进阶内容。
觉得有用记得点赞关注哟!
灰小猿陪你一起进步!
【JQuery框架】JQuery对象和JS对象的区别和转换相关推荐
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
- day43 JavaWen阶段——JQuery 基础(JQuery相关开发文档,JQuery对象和JS对象区别与转换,JQuery选择器,JQuery中DOM操作,案列【QQ表情选择】【左右移动】)
今日内容 1. JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
- JQuery对象和JS对象区别与转换|| 事件绑定 入口函数 样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
- 【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换 概念 为什么要转换 转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象 原理图 jQuery笔记目录 概念 jQuery对象 是通 ...
- JSON转JS对象,JS对象转JSON
JSON转JS对象,JS对象转JSON </h1><div class="clear"></div><div class="po ...
- java转js_java对象转js对象
在js中直接使用 EL表达式表达java对象时,输出是对象的类名. 没有达到我们要使用该对象的目的. 比如 var user= ${user}; 在页面上查询代码为 var user=com.test ...
- jQuery对象与js对象之间的转换
定义 jQuery本质上虽然也是js,但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象. 使用js方式获取的对象是js的DOM对象,使用jQuery方 ...
- 前端学习之路坑一:json对象和JS对象
做登录验证的时候,前端Vue使用axios.post向后台php编写的API发送验证数据,发现无论如何都验证无法通过,返回值里带的POST数据显示发过去的都是JS对象 正值初学,也分不清数据格式,只看 ...
最新文章
- 《拥抱变化——社交网络时代的企业转型之道》一构筑社会信任
- Spring MVC 如何加载静态html
- Python | 除法
- 监视和检测Java应用程序中的内存泄漏
- boost安装_Centos安装MySQL
- fpgrowth算法实战 mlib_【spark】41.Spark Mlib:FPGrowth算法
- 一次性补缴17万元办社保,每月可以领1400多,可否办理?
- 【HDOJ6958】KD-Graph(并查集)
- 软件架构师的成长之路
- ORACLE语句大全
- 如何设计可靠的灰度方案
- OpenCV学习——摄像头人脸识别
- excel身份证号判断男女
- SVN提交文件失败:系统找不到指定路径
- Tumblr 的架构演进过程
- 腾讯让企业微信连接微信,这是针对钉钉的精准打击吗?
- 新概念二册 Lesson 46 Expensive and uncomfortable既昂贵又受罪(同位语从句+doing/being done+介词后的宾语从句)
- 7.PCIE配置空间读写软件
- HBase学习-----javaAPI详细教程
- CommandMethod介绍