JQuery Object 和 DOM的区别

HTML DOM 定义了访问和操作HTML文档的标准方法。其中 document 是DOM 树的根对象 ，在浏览器宿主环境中，可以通过JS操作HTML DOM，例如：

document.getElementById("intro").innerHTML;

如果将DOM element alert 出来，其显示为 [object HTMLFormElement]

参考：http://www.w3school.com.cn/htmldom/index.asp

JQuery Object 包含了一个DOM element 的数组， 例如 $('form') 表示当前页面中所有form元素的JQuery object数组。

如果将JQuery Object  alert 出来，其显示为 [object Object]

参考：http://api.jquery.com/Types/#jQuery

JQuery Object, DOM 互转

JQuery Object 转 DOM

如果确定该JQuery Object 只包含一个DOM对象，可以直接获取，例如

var domEle = $('#uniqueId').get(0);

如果是一组DOM对象，可以用each迭代，例如，打印所有checkbox的value代码。

$(':checkbox').each(function(){

        console.log("DOM way: "+this.value);

	console.log("JQuery way: "+$(this).val());

});

关于console.log()， 我也是今天才知道，在Chrome中，可以用Ctrl+Shift+I 打开调试Javascript 的console， 不仅可以打印log，还可以设置断点debug。 比alert 好用多了，看来还是要多看资料啊。

DOM 转 JQuery Object 就 更简单了， 用$( ) 包住 DOM Object  就可以了， 例如， $(document.getElementById("uniqueId"))

实战

页面上有多个form表单，要求在每个表单里的checkbox按照数据库中已有信息，进行预先勾选。

<html>

 <head>

  <title> Checkbox demo</title>

 </head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	$("form").each(function(){

		console.log("DOM Object" + this);

		console.log("JQuery Object" + $(this));

		var existingOpts = $(this).find('.existingOpts').val();

		console.log("Checked options: "+ existingOpts );

		$(this).find(':checkbox').each(function(){

			if (existingOpts.indexOf($(this).val()) != -1)

			{

				$(this).attr('checked','checked');

			}

		});

	});

});

</script>

 <body>

  <form id='1'>

	<input type="hidden" name="existingOpts" class='existingOpts' value="apple;orange;"/>

	<input type="checkbox" id="mycheckbox" name="test.checkbox" value="apple"> Apple

	<input type='checkbox' name='test.checkbox' value='orange'> Orange

  </form>

  <form id='2'>

	<input type="hidden" name="existingOpts" class='existingOpts' value="apple;"/>

	<input type='checkbox' name='test.checkbox' value='apple'>Apple

	<input type='checkbox' name='test.checkbox' value='orange'>Orange

  </form>

 </body>

</html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

JQuery Object vs. DOM element的更多相关文章

  1. jQuery object and DOM Element

    They're both objects but DOMElements are special objects. jQuery just wraps DOMElements in a Javascr ...

  2. How do I pull a native DOM element from a jQuery object? | jQuery Learning Center

    How do I pull a native DOM element from a jQuery object? | jQuery Learning Center How do I pull a na ...

  3. jQuery核心之jQuery Object及其相关的常用方法

    1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的 ...

  4. 惊叹jQuery(解决jQuery对象到DOM的转换)

    jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...

  5. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  6. jQuery基础教程-第8章-002Adding jQuery object methods

    一.Object method context 1.We have seen that adding global functions requires extending the jQuery ob ...

  7. jQuery对象与dom对象的转换

    一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. jQuery对象和DOM对象的相关知识

    所谓的DOM就是Document Object Model(文档对象模型)的缩写,或许是我水平低的缘故,感觉就是HTML的标记元素嘛,所以作者画了下面的图: 像这样的元素,就是所谓的DOM对象,获取值 ...

随机推荐

  1. 在Eclipse中配置Tomcat服务器

    第一步:开启Eclipse,选择“servers”选项卡,点击下方新建server的链接. 如果找不到“server”选项卡,可以使用以下方法: 选择window--> show View -- ...

  2. 2016HUAS_ACM暑假集训2E - I Hate It

    又是一个线段树的应用,不过跟上一题(D-排兵布阵)不同的是,这次是求某段区间上的最值,而不是某段区间和.当然,数据更新是必须的.D题注释已经很详细了,所以这题注释少点. 大致题意:给你N个已经排好的学 ...

  3. 解决IE6下JS动态插入iframe不显示的方法

    function myshowBox(titles, urls, objWidth, objHeight, flags) {     var _title = titles;     var _url ...

  4. MFC 线程使用

    CWinThread*  m_pthread; //多线程对象 struct param//参数传递结构体 { int id; TASK t[20]; }; CNB400Dlg::CNB400Dlg( ...

  5. EDIUS设置Alpha转场的教程

    有刚开始学习EDIUS视频编辑软件的同学吗?你们是否需要一本很好的EDIUS教程呢?你们可以到EDIUS中文网站里面找哦,小编会一直更新EDIUS教程的,能给你们带来帮助我是非常高兴的.今天我们来一起 ...

  6. 【java】 java 解压tar.gz读取内容

    package com.xwolf.stat.util; import com.alibaba.druid.util.StringUtils; import com.alibaba.fastjson. ...

  7. php微信接口实例

    <?php /** * wechat php test */ //define your token //定义TOKEN秘钥 define("TOKEN", "we ...

  8. Java学习总结（二）----Java语言基础

    1.     Java语言基础 2.1 关键字 定义:被java语言赋予特殊含义的单词 特点:关键字中的字母都为小写 用于定义数据类型的关键字 class,interface,byte,short,i ...

  9. Paxos一致性算法

    分布式系统的整体思路:协调者与参与者 分布式系统中,每个节点可以知道自己在事务操作过程中是成功还是失败,但无法获取其他节点的操作结果,所以就不知道这个事务是否在所有机器上全都执行成功,所以需要引入一个 ...

  10. 仿微信朋友圈图片查看-glide加载网络图片，photoview 实现缩放

    http://www.cnblogs.com/csonezp/p/5083286.html 这里实现的效果就和微信朋友圈点击图片后查看大图一样,如果你不清楚是什么效果,可以拿出手机,打开朋友圈,找到一 ...