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>
版权声明：本文为博主原创文章，未经博主允许不得转载。