原生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获取元素的区别分享到这了

如果有错的地方，望大家指出！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用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实现子窗口获取父窗口元素值的方法

    本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

  • 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与Jq 获取页面元素值的方法和差异对比

    JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.client

  • 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的获取方法,其

  • JavaScript与JQUERY获取元素的宽、高和位置

    JavaScript与JQUERY获取元素的宽、高和位置

    javascript中 ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height.几乎所有浏览器都支持该方法.jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到. 注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最

  • 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

  • JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ 先给大家上干货: [js的获取方式] <div id = "dom">          <div></div>           <div></div>      <div></div>  </div> function dom(){ var a = document.getElementByIdx_x_x(&qu

  • 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获取父级元素,子级元素,兄弟元素的实现方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom">    <div></div>    <div></div>    <div></div></div> var

随机推荐