# jQuery
## 一、簡介
jQuery是一個JavaScript函數庫。
jQuery庫包含以下功能：
? 1.html元素選取
? 2.html元素操作
? 3.CSS操作
? 4.HTML事件函數
? 5.JavaScript特效和動畫
? 6.HTML DOM遍歷和修改
? 7.AJAX
? 8.Utilities
## 二、語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。
基礎語法： $(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）"查詢"和"查找" HTML 元素
- jQuery 的 action() 執行對元素的操作
實例:
- $(this).hide() - 隱藏當前元素
- $("p").hide() - 隱藏所有 <p> 元素
- $("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隱藏所有 id="test" 的元素
## 三、對象
```html
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//JS對象轉換成Jquery對象。 $()包裹起來即可。
//var div1 = document.getElementById("div1");
//var jqDiv1 = $(div1);
//alert(jqDiv1.attr("id"))
//Jquery對象轉換成JS對象。1.JQ對象.get(index) 2.JQ對象[index]
//var div1 = $("#div1")[0];
var div1 = $("#div1").get(0);
var result = div1.getAttribute("haha");
alert(result)
//注意:DOM 對象才能使用DOM 中的方法，jQuery 對象是不可以使用DOM中的方法。
})
</script>
```
## 四、選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經存在的 [CSS 選擇器](https://www.runoob.com/cssref/css-selectors.html)，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
### 1、基本選擇器
```javascript
$("p")：根據給定的元素名匹配所有元素
$("#test")：根據給定的ID匹配一個元素
$(".test")：根據給定的類匹配元素
$("*")：匹配所有元素
$("div,span,p.myClass")：將每一個選擇器匹配到的元素合并后一起返回
$('li:first')：獲取第一個元素
$('li:last')：獲取最后個元素
$("input:not(:checked)")：去除所有與給定選擇器匹配的元素
$("tr:even")：匹配所有索引值為偶數的元素，從0開始計數
$("tr:odd")：匹配所有索引值為奇數的元素，從0開始計數
$("tr:eq(1)")：匹配一個給定索引值的元素
$("tr:gt(0)")：匹配所有大于給定索引值的元素
$("tr:lt(2)")：匹配所有小于給定索引值的元素
$(":header")：匹配如 h1, h2, h3之類的標題元素
$(":animated")：匹配所有正在執行動畫效果的元素
$(":focus")：匹配當前獲取焦點的元素
```
### 2、層級選擇器
```javascript
$("form input")：在給定的祖先元素下匹配所有的后代元素
$("form > input")：在給定的父元素下匹配所有的子元素
$("label + input")：匹配所有緊接在 prev 元素后的 next 元素
$("form ~ input")：匹配 prev 元素之后的所有 siblings 元素
```
### 3、內容選擇器
```javascript
$("div:contains('John')")：匹配包含給定文本的元素
$("td:empty")：匹配所有不包含子元素或者文本的空元素
$("div:has(p)").addClass("test")：匹配含有選擇器所匹配的元素的元素
$("td:parent")：匹配含有子元素或者文本的元素
```
### 4、可見性選擇器
```javascript
$("tr:hidden")：匹配所有不可見元素，或者type為hidden的元素
$("tr:visible")：匹配所有的可見元素
```
### 5、屬性選擇器
```javascript
$("div[id]")：匹配包含給定屬性的元素
$("input[name='newsletter']")：匹配給定的屬性是某個特定值的元素
$("input[name!='newsletter']")：匹配所有不含有指定的屬性，或者屬性不等于特定值的元素
$("input[name^='news']")：匹配給定的屬性是以某些值開始的元素
$("input[name$='letter']")：匹配給定的屬性是以某些值結尾的元素
$("input[name*='man']")：匹配給定的屬性是以包含某些值的元素
$("input[id][name$='man']")：復合屬性選擇器，需要同時滿足多個條件時使用
```
### 6、子元素選擇器
```javascript
$("ul li:nth-child(2)")：匹配其父元素下的第N個子或奇偶元素
$("ul li:first-child")：匹配第一個子元素
$("ul li:last-child")：匹配最后一個子元素
$("ul li:only-child")：如果某個元素是父元素中唯一的子元素，那將會被匹配，如果父元素中含有其他元素，那將不會被匹配
```
## 五、屬性
```javascript
attr() 設置或返回被選元素的屬性值。
removeAttr(name) 從每一個匹配的元素中刪除一個屬性
prop(name|properties|key,value|fn) 獲取在匹配的元素集中的第一個元素的屬性值。//為checked時用
html([val|fn]) 取得第一個匹配元素的html內容。
text([val|fn]) 取得所有匹配元素的內容。
val([val|fn|arr]) 獲得匹配元素的value值。
```
## 六、AJAX
? AJAX是與服務器交換數據的技術，它在補充在全部頁面的情況下，實現了對部分王爺的更新。
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。
```javascript
jQuery.ajax(url,[settings])
url:一個用來包含發送請求的URL字符串。
settings:AJAX 請求設置。所有選項都是可選的。
dataType 預期服務器返回的數據類型。
success 請求成功后的回調函數。
jQuery.post(url, [data], [callback], [type])
通過遠程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
url:發送請求地址。
data:待發送 Key/value 參數。
callback:發送成功時回調函數。
type:返回內容格式，xml, html, script, json, text, _default
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.post("http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20",
function(msg){
$.each(msg.list, function(index) {
$("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'>評分:"+ this.rate +"</div>")
});
},"json")
});
</script>
```
