原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

时间: 2018-04-11阅读: 1958标签: jquery

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。


1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象) 注: var是定义变量,如: 

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

转换后,就可以任意使用 jQuery 的方法。


2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);

(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。如: 

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中


(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象。如:

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中


注意:

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/621

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

前端UI攻城狮 你们该抛弃jQuery了

Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

高效Web开发的10个jQuery代码片段

在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。

JQuery的ajax函数执行失败,alert函数弹框一闪而过

原因其实非常简单,把form表单里最后提交按钮的type=submit换为type=button,因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现。事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完。

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!