DOM对象与jquery对象的互相转换
一開始总是对DOM对象和jQuery对象搞不清楚。如今对此做一下总结:
DOM 对象:文档对象模型。每一份DOM都能够看作一棵树。像ul,li ol dl p h1 等等都是DOM元素节点。能够通过js的getElementsByTagName 和 getElementById 来获取这些元素节点。像这样得到的DOM元素就是DOM对象。
DOM对象能够使用javascript中的方法。如:
var domObj = document.getElementById("id");
var objHtml = domObj.innerHTML;
jquery对象就是通过jquery包装DOM对象后产生的对象。
jquery对象能够使用jquery中的方法。
如:
$("#foo").html();
这段代码等同于document.getElementById("foo").innerHTML;
当然。jquery对象和DOM对象能够相互转换:
jquery提供了两种方法将jquery对象转换成DOM对象:即[index] 和 get(index)
var $cr = $("#cr"); //jquery对象
var cr = document.getElementById("cr"); //DOM对象
如今将它们进行相互转换:
将jquery对象转换成DOM对象:
var $cr = $("#cr");
var cr = $cr[0]; //将jquery对象转换成了DOM对象。
将DOM对象转换成jquery对象:
var cr = document.getElementById("cr"); //声明了DOM对象
var $cr = $(cr); //将DOM对象转换成了jquery对象
一般是在jquery没有封装想要的方法,不得不使用DOM对象的时候。就须要对jquery对象转换成DOM对象。
DOM对象与jquery对象的互相转换的更多相关文章
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- 锋利的jQuery(1)——DOM对象与jQuery对象的转换
1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...
- DOM对象和jQuery对象的转换
<script type="text/javascript"> //js的页面加载事件 window.onload = function () { //获取DOM对象 ...
- jQuery中dom对象与jQuery对象之间互相转换
首先介绍一下什么是dom对象什么时候jQuery对象 1.dom对象就是使用原生js的api获取到的对象就是dom对象 eg: var box1 = document.getElementById(& ...
- jQuery入门二(DOM对象与jQuery对象互相转换)
- DOM对象与jQuery对象互相转换 第一篇说过,DOM对象不能调用jQuery对象的属性和方法,同样jQuery对象也不能调用DOM对象的属性和方法.但是在实际开发中,可能两者间需要互相调用对方 ...
- DOM对象和JQuery对象进行转换
var btn=document.getElementById("btn"); $(btn).click(function(){}); DOM对象转换为JQuery对象: 用$符号 ...
- DOM对象与Jquery对象转换
dom对象的样式是这么加的(js) .style.background = “red”; jquery对象样式是这么加的(jq) .css(“background”,”red”); <div i ...
随机推荐
- 添加QScintilla时显示无法解析的外部函数
转载请注明出处:http://www.cnblogs.com/dachen408/p/7147165.html 问题:添加QScintilla时显示无法解析的外部函数 解决方案:去掉头文件qscisc ...
- HTML a标签的href 属性 tel 点击可以直接拨打电话 ( 移动端 )
<a href="tel:13828172679">13622178579</a>
- jQuery 收缩展开效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 01XML文档结构
文档结构 2.1文档结构 2.1.1文档声明及字符编码 <?xml version=“1.0” encoding=“”gb2312 standalone=“yes”?> <? 告诉 ...
- C# WebService 的缓存机制
C# WebService 的缓存机制 [转]WebService的缓存机制 2008年02月19日 星期二 11:22 WebService的缓存分为两种,一种是简单的输出缓存,一种是强大的数据 ...
- 五、面向切面的spring(1)
spring的依赖注入看完了,接下来是spring中与DI一并重要的AOP了,开始吧,GO. 在软件开发中,散布于应用中多处的功能被称为横切发关注点,通常来讲,这些横切关注点从概念上市与应用的业务逻辑 ...
- 基于js插件的文件上传
<?php /** * Created by PhpStorm. * User: GyCCo. * Date: 05/02/2018 * Time: 4:46 PM */ session_sta ...
- 51nod 1057 n的阶乘 (压位优化)
题目地址:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1057&judgeId=605203 使用压位进行优化, ...
- 树莓派 -- oled
硬件 SPI0,CE0 SPI Master Driver 设备树 arch\arm\boot\dts\bcm2710-rpi-3-b.dts &gpio { spi0_pins: spi0_ ...
- assert.throws()函数详解
assert.throws(block[, error][, message]) Node.js FS模块方法速查 期望 block 函数抛出一个错误. 如果指定 error,它可以是一个构造函数.正 ...