# jQuery
## 什么是jQuery？
**jQuery 是一个 JavaScript 库。**
**jQuery 极大地简化了 JavaScript 编程。**
**jQuery 很容易学习。**
## jQuery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：*$(selector).action()*
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
### 示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
## jQuery对象
```javascript
<script>
//JS代码 和 Jquery可以混合使用 。
// $(function(){}) 等价于 window.onload=function(){}
// $(function (){
// //alert("123");
// //var div1 = document.getElementById("div1");
// var id = $("div").attr("id");
//
// //什么叫Jquery对象。什么叫JS对象 。
// //通过jquery的写法(jq选择器)找到的对象，我们都叫jquery对象 。
// 只有jquery对象可以调用jquery方法。
// //什么又是JS对象 。
// var div1 = document.getElementById("div1);
// var result = div1.attr("haha");
// alert(result)
// })
// $(function (){
// alert("323");
// })
$(function (){
var divs = $("div");//document.getElementsByTagName("div");
//var div1 = $("div").attr("haha");
//alert(div1)
//alert(divs.length)
// $.each(你要遍历的对象,function(ss,abc){ ...call back 回调函数 。 })
$.each(divs, function(index,obj) {
//回调函数中的第一参数 表示 下标。
//第二个参数 表示在循环过程中的每一个对象 。
alert(index+" "+obj)
});
})
</script>
```
## jQuery对象与javascript对象转换
```javascript
<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选择器
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
### 元素选择器
```javascript
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$(".intro") 选取所有 class="intro" 的元素。
$("#demo") 选取所有 id="demo" 的元素。
$("span,#two") 选择 所有的 span 元素和id为two的元素
```
### 属性选择器
```javascript
$("div[title]") 选取含有 属性title 的div元素。
$("div[title='test']") 选取 属性title值等于'test'的div元素
$("div[title!='test']") 选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)
$("div[title^='te']") 选取 属性title值 以'te'开始 的div元素
$("div[title$='est']") 选取 属性title值 以'est'结束 的div元素
$("div[title*='es']") 选取 属性title值 含有'es'的div元素
$("div[id][title*='es']") 组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("div[title][title!='test']") 选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
```
### 基础选择器
```javascript
$("div:first") :first 选择第一个 div 元素
$("div:last") :last 选择最后一个 div 元素
$("div:not(.one)") :not() 选择class不为 one 的所有 div 元素
$("div:even") :even 选择索引值为偶数的 div 元素 :odd 为奇数
$("div:gt(3)") :gt() 选择索引值为大于 3 的 div 元素 :eq() 等于 :lt() 小于
$(":header") :header 选择所有的标题元素
$(":animated") :animated 选择当前正在执行动画的所有元素
$("#two").nextAll("span:first") .nextAll() 选择 id 为 two 的下一个 span 元素
```
### 子元素选择器
```javascript
$(".one :nth-child(2)") :nth-child(n) 选取每个class为one的div父元素下的第2个子元素
$(".one :first-child") :first-child 选取每个class为one的div父元素下的第一个子元素
:last-child 最后一个子元素
$(".one :only-child ") :only-child 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
```
### 内容选择器
```javascript
$("div:contains('di')") :contains() 选择 含有文本 'di' 的 div 元素
$("div:empty") :empty 选择不包含子元素(或者文本元素) 的 div 空元素
$("div:has(.mini)") :has() 选择含有 class 为 mini 元素的 div 元素
$("div:parent") :parent 选择含有子元素(或者文本元素)的div元素
```
### 表单对象属性过滤选择器
```javascript
$("input:enabled") :enabled 对表单内 可用input 赋值操作
$("input:disabled") :disabled 对表单内 不可用input 赋值操作
$(":checkbox:checked") :checked 获取多选框选中的个数
```
### 层级选择器
```javascript
$("body div") 选择 body 内的所有 div 元素 空格隔开表示
$("body > div") > 在 body 内, 选择直接子元素是 div 的
$("#one").next("div") .next() 选择 id 为 one 的下一个 div 元素
$("#two").nextAll("div") .nextAll() 选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#two").siblings("div") .siblings() 选择 id 为 two 的元素所有 div 兄弟元素
$("#two").prevAll("div") .prevAll() 选择 id 为 two 的元素前边的所有的 div 兄弟元素
```
### 可见性选择器
```javascript
$("div:visible") :visible 选取所有可见的 div 元素
$("div:hidden") :hidden 选择所有不可见的 div 元素
setTimeout(function(){
($("div:hidden").show())
},2000) //选择所有不可见的 div 元素，使用time()方法，2秒后设置可见
```
## jQuery事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
```html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
```
### jQuery实现全选
```html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#checkedAll_2").click(function(){
$("input[name='items']").attr("checked",this.checked);
})
})
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选
<br /> <input
type="checkbox" name="items" value="足球" />足球 <input type="checkbox"
name="items" value="篮球" />篮球 <input type="checkbox" name="items"
value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球
</form>
</body>
</html>
```
### jQuery事件冒泡
```html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
*
* 在某一个对象上触发某一类事件（如上例的click事件），那么此事件会向对象的父级对象传播，
* 并触发父对象上定义的同类事件。
* 事件传播的方向是从最底层到最顶层，类似于水泡从水底浮上来一般。
*
* 事件的冒泡 。
* 阻止事件的冒泡 。
* return false;
* 1.阻止事件冒泡。
* 2.阻止元素的默认行为。
* event.stopPropagation()...
* event.preventDefault()...
* */
$(function (){
$("#span1").click(function (){
alert("你点了span")
return false;
});
$("#div1").click(function (){
alert("你点了div!!!!")
event.stopPropagation()//事务的传播行为 。
});
// $("body").click(function (){
// alert("你点了body...")
// })
// $("html").click(function(){
// alert("点了html")
// })
//绑定事件的方式 。
$("a").on("click",function(){
alert("哈哈")
//return false;
//event.preventDefault();
return false;
})
});
</script>
</head>
<body>
<div id="div1">
<span id="span1" style="background-color: #FBD850;">我是一个span</span>
</div>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
```
### jQuery实现添加删除记录
```html
<html>
<head>
<meta charset="UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// var $flog=$("a").confirm("是否确认删除这条信息？");
// if($flog){
//
// }
var $add = $("#addEmpButton");
var $tab = $("#employeeTable");
var $del = $("a")
$add.click(function() {
var $name = $("#empName").val()
var $email = $("#email").val()
var $sal = $("#salary").val()
$($tab).append("<tr><td>" + $name + "</td><td>" + $email + "</td><td>" + $sal + "</td><td><a href='#'>" + 'Delete' + "</a></td></tr>")
})
$("#employeeTable").delegate("a", "click", function() {
var flog = confirm("确认删除这条信息吗？");
if(flog) {
$(this).parent().parent().remove();
}
return false;
})
})
</script>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td>
<a href="#">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td>
<a href="#">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td>
<a href="#">Delete</a>
</td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
```
## jQuery属性
```html
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 通过后台加载数据，并在网页上进行显示。
使用 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
```
```javascript
<script type="text/javascript">
$.ajax方法
// $(function(){
// $.ajax({
// type:"post",
// url:"http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20",
// dataType:"json",
// success:function(msg){
// $.each(msg.list,function(index){
// $("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'/>评分:"+this.rate+"</div>")
// })
// }
// });
// })
$.post方法
$(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>
```
