原生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 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
vue-父子组件和ref实例详解
Nov 10 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使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
layui实现三级联动效果
2019/07/26 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python生成验证码图片代码分享
2016/01/28 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
校园报刊亭创业计划书
2014/01/02 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
将相和教学反思
2014/02/04 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
质量负责人任命书
2014/06/06 职场文书
2014年教研工作总结
2014/12/06 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python