简述Jquery与DOM对象

在第一次学习jquery中，常常会不能分辨DOM对象和Jquery对象，下面我们就简诉一下它们之间的关系和区别

1.DOM对象（Document Object Model）

文档对象模型，每一份DOM都可表示为一棵树，例如下面是一个简单的网页代码：

表示为DOM为：

我们可以通过JS中的getelementsByTayName或getelementsByTayId来获取树中的节点，像这样获取到的元素就是DOM对象，DOM可以使用JS中方法，例如：

代码如下:

var domobj=document.getelementsByTayName("Name");            //获取DOM对象
var objhtml=domobj.innerHTML;                                                 //使用JS中的innerHTML方法2.2

2.Jquery对象

Jquery对象就是通过Jquery包装DOM对象后产生的对象，他是Jquery独有的，可以调用jquery中的方法，例如：

$("#foo").HTML();

Jquery对象不能调用DOM对象的任何方法，例如：

代码如下:

$("#foo").innerHTML                                                                       //将会出现错误

3.DOM对象和Jquery对象之间的相互转化

我们在转化他们之前，必须先规定定义变量的风格，如定义个Jquery对象时，添加一个$符号，例如：

 var $obj=Jquery对象

定义DOM对象时，则不需要添加任何符号，这样可以帮助我们区分变量是什么对象，提高代码的可读性，例如：

var domobj=DOM对象

当Jquery类库中没有我们想要的方法或者我们对Jquery的方法不太清楚时，我们就可以转化为DOM对象，有2种方法将Jquery对象转化为DOM对象----[index]/get(index)，
（1）jquery对象是一个数组对象，通过[index]得到一个DOM对象，代码如下：

var $obj=$("#sc");
var obj=$obj[0];
alter(obj.checked);

（2）另一种方法是Jquery自己提供的，通过get(index)获取到DOM对象，例如：

var $obj=$("#sc");
var obj=$obj.get(0);
alter(obj.checked);

4.DOM对象转化为Jquery对象

DOM对象只需要通过$(),就可以转化为一个Jquery对象，例如：

var obj=document.getelementsByTayName("Name");
var $obj=$(obj);

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JQuery遍历DOM节点的方法

    本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

  • JQuery中DOM加载与事件执行实例分析

    本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

  • Jquery基础教程之DOM操作

    Jquery基础教程之DOM操作

    对于dom的全称大家都知道吧,DOM是Document Object Model的缩写,其意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用dom接口很容易的访问页面中所有标准组件.dom操作一般可以分为三个方面即DOM Core(核心).HTM-Dom和CSS-DOM. 每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树.下面的html页面结构可以构建出一棵DOM树,代码: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • jQuery遍历DOM节点操作之filter()方法详解

    本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

  • JQuery中DOM事件冒泡实例分析

    本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu

  • JQuery中DOM事件合成用法实例分析

    本文实例讲述了JQuery中DOM事件合成用法.分享给大家供大家参考.具体分析如下: jQuery有两个合成事件--hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法 hover()方法的语法结构为: hover(enter,leave); hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个

随机推荐