# 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>
```
