jquery的find()和js原生获取dom的区别

2024-09-02

原生JS与JQ获取元素的区别

刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以看到我们获取到了id为div1的元素代码了 (2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返

为什么我获取不到这个css样式？js原生获取css样式总结

还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求简单就是获取一个css的height (好吧就是一个这么简单的需求) 实践好吧长时间的JQ 我已经对原生无能了让我默哀3秒!!! document.querySelector('.className').style.height; 这个果然不生效好吧看来我真的倒退不少!让我再哭一会!!(哭你妹快去总结) 在学习中发现其实js原生获取css的方法很多,上面写的就是其中一种,只不过情景不对啊! get

js原生获取className&多选一

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生获取class名&多取一</title> </head> <body> <ul> <li class="red blue green">111</li> <

Js怎么获取DOM及获取浏览器的宽高？

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM独立于具体的编程语言,通常通过Java

js原生获取元素的css属性

习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?document.getElementById("id").style.width? 一.getComputedStyle getComputedStyle,见名之意,就是获取元素计算之后的样式属性值,也就是获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CS

js原生获取css属性

原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" style="background-color:#ccc;margin-top:100px;"></div> var oBox = document.getElementById('box') console.log(oBox.style.width) 1)对于复合属性

jquery $(document).ready() 与js原生的window.onload的区别总结

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候用$(window).load(functi

jquery的each和js原生for循环性能对比

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>for与each性能比较</title> <script src="../Cks/jquery-1.7.1.min.js" type="text/javascript"></script> <script

js 原生获取Class元素

function getElementsByClassName(n) { var classElements = [] allElements = document.getElementsByTagName("*"); for (var i = 0; i < allElements.length; i++) { if (allElements[i].className == n) { classElements[classElements.length] = allElement

jquery中data()和js中dataset属性的区别

INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样两个标签: <h1 data-attrname="balabala"></h1> <h2 data-attrname="[1,2,3,4]"></h2> javascript的访问方式是dataset.attrname.我

jQuery的ready与js的load事件的区别

摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下. 1.

jQuery获取的dom对象和原生的dom对象有何区别

js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价原生DOM对象转jQuery对象 var box = document.getElementById('box') var $box = $(box) jQuery对象转原生DOM对象 var $box = $('#box') var box = $box[0]

jQuery 事件绑定和 JavaScript 原生事件绑定

总结一下:jQuery 事件绑定和 JavaScript 原生事件绑定及区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.on, 对应的解除监听的函数分别是 unbind.die.undelegate.off. live.delegate 不多用,在Jquery1.7中已经移除,这里不多说重点介绍 bind.on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的

Angular获取dom元素，以及父子组建之间相互传值

1.使用原生js代码获取dom元素在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这个方法中修改dom元素是不可能的, 但是有另一个方法ngAfterViewInit()的方法,是表示dom加载完毕之后执行的方法,所以获取dom元素的动作可以放在这里面 2.使用@ViewChild获取dom元素 1.在父组件中使用引入ViewChild 2.使用装饰符来获取父组件中使用的子组件的d

认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法格式:$(selector).actio

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

jQuery对象与JS原生dom对象之间的转换

jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作.另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换. 1.将jQuery转换为dom对象的方法 [index] 或者.get(index): a.$(“#form”)[index]

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。

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

js中的DOM对象和 jQuery对象比较

一,二者的区别通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互转换 1. DOM 对象转为 jQuery对象: $(js对象); 2.jQuery对象转为 DOM 对象: jquery对象[index]; //方式1(推荐) jquery对象.get(index); //方式2 jQuery对象转换成了 DOM 对象之后,可以直接调用 DOM 提供的一些功

jquery的find()和js原生获取dom的区别

热门专题