您的位置：首页 > 移动开发 > Objective-C

JQuery Object vs. DOM element

2013-11-22 10:58 197 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航