1. 程式人生 > >jquery對象與DOM對象

jquery對象與DOM對象

window style win -- 1.3 mooc 慕課 語法 utf-8

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<!-- 使用JS原生語法 -->
<script type="text/javascript">
window.onload = function(){
// 通過原生JS語法獲取id為imooc1的元素p
var p = document.getElementById(‘imooc1‘);
// 將元素p在html中內容改變
p.innerHTML = ‘P1:您好!通過慕課網學習jQuery才是最佳的途徑‘;
// 將元素p的內容顏色改為紅色
p.style.color = ‘red‘;
}
</script>

<!-- 使用jQuery語法 -->
<script type="text/javascript">
$(document).ready(function() {
/**
* 通過jQuery語法獲取id為imooc2的元素獲得一個jQuery對象
* 調用該對象的html()方法進行更改內容
* 調用該對象的css()方法進行更改顏色樣式
*/
var $p = $(‘#imooc2‘);
$p.html(‘P2:您好!通過慕課網學習jQuery才是最佳的途徑‘).css(‘color‘,‘red‘);
});
</script>

</head>

<body>
<p id="imooc1"></p>
<p id="imooc2"></p>
</body>

</html>

jquery對象與DOM對象