341
JQuery Object vs. DOM element
JQuery Object 和 DOM的區別
HTML DOM 定義了訪問和操作HTML文檔的標準方法。其中 document 是DOM 樹的根對象 ，在瀏覽器宿主環境中，可以通過JS操作HTML DOM，例如：
document.getElementById("intro").innerHTML;
如果將DOM element alert 出來，其顯示為 [object HTMLFormElement]
參考：https://www.w3school.com.cn/htmldom/index.asp
JQuery Object 包含了一個DOM element 的數組， 例如 $('form') 表示當前頁麵中所有form元素的JQuery object數組。
如果將JQuery Object alert 出來，其顯示為 [object Object]
參考：https://api.jquery.com/Types/
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" 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>
最後更新：2017-04-03 14:54:27