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