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