什么是jquery？
jquery是js的一個(gè)輕量級(jí)的庫(kù)，也可以說(shuō)是js的框架，幫助我們封裝了很多的js的方法，方便我們使用。
想要學(xué)習(xí)好jquery框架，就要明白以下兩個(gè)對(duì)象：
DOM對(duì)象（文檔對(duì)象模型）:指的是HTML頁(yè)面的元素(標(biāo)簽)，通過(guò)dom對(duì)象可以使用js中的一些屬性和方法。
jquery對(duì)象： 指的是通過(guò)jquery創(chuàng)建出來(lái)的，一些對(duì)象，通過(guò)jQuery對(duì)象可以使用jQuery Api中的一些方法。
注意：
DOM對(duì)象和jQuery對(duì)象，是不能相互調(diào)用的，列如DOM對(duì)象不能使用JQuery的方法，jQuery也不能使用js(javaScript)中的方法和屬性！！！！！！！！
所以呀，不要在腦海里，把js和jquery分開(kāi)
怎樣使用jQuery？
1.下載相應(yīng)的文件庫(kù)
2.將jQuery的js文件拷貝到web的目錄下
3.頁(yè)面引入js文件(jquery的js)
<script type="text/javascript" src="js/jquery.min.js" /></script>
4.頁(yè)面中載入jQuery
jQuery的入口的格式： (下面三個(gè)也叫做 等效代碼 ，三個(gè)功能都是一樣的)
格式一：
$(function(){ //常用
alert();
})
格式二:
JQuery(function(){
alert();
})
格式三:
window.JQuery(function(){
alert();
})
$符號(hào) 等價(jià)于jQeury，$其實(shí)就是jquery庫(kù)中定義的一個(gè)全局變量，用于表示jQuery這個(gè)對(duì)象。
頁(yè)面中啟動(dòng)jQeury，當(dāng)頁(yè)面中所有的元素都加載完成后，才會(huì)執(zhí)行啟動(dòng)jQuery的代碼，也就是說(shuō)在$(function(){})里面寫(xiě)
代碼時(shí)，頁(yè)面的所有的其他元素都已經(jīng)出現(xiàn)了
DOM 轉(zhuǎn)換jQuery對(duì)象
使用$(DOM對(duì)象)方式，可以DOM對(duì)象轉(zhuǎn)換成JQuery對(duì)象 doucment.getxxx返回的就是dom對(duì)象
jQuery對(duì)象的val()函數(shù)，等同于DOM對(duì)象的value屬性
一般情況下，在命名jQuery對(duì)象時(shí)，為了與DOM對(duì)象進(jìn)行區(qū)分，習(xí)慣性的以$開(kāi)頭
eg:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
var v_dom = document.getElementById("name"); //得到的是dom對(duì)象
//alert(v_dom.value)
//將DOM對(duì)象轉(zhuǎn)換成jQuery
var v_jquery = $(v_dom); //李銀河
//alert(v_jquery.value) //結(jié)果為 underfine 因?yàn)镴query對(duì)象不能使用DOM中的屬性value
alert(v_jquery.val) //李銀河
})
</script>
</head>
<body>
<input type="text" value="李銀河" id ="name">
</body>
</html>
jQuery 轉(zhuǎn)換DOM對(duì)象
根據(jù)id獲取jQuery對(duì)象和獲得dom對(duì)象的格式：
var v_jquery=$("#name"); // 得到的就是jquery對(duì)象
var v_document.getElementById("name"); //得到的就是DOM對(duì)象
j query獲取對(duì)象的時(shí)候，其實(shí)是一個(gè)數(shù)組，數(shù)組的長(zhǎng)度取決于jquery獲取頁(yè)面元素的個(gè)數(shù)，
這些數(shù)組中存放的元素是dom對(duì)象
v_dom=v_jquery[0] //將jquery對(duì)象轉(zhuǎn)換乘DOM對(duì)象
jquery對(duì)象里面其實(shí)是一個(gè)數(shù)組，數(shù)組里裝的全是dom對(duì)象！！！！！！！！！！！！！！！
$("標(biāo)簽") 將獲取到所有指定標(biāo)簽的jquery對(duì)象。當(dāng)然是多個(gè)對(duì)象，即為數(shù)組
由于jquery對(duì)象為數(shù)組，所以具有返回的長(zhǎng)度的屬性length
val $a = $("標(biāo)簽");
alert($a.length+"多少個(gè)標(biāo)簽");
$("#id標(biāo)簽").click(function(){ //為id的標(biāo)簽觸發(fā)一個(gè)函數(shù)
$($a[0]).css("background","green"); //改變第一個(gè)標(biāo)簽的背景顏色
});
jQuery提供了非常豐富的選擇器
什么是選擇器：選擇器就是獲取頁(yè)面元素的一種語(yǔ)法（工具），jQuery提供了豐富的元素選擇器，
可以方便快捷的獲取頁(yè)面中的元素對(duì)象
選擇器的類型：
基本:
#id
<div id="myDiv"> //html代碼
$("#myDiv") //jQuery代碼
element
.class
.
selector1,selector2,selectorN
層級(jí)
簡(jiǎn)單:
:first
:last
:even 基數(shù)
:odd 偶數(shù)
<tr><td>嗨</td><tr> //html代碼 0
<tr><td>你好</td><tr> //html代碼 1
<tr><td>哈哈</td><tr> //html代碼 2
$("tr:odd") //匹配所有索引值為奇數(shù)的元素，從0開(kāi)始
:eq(index) 是不是等于
:lt() 是不是小于
:gt() 是不是大于
內(nèi)容
可見(jiàn)性
屬性 (重點(diǎn))
[attribute] 匹配包含給定屬性的元素
子元素
表單
表單對(duì)象屬性
注意:
id是不能重復(fù)的，如果頁(yè)面中有多個(gè)id相同那么jQuery只會(huì)獲取第一次出現(xiàn)的這個(gè)id作為jquery對(duì)象
.class
獲取出來(lái)的jQuery是一個(gè)數(shù)組，如果直接使用jQuery會(huì)把數(shù)組中的第一個(gè)元素作為jQuery的對(duì)象使用
<head>
<title>Insert title here</title>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
alert($(".name").length) //2
//獲取出來(lái)的jQuery是一個(gè)數(shù)組，如果直接使用jQuery會(huì)把數(shù)組中的第一個(gè)元素作為jQuery的對(duì)象使用
alert($(".name").val()) //張三
//如果想獲取李四的話，需要根據(jù)索引獲取到指定元素的位置的dom對(duì)象后，再轉(zhuǎn)換成jquery對(duì)象，進(jìn)行使用
alert($($(".name")[1]).val()) //李四
})
</script>
</head>
<body>
<input type="text" class="name" value="張三"><br>
<input type="text" class="name" value="李四">
</body>
選擇器的類型之屬性選擇器------[attribute]
eg:
<script type="text/javascript">
$(function(){
alert($("[value]").length) //4 獲取所有的value屬性的元素
alert($(".name[value]").length) //獲取所有class為name并且擁有的value屬性頁(yè)面的屬性為3個(gè)
})
</script>
<body>
<div class="name">
<input type="text" class="name" value="李四">
</div>
<input type="text" class="name" value="王五">
<input type="text" class="name" value="趙六">
<a value="aa">連接</a>
</body>
jQuery——val屬性/val(value)屬性
val是對(duì)表單元素的數(shù)據(jù)進(jìn)行獲取
eg:
可以獲取文本框，按鈕，復(fù)選框，下拉列表，單選按鈕等等.....
val() 獲取
val(value) 賦值，修改val的內(nèi)容 eg: $("#name").val("李四")
jQuery——html()
html(value)
text()
text(value)
html() 獲取這個(gè)頁(yè)面中所有的html代碼
text() 獲取這個(gè)元素的文本內(nèi)容，不包含頁(yè)面中的html代碼
html(value) 設(shè)置一段html的代碼到這里面，不帶html的標(biāo)簽，(因?yàn)檫@是html編譯后的內(nèi)容)
text() 設(shè)置一段代碼文本，帶html的標(biāo)簽(因?yàn)樗鼘?duì)html的代碼不編譯)
注意：
html編譯前，有標(biāo)簽和文本。
html編譯后，是沒(méi)有標(biāo)簽，只有文本。
jQuery的屬性-------addClass/removeClass
點(diǎn)擊之后，div的顏色設(shè)置成了背景顏色
eg:
<style type="text/css">
.div1{background-color:red}
<style>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
alert("添加一個(gè)class到div")
$("#div1").addClass("div1")
alert("移除一個(gè)class")
$("div1").removeClass("div1")
})
</script>
</head>
<body>
<div id="div1">
這是div1
</div>
</body>
jQuery的屬性-------attr
attr() 方法設(shè)置或返回被選元素的屬性和值。
當(dāng)該方法用于返回屬性值，則返回第一個(gè)匹配元素的值。
當(dāng)該方法用于設(shè)置屬性值，則為匹配元素設(shè)置一個(gè)或多個(gè)屬性/值對(duì)。
$(selector).attr(attribute) //返回屬性的值：
$(selector).attr(attribute,value) //設(shè)置屬性和值：
$(selector).attr(attribute,function(index,currentvalue)) //使用函數(shù)設(shè)置屬性和值
$(selector).attr({attribute:value, attribute:value,...}) //設(shè)置多個(gè)屬性和值：
參數(shù): 描述:
attribute 規(guī)定屬性的名稱。
value 規(guī)定屬性的值。
function(index,currentvalue) 規(guī)定要返回屬性值到集合的函數(shù)
index - 接受集合中元素的 index 位置。
currentvalue - 接受被選元素的當(dāng)前屬性值。
eg:
$("button").click(function(){
$("img").attr("width","500");
});
jQuery的屬性----------bind() 方法 向元素添加事件處理程序
$(selector).bind(event,data,function,map)
bind() 方法向被選元素添加一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
eg:
$("p").bind("click",function(){
alert("這個(gè)段落被點(diǎn)擊了。");
});
