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


Posted in Javascript onFebruary 13, 2020

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

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

一.原生JS获取元素。

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

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

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

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

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

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

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

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

控制台输出如下:

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

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

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

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

控制台输出如下:

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

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

(3)通过元素类名获取:document.getElementByClassName();它返回的也是一个数组,示例如下:原生JS与JQ获取元素的区别详解

控制台输出:

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

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

二.JQ获取元素。

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

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

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

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

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

控制台输出看下:

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

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

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

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

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
Jquery ui css framework
Jun 28 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 #Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 #Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 #Javascript
node.js使用stream模块实现自定义流示例
Feb 13 #Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 #Javascript
JS FormData对象使用方法实例详解
Feb 12 #Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 #Javascript
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
改进Django中的表单的简单方法
2015/07/17 Python
python中import reload __import__的区别详解
2017/10/16 Python
python中logging包的使用总结
2018/02/28 Python
django ajax json的实例代码
2018/05/29 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python对excel的基本操作方法
2021/02/18 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
大学生职业生涯规划书参考模板
2014/03/05 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
生物学专业求职信
2014/07/23 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
详解Laravel服务容器的优势
2021/05/29 PHP
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Python中的嵌套循环详情
2022/03/23 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技