<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="./js/jquery-3.2.1.js"></script>
<title>jquery_dom</title>
</head>
<body>
<div id="div1" name="testDiv">div1</div>
<div id="div2" name="testDiv">div2</div>
<div id="div3" name="testDiv">div3</div>
</body>
<script>
// 參考：https://www.cnblogs.com/Sara-shi/p/5291738.html
// jquery對象
console.log("jqueryObj:", $('#div1'));
// DOM對象
let div1Obj = document.getElementById('div1');
console.log("domObj:", div1Obj);
console.log('');
// 1.dom -> jquery
console.log("jqueryObj:", $(div1Obj));
// 2.jquery -> dom
console.log("domObj:", $('#div1')[0]);
console.log("domObj:", $('#div1').get(0));
console.log('');
// 注：document或Jquery中通過className或TagName獲取的數組對象，應該通過循環逐個轉換。
let divArray = document.getElementsByTagName('div');
console.log(divArray);
console.log($(divArray));
console.log($('div'));
console.log('');
// 方式1.
for (let index in divArray) {
if (index < divArray.length) {
console.log(divArray[index]);
}
}
// 方式2.
for (let index = 0; index < divArray.length; index++) {
console.log(divArray[index]);
}
// 方式3.
$('div').each(function () {
console.log(this);
});
</script>
</html>
js Jquery對象與DOM對象之間的轉換.html
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
javascript傳遞參數如果是object的話，是按值傳遞還是按引用傳遞？
先看看這段代碼的輸出結果： function test(person) { person.age = 26 person = { name: 'huahua', age: 90 } return p