<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<title>jquery</title>
</head>
<body>
<script type="text/javascript">alert($) </script>
</body>
</html>
$(document).ready try
$(document).ready 的作用是等頁(yè)面的文檔（document）中的節(jié)點(diǎn)都加載完畢后奋单，再執(zhí)行后續(xù)的代碼氏淑，因?yàn)槲覀冊(cè)趫?zhí)行代碼的時(shí)候仑氛，可能會(huì)依賴頁(yè)面的某一個(gè)元素，我們要確保這個(gè)元素真正的的被加載完畢后才能正確的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>第一個(gè)簡(jiǎn)單的jQuery程序</title>
<style type="text/css">
div{
padding:8px 0px;
font-size:12px;
text-align:center;
border:1px solid #888;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("您好丙挽！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑掌敬。");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
jQuery對(duì)象與DOM對(duì)象 try
jQuery對(duì)象與DOM對(duì)象是不一樣的,
1.通過jQuery方法包裝后的對(duì)象，是一個(gè)類數(shù)組對(duì)象蠢熄。它與DOM對(duì)象完全不同跪解，唯一相似的是它們都能操作DOM。
2.通過jQuery處理DOM的操作签孔，可以讓開發(fā)者更專注業(yè)務(wù)邏輯的開發(fā)叉讥，而不需要我們具體知道哪個(gè)DOM節(jié)點(diǎn)有那些方法，也不需要關(guān)心不同瀏覽器的兼容性問題饥追，我們通過jQuery提供的API進(jìn)行開發(fā)图仓，代碼也會(huì)更加精短。
<!DOCTYPE html>
<html>
<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中內(nèi)容改變
p.innerHTML = 'P1：您好但绕！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
// 將元素p的內(nèi)容顏色改為紅色
p.style.color = 'red';
}
</script>
<!-- 使用jQuery語法 -->
<script type="text/javascript">
$(document).ready(function() {
/**
* 通過jQuery語法獲取id為imooc2的元素獲得一個(gè)jQuery對(duì)象
* 調(diào)用該對(duì)象的html()方法進(jìn)行更改內(nèi)容
* 調(diào)用該對(duì)象的css()方法進(jìn)行更改顏色樣式
*/
var $p = $('#imooc2');
$p.html('P2：您好救崔！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');
});
</script>
</head>
<body>
<p id="imooc1"></p>
<p id="imooc2"></p>
</body>
</html>
DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象try
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對(duì)象惶看，jQuery方法會(huì)把這個(gè)DOM對(duì)象給包裝成一個(gè)新的jQuery對(duì)象
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
// 方法一
<script type="text/javascript">
// var div = document.getElementsByTagName('div'); //dom對(duì)象
//將dom節(jié)點(diǎn)div轉(zhuǎn)化為$div的jquery對(duì)象
// $div = ?
var $div = $('div');
var $first = $div.first(); //找到第一個(gè)div元素
$first.css('color', 'blue'); //給第一個(gè)元素設(shè)置顏色
</script>
// 方法二
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom對(duì)象
//將dom節(jié)點(diǎn)div轉(zhuǎn)化為$div的jquery對(duì)象
// $div = ?
var $div = $(div);
var $first = $div.first(); //找到第一個(gè)div元素
$first.css('color', 'blue'); //給第一個(gè)元素設(shè)置顏色
</script>
</body>
</html>
