Dom物件與Jquery物件的區別
var domObj = document.getElementById("id"); //DOM物件
var $obj = $("#id"); //jQuery物件;
jQuery物件就是通過jQuery包裝DOM物件后產生的物件，它是jQuery獨有的，
兩個物件之間方法不能互用
$("#foo").html(); //jquery中替換文本內容
document.getElementById("foo").innerHTML;//Dom中替換文本內容
Dom物件與jquery物件之間可以相互轉換
將Dom物件轉化為jquery物件
$(Dom物件)
將jQuery物件轉化為Dom物件
jquery物件就是一個陣列物件.(個人將其理解為jquery就是一個存盤dom物件的陣列)
jquery物件.get(0) 或者jquery物件[0];
jquery中 .var() 與 .value方法的區別是什么?
var()方法是jquery物件獲取文本框中的內容,
alert(jquery物件.val());
并且可以向文本框中賦值內容,
alert(jquery物件.val("大吉大利,今晚吃雞"));
還可以修改Dom物件非表單元素添加value的值;
Dom物件.var("按鈕名稱改變");
.value方法:獲取Dom標簽元素的value值，屬于原生態JavaScript的寫法
Dom物件.value
2.在jquery中 .innerHTML()方法 與 .innerText()方法 .html方法,className屬性,style屬性
innerHTML:
用于設定或獲取HTML 元素中的內容，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="one">
<span>這是一個段落</span>
</p>
<script>
let obj = document.getElementById('one'); // 獲取id=one的p標簽
console.log(obj.innerHTML); // 顯示內容：<span>這是一個段落</span>
obj.innerHTML = '<span>hello world!</span>'; // 修改內容為： hello world!
</script>
</body>
</html>
效果展示:
.innerText()
用于設定或獲取HTML 元素中的純文本，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="one">
<span>這是一個段落</span>
</p>
<script>
let obj = document.getElementById('one');
console.log(obj.innerText); // 顯示文本內容 “這是一個段落”
obj.innerText = 'hello world!'; //修改文本內容
</script>
</body>
</html>
className屬性
用于設定或獲取DOM物件的類樣式，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="one" class="first"></div>
<script>
let obj = document.getElementById('one');
console.log(obj.className); // 修改前 first
obj.className = 'two';
console.log(obj.className); // 修改后 two
</script>
</body>
</html>
效果展示:
style屬性
用于設定或獲取DOM物件的style樣式，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="one">這是一個div</div>
<script>
let obj = document.getElementById('one'); // 通過id獲取div
obj.style.width = '500px'; // 通過style修改各種屬性
obj.style.height = '300px';
obj.style.backgroundColor = 'gray';
obj.style.fontSize = '20px';
obj.style.color = '#fff';
obj.style.border = 'solid 5px red';
obj.style.display = 'block'; //設定DOM物件的顯示和隱藏
</script>
</body>
</html>
效果展示:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/350982.html
標籤：其他
上一篇：Servlet實作前后端json資料互動，前端js傳輸資料，后端fastjson決議json資料，以及Tomcat部署和jquery的部署
下一篇：JavaScript實作彈性導航