原生JS与JQ获取元素的区别详解_javascript技巧

来源:脚本之家  责任编辑:小易  

jq是一个框架,里面是用原生js封装的各种函数。(1)jquery没有分割模块,只能全部导入。在实际开发中,往往我们只需要某些功能,而不是jq的所有,于是这就出现一个问题,比如只想使用jq的$("#id")函数获取一个dom元素,但是我们却引入了91kB(压缩后)大小的jq包,这对于页面的加载速度影响是很大的,尤其对于门户网站而言,其中的图片和其它资源非常丰富,每1kb都显得十分重要。(2)jquery本身也是开发人员为了提高效率而开发的一种库,主观来说对于开发者本身的提高非常有帮助,因为要封装一个比较完善的库需要比非常棒的js基础和很广的知识面,包括面向对象,模块化,以及各种大大小小的js api和浏览器间不不同实现。他不是推荐的开发模式而是一种备用的提高效率的方式。在开发中我们遇到很多js没有封装的功能时,就需要我们即时开发,或者导入以前开发好小库。jq对于高级前端工程师来说只是一种简单库,而高级前端工程师同样也有能力开发属于自己的库,定制更加完善的功能www.zgxue.com防采集请勿采集本网。

这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

您好,使用原生js获取 一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式声明对象,只读,此方法支持Firefox浏览器;语法:var style=window.

刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下。

注:js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来元素的数组集合。所以说他们两者是不同的对象类型不等价。2.jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用

一.原生JS获取元素。

与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些. 3、与程序代码的关系:脚本也是一种语言,其同样由程序代码组成。4、脚本语言是一种解释性的语言,例如Python、vbscript,javascript,

1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象):

(1)原生js写法 document.getElementById('test').innerHTML (2)jQuery写法$('#test').html() 2、javascript获取节点的方法: (1)通过id的方式 document.getElementById(\"id\") (2)通过类名查找元素

(1)通过元素ID获取:document.getElementById(),示例如下:

所以,jquery的width()与js的offsetWidth都可以获取元素的宽度,但有个区别: width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。offsetWidth:包括了内补丁和border,不包括

我们在控制台输出,结果如下:

可以看到我们获取到了id为div1的元素代码了

(2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返回,具体示例如下:

控制台输出如下:

是不是我们获取到了两个ul中的li,并以数组的形式显示;那如果我们想获取指定的li,比如我就只获取第一个ul的li怎么办呢?

这个就得结合到刚才我们ID获取元素的方式,具体实例如下:

控制台输出如下:

这样我们就获取到了第一个ul下的li而不包括第二个ul的li

(3)通过元素类名获取:document.getElementByClassName();它返回的也是一个数组,示例如下:

控制台输出:

这样类名为sp的元素我们就获取到了

二.JQ获取元素。

1.JQ获取元素的代码语法比原生JS更加简洁,在上面原生JS获取元素的代码我们发现代码比较长;

现在JQ提供一个工厂函数:$();通过“$(参数)”的形式我们就可以创建JQ的实例对象(JQ对象);

JQ提供很多的选择器供我们获取元素,这里就列举常见的三种选择器

(1)ID选择器(返回一个元素)

控制台输出看下:

可以看到div1被封装成一个JQ对象。

(2)类选择器(返回的是集合),根据类名匹配元素;

(3)元素选择器(返回的是集合),根据元素名匹配元素;

OK,JS和JQ获取元素的区别分享到这了

如果有错的地方,望大家指出!

jq取到的会变成jq对象,可以使用jq方法,不能使用原生方法,不过可以通过转换以后使用原生方法。原生的则只能使用原生的方法,无法使用jq方法内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js jquery 获取某一元素到浏览器顶端的距离实现方法
  • js与jquery实现子窗口获取父窗口元素值的方法
  • javascript与jquery获取元素的宽、高和位置
  • 使用jquery/js获取iframe父子级、同级获取元素的方法
  • javascript和jquery获取父级元素、子级元素、兄弟元素的方法
  • js jquery获取当前元素的兄弟级 上一个 下一个元素
  • js与jq 获取页面元素值的方法和差异对比
  • js与jquery获取父级元素,子级元素,兄弟元素的实现方法
  • js与jquery获取父元素,删除子元素的两种不同方法
  • js和jquery获取页面大小,滚动条位置,元素位置(示例代码)
  • javascript数组排序小程序实现解析
  • js生成验证码并直接在前端判断
  • gridpanel动态加载数据的实例代码
  • 微信小程序实现发红包功能
  • js实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
  • js实现索引图片切换效果
  • 完美解决js文件页面加载时的阻塞问题
  • phpexcel中的一些常用方法汇总
  • 利用es6实现单例模式及其应用详解
  • 单击某一段文字改写文本颜色
  • jquery取到的元素和原生js取到的元素有什么区别
  • jquery 和原生的js比较
  • 什么是原生JS
  • 原生js事件监听有哪些方法,jq又有哪些,jq中这些方法有何区别
  • 原生JS中如何获取CSS属性中的值
  • js原生dom对象和jQuery对象可以混合使用吗
  • jquery和javascript有什么区别?
  • js中innerHTML与innerText的用法与区别
  • js中如何取得一个div的width?注意此css的width是在中设置的。
  • 原生JS forEach和map遍历的区别以及兼容写法
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js jquery 获取某一元素到浏览器顶端的距离实现方法js与jquery实现子窗口获取父窗口元素值的方法javascript与jquery获取元素的宽、高和位置使用jquery/js获取iframe父子级、同级获取元素的方法javascript和jquery获取父级元素、子级元素、兄弟元素的方法js jquery获取当前元素的兄弟级 上一个 下一个元素js与jq 获取页面元素值的方法和差异对比js与jquery获取父级元素,子级元素,兄弟元素的实现方法js与jquery获取父元素,删除子元素的两种不同方法js和jquery获取页面大小,滚动条位置,元素位置(示例代码)javascript数组排序小程序实现解析js生成验证码并直接在前端判断gridpanel动态加载数据的实例代码微信小程序实现发红包功能js实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例js实现索引图片切换效果完美解决js文件页面加载时的阻塞问题phpexcel中的一些常用方法汇总利用es6实现单例模式及其应用详解单击某一段文字改写文本颜色js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法利用js判断鼠标移入元素的方向原生js封装的ajax方法示例javascript作用域链示例分享教您去掉ie网页加载进度条的方法javascript 获取函数形参个数利用bootstrap弹出二级对话框的简单实现方js简单实现点击左右运动的方法web程序员必备的7个javascript函数小程序实现列表点赞功能微信小程序实现滑动切换自定义页码的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved