原生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中的call实现继承
Jan 22 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
PHP高级OOP技术演示
2009/08/27 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
css图片自适应大小
2007/11/28 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
javascript工具库代码
2012/03/29 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python中@property的理解和使用示例
2019/06/11 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
建龙钢铁面试总结
2014/04/15 面试题
《云雀的心愿》教学反思
2014/02/25 职场文书
王老吉广告词
2014/03/20 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
感恩节活动策划方案
2014/05/16 职场文书
企业党建工作总结2015
2015/05/26 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
数据库连接池
2021/04/06 MySQL
用Python将库打包发布到pypi
2021/04/13 Python