原生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多重继承示例
Mar 13 Javascript
js几个验证函数代码
Mar 25 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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 数组使用详解 推荐
2011/06/02 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python使用turtle库绘制时钟
2020/03/25 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
医学院学生的自我评价分享
2013/11/19 职场文书
工商管理自荐书
2014/07/06 职场文书
广播体操比赛主持词
2015/06/29 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
电频谱管理的原则是什么
2022/02/18 无线电
MySQL 条件查询的常用操作
2022/04/28 MySQL