jQuery基础
jQuery是一个JavaScript函数库,也可以称之为JavaScript框架。"写的少，做的多"。
一，安装引用
常见的有两种方式引用jQuery：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google，百度，新浪 中加载 jQuery
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。例如：
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery，选择符（selector）"查询"和"查找" HTML 元素，jQuery 的 action() 执行对元素的操作。例如：
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有
元素
-
$("p.test").hide() - 隐藏所有 class="test" 的
元素
-
$("#test").hide() - 隐藏所有 id="test" 的元素
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
提示：简洁写法（与以上写法效果相同，平常都是这么写）:
$(function(){
// 开始写 jQuery 代码...
});
选择器对于jQuery来说是最重要的一部分了，因为无论你做什么操作，都需要先找到你要修改的元素。
选择器很多，总结归类有如下几种：
1.基本选择器
$("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器
$("[href]") //属性选择器$ ( ".classname,.classname1,#id1" ) //组合选择器 包括ID选择器，元素选择器，类选择器，属性选择器组合选择器。
2.层次选择器
$("div > p") // 元素的直接子元素的所有 元素
$("div p") //
元素的后代的所有 元素
$("div + p") //每个
元素相邻的下一个 元素
$("div ~ p") //
元素同级的所有 元素
3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
四，jQuery事件
常见 DOM 事件：
鼠标事件
键盘事件
表单事件
文档/窗口事件
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave
blur
unload
事件参考： http://www.runoob.com/jquery/jquery-ref-events.html
五，jQuery效果
5.1，隐藏/显示
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide()和show可以带参数，表示隐藏和显示的速度（单位：毫秒），例如：
$("button").click(function(){
$("p").hide(1000);
});
也可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素。
5.2，淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn() //淡入已隐藏的元素
- fadeOut() //用于淡出可见元素。
- fadeToggle() //淡入淡出切换
- fadeTo() //渐变为给定的不透明度（值介于 0 与 1 之间）
以上几种方法都可以带参数，表示淡入淡出的速度（单位：毫秒）
5.3，滑动
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown() //用于向下滑动元素。
- slideUp() //用于向上滑动元素。
- slideToggle() //用于slideDown() 与 slideUp() 方法之间进行切换
$("#flip").click(function(){
$("#panel").slideToggle();
});
5.4 动画
jQuery animate() 方法用于创建自定义动画。
语法：
$(
selector).animate({
params}
,speed,callback);
例如
$("button").click(function(){
$("div").animate({left:'250px'});
});
操作多个元素
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
使用队列
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
效果演示： http://www.runoob.com/try/try.php?filename=tryjquery_animation
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
六，jQuery操作HTML
6.1捕获和设置
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
6.2添加元素
添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append() 方法在被选元素的结尾插入内容。
$("p").append("追加文本");
可以在被选元素的结尾插入若干个新元素
function appendText()
{
var txt1="文本。
"; // 使用 HTML 标签创建文本
var txt2=$("").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
总结区别：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
6.3， 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
6.4，css方法
css() 方法设置或返回被选元素的一个或多个样式属性。
下面的例子将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
七，jQuery 遍历
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
7.1，向上遍历
它们用于向上遍历 DOM 树：
- parent() // 方法返回被选元素的直接父元素
- parents() //方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
- parentsUntil() //方法返回介于两个给定元素之间的所有祖先元素
例如
$(document).ready(function(){
$("span").parentsUntil("div");
});
7.2，向下遍历
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children() //返回被选元素的所有直接子元素(儿子)
- find() //方法返回被选元素的后代元素，一路向下直到最后一个后代
下面的例子返回属于 后代的所有 元素：
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
7.3,同胞
同胞拥有相同的父元素。
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings() //方法返回被选元素的所有同胞元素。
- next() //方法返回被选元素的下一个同胞元素
- nextAll() //方法返回被选元素的所有跟随的同胞元素
- nextUntil() // 方法返回介于两个给定参数之间的所有跟随的同胞元素
- prev()
- prevAll()
- prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
8,AJAX
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对网页的局部刷新。
8.1 get()/post()方法
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
语法$.get(
URL,
callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。例如：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(
URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"tome",
url:"http://baidu.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
})
8.2 AJAX方法
语法：
$.ajax({name:value, name:value, ... }) 该参数规定 AJAX 请求的一个或多个名称/值对。
常见的参数有，url，type(get/post),data(参数)，dataType(返回参数)，success(
result,status,xhr)，error(
xhr,status,error)等。
例如
$.ajax({
url:"getRegionBranch.action",
type:"post",
data:"pid=" + pid,
dataType:"json",
success:function (data) {
$("#township").append(""),
$.each(data,function(i,item){
$("#township").append("");//赋值
});
},
error:function(xhr, status, error){
alert(status);
alert(xhr.responseText);
}//这里不要加","
});