JQuery Object vs. DOM element-阿里云开发者社区

开发者社区> 开发与运维> 正文

JQuery Object vs. DOM element

简介: JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法。其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML DOM,例如: document.getElementById("intro").innerHTML; 如果将DOM element alert 出来,其显示为 [object H

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>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章