原生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 相关文章推荐
子页向父页传值示例
Nov 27 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python3正则提取字符串里的中文实例
2019/01/31 Python
pandas中ix的使用详细讲解
2020/03/09 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python datetime模块使用方法小结
2020/06/18 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
临床医学应届生求职信
2013/11/06 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
我的中国梦口号
2014/06/16 职场文书
法制宣传口号
2014/06/16 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
调研报告的主要写法
2019/04/18 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL