原生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 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
js实现div色块拖动录制
Jan 16 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
zf框架的registry(注册表)使用示例
2014/03/13 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
异步加载script的代码
2011/01/12 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python编写简单端口扫描器
2019/09/04 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
网吧收银员岗位职责
2013/12/14 职场文书
公务员培训心得体会
2013/12/28 职场文书
八年级美术教学反思
2014/02/02 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
职务说明书范文
2014/05/07 职场文书
服装设计专业自荐信
2014/06/17 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
车辆管理制度范本
2015/08/05 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python