原生JS与JQ获取元素的区别详解
这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下。
一.原生JS获取元素。
1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象):
(1)通过元素ID获取:document.getElementById(),示例如下:
我们在控制台输出,结果如下:
可以看到我们获取到了id为div1的元素代码了
(2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返回,具体示例如下:
控制台输出如下:
是不是我们获取到了两个ul中的li,并以数组的形式显示;那如果我们想获取指定的li,比如我就只获取第一个ul的li怎么办呢?
这个就得结合到刚才我们ID获取元素的方式,具体实例如下:
控制台输出如下:
这样我们就获取到了第一个ul下的li而不包括第二个ul的li
(3)通过元素类名获取:document.getElementByClassName();它返回的也是一个数组,示例如下:
控制台输出:
这样类名为sp的元素我们就获取到了
二.JQ获取元素。
1.JQ获取元素的代码语法比原生JS更加简洁,在上面原生JS获取元素的代码我们发现代码比较长;
现在JQ提供一个工厂函数:$();通过“$(参数)”的形式我们就可以创建JQ的实例对象(JQ对象);
JQ提供很多的选择器供我们获取元素,这里就列举常见的三种选择器
(1)ID选择器(返回一个元素)
控制台输出看下:
可以看到div1被封装成一个JQ对象。
(2)类选择器(返回的是集合),根据类名匹配元素;
(3)元素选择器(返回的是集合),根据元素名匹配元素;
OK,JS和JQ获取元素的区别分享到这了
如果有错的地方,望大家指出!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom"> <div></div> <div></div> <div></div></div> var
-
js与jquery获取父元素,删除子元素的两种不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法 for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法 $("#id").each
-
使用jquery/js获取iframe父子级、同级获取元素的方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementById("
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY
-
JS与jQuery实现子窗口获取父窗口元素值的方法
本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="
-
js jquery 获取某一元素到浏览器顶端的距离实现方法
如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod
-
js jquery获取当前元素的兄弟级 上一个 下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其
-
Js与Jq 获取页面元素值的方法和差异对比
JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.client
-
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ 先给大家上干货: [js的获取方式] <div id = "dom"> <div></div> <div></div> <div></div> </div> function dom(){ var a = document.getElementByIdx_x_x(&qu
-
JavaScript与JQUERY获取元素的宽、高和位置
javascript中 ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height.几乎所有浏览器都支持该方法.jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到. 注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最
随机推荐
- 详解vue-cil和webpack中本地静态图片的路径问题解决方案
- 详解Vue.js 2.0 如何使用axios
- Ubuntu 安装 vsftpd FTP详细步骤
- 对send(),recv()函数的全面理解
- Using Django with GAE Python 后台抓取多个网站的页面全文
- ASP.NET中实现jQuery Validation-Engine的Ajax验证
- 在asp.net下实现Option条目中填充前导空格的方法
- PHP $_FILES函数详解
- python合并文本文件示例
- go语言实现sqrt的方法
- 送给搞采集的兄弟一个sql语句
- 防止mysql重复插入记录的方法
- 完美解决在ModalPopupExtender中使用CalendarExtender时被层遮挡的问题
- AJAX 简介及入门实例
- 计算新浪Weibo消息长度(还可以输入119字)
- 机会总是留给有准备的人 IT行业暴富
- java字符串反转示例分享
- 原生的强大DOM选择器querySelector介绍
- 微信小程序中做用户登录与登录态维护的实现详解
- Java+opencv3.2.0实现hough直线检测