原生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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
实用函数3
2007/11/08 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php自动载入类用法实例分析
2016/06/24 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python实现登陆文件验证方法
2018/10/06 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python标准库OS模块详解
2020/03/10 Python
详解Python yaml模块
2020/09/23 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
市场安全管理制度
2014/01/26 职场文书
毕业留言寄语大全
2014/04/10 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
监考失职检讨书
2015/01/26 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL