更新時間:2022-06-29 09:52:14 來源:動力節點 瀏覽1545次
官網下載對應的jquery安裝版本文件,在需要用到jquery的地方,用script標簽引入進來
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
獲取元素包裝集對象
<body>
<div id="div1">
hello
</div>
<script type="text/javascript">
//獲取元素包裝集對象
var div1 = $("#div1");
console.log(div1);
console.log(div1[0].innerText);
</script>
</body>
DOM對象獲取
通過document.getElementById("id屬性值")獲取
如果元素不存在,則獲取的是null
<body>
<div id="div1">塊級元素</div>
<script type="text/javascript">
//獲取dom對象
var divDom = document.getElementById("div1");
var divDom2 = document.getElementById("div2");
console.log(document.getElementById("div1"));
console.log(divDom2);//null
</script>
</body>
Jquery包裝集對象
$("#id屬性值");獲取
如果元素不存在,不會返回null,是一個空的結果集
<body>
<div id="div1">塊級元素</div>
<script type="text/javascript">
//jquery包裝集對象
var divJquery = $("#div1");
var divJquery2 = $("#div2");
console.log(divJquery);
console.log(divJquery2);
console.log(divJquery.length);
console.log(divJquery2.length);
</script>
</body>
Dom轉換成jquery包裝集對象
$("dom對象");將需要轉換的內容(dom對象/標簽體)放入$("內容")中
<body>
<div id="div1">塊級元素</div>
<script type="text/javascript">
var divDom = document.getElementById("div1");
//Dom轉換成jquery包裝集對象
console.log($(divDom));
var span = "<span>行內元素</span>";
console.log($(span));
</script>
</body>
Jquery包裝集對象轉換成Dom
jquery對象[下標] 可以直接獲取到其中的dom對象
<body>
<div id="div1">塊級元素</div>
<script type="text/javascript">
//jquery包裝集對象 轉換成Dom
var newDom = divJquery[0];
console.log(newDom);
$('#div1').each(function() {//遍歷
console.log($(this));
console.log(this);
});
</script>
</body>
以上就是關于“jQuery獲取對象的方式”介紹,大家如果對此比較感興趣,想了解更多相關知識,不妨來關注一下動力節點的jQuery教程,里面有更豐富的知識等著大家去學習,希望對大家能夠有所幫助哦。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習