jQuery是一个JavaScript库极大的简化JavaScript编程

1.jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2.页面中添加jQuery库

    <head><script type="text/javascript" src="jquery.js"></script></head>//提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？//在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

3.jQuery语法

基础语法是：$(selector).action()
美元符号$定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
$(this).hide(); //演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide(); //演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide(); //演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide(); //演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
//这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$(document).ready(function(){
--- jQuery functions go here ----
});
//如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小

4.jQuery 选择器

//在 HTML DOM 术语中：
//选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。例如
$(document).ready(function(){--- jQuery functions go here ----
});//jQuery 元素选择器
//jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。//jQuery 属性选择器
//jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。//jQuery CSS 选择器
//jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");

更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 `<p>` 元素
$(“p.intro”)	所有class=”intro”的 `<p>` 元素
$(“.intro”)	所有 class=”intro” 的元素
$(“#intro”)	id=”intro” 的元素
$(“ul li:first”)	每个 `<ul>` 的第一个 `<li>` 元素
("[href("[href=’.jpg’]”)	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=”intro” 的 `<div>` 元素中的所有class=”head” 的元素

5.jQuery事件

jQuery 事件处理方法是 jQuery 中的核心函数。

jQuery 名称冲突 var jq=jQuery.noConflict(),帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
1. 把所有 jQuery 代码置于事件处理函数中
2. 把所有事件处理函数置于文档就绪事件处理器中
3. 把 jQuery 代码置于单独的 .js 文件中
4. 如果存在名称冲突，则重命名 jQuery 库

jQuery 事件

Event	函数绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

6.jQuery 效果 - 隐藏和显示

$(selector).hide(speed,callback);//隐藏
$(selector).show(speed,callback);//显示
$(selector).toggle(speed,callback);//切换显示和隐藏
//selector被操作元素
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

7.jQuery 效果 - 淡入淡出

$(selector).fadeIn(speed,callback);//淡入
$(selector).fadeOut(speed,callback);//淡出
$(selector).fadeToggle(speed,callback);//淡入淡出互相切换
$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度
//selector被操作元素
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是 fading 完成后所执行的函数名称。
//fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
###8.jQuery 效果 - 滑动
```HTML
$(selector).slideDown(speed,callback);//下滑
$(selector).slideUp(speed,callback);//上滑
$(selector).slideToggle(speed,callback);//切换上下滑
//selector被操作元素
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是滑动完成后所执行的函数名称。<div class="se-preview-section-delimiter"></div>

9.jQuery 效果 - 动画

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
$("div").animate({left:'250px',opacity:'0.5',height:'+=150px',//（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=width:'toggle' //动画值设置为 "show"、"hide" 或 "toggle"});
//animate() 方法几乎可以用来操作所有 CSS 属性,不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
//同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
/*===实例1.隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能===*/
$("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");
});
//jQuery 停止动画所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此，默认地，stop() 会清除在被选元素上指定的当前动画。<div class="se-preview-section-delimiter"></div>

10.jQuery - Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red").slideUp(2000).slideDown(2000);//jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行<div class="se-preview-section-delimiter"></div>

11.jQuery - 获得内容和属性

三个简单实用的用于 DOM 操作的 jQuery 方法：获得内容 - text()、html() 以及 val()
1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容（包括 HTML 标记）
3. val() - 设置或返回表单字段的值
4. attr() - 设置或获取属性值
//获取值
$("#btn1").click(function(){let a = $("#test1").text();
});
$("#btn2").click(function(){let a = $("#test2").html();
});
$("#btn3").click(function(){let a = $("#test3").val();
});
$("button").click(function(){alert($("#w3s").attr("href"));//获得链接中 href 属性的值
});//设置值
$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){$("#test3").val("Dolly Duck");
});
$("button").click(function(){$("#w3s").attr({"href" : "http://www.w3school.com.cn/jquery","title" : "W3School jQuery Tutorial"//允许您同时设置多个属性。});
});<div class="se-preview-section-delimiter"></div>

jQuery 参考手册 - 文档操作
jQuery 参考手册 - 属性操作
jQuery 参考手册 - CSS 操作

12.jQuery - 添加元素

我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容function appendText()
{var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}<div class="se-preview-section-delimiter"></div>

13.jQuery - 删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");//过滤被删除的元素:删除 class="italic" 的所有 <p> 元素<div class="se-preview-section-delimiter"></div>

14.jQuery - 获取并设置 CSS 类

//jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
//1. addClass() - 向被选元素添加一个或多个类
//2. removeClass() - 从被选元素删除一个或多个类
//3. toggleClass() - 对被选元素进行添加/删除类的切换操作
//4. css() - 设置或返回样式属性
$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");
});
$("button").click(function(){$("#div1").addClass("important blue");
});
$("button").click(function(){$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){$("h1,h2,p").toggleClass("blue");
});<div class="se-preview-section-delimiter"></div>

15.jQuery - css() 方法设置或返回被选元素的一个或多个样式属性。

//获取方法  css("propertyname");
$("p").css("background-color");//获取背景色  如rgb(255, 0, 0)
//设置方法 css("propertyname","value");
//设置多个css({"propertyname":"value","propertyname":"value",...});
$("p").css("background-color");//设置<div class="se-preview-section-delimiter"></div>###16.jQuery - 尺寸<div class="se-preview-section-delimiter"></div>

jQuery 提供多个处理尺寸的重要方法：
width()//方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()//方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()//方法返回元素的宽度（包括内边距）。
innerHeight()//方法返回元素的高度（包括内边距）。
outerWidth()//方法返回元素的宽度（包括内边距和边框）。
outerHeight()//方法返回元素的高度（包括内边距和边框）。
获取宽高
(“#div1”).innerWidth()(“#div1”).innerWidth() (document).height()//返回文档（HTML 文档）
(window).width()//窗口（浏览器视口）的宽度和高度设置宽高(window).width()//窗口（浏览器视口）的宽度和高度设置宽高 (“button”).click(function(){
$(“#div1”).width(500).height(500);
});

<div class="se-preview-section-delimiter"></div>###16.[jQuery 参考手册 - 遍历](http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp)<div class="se-preview-section-delimiter"></div>####16.1jQuery 遍历 - 祖先-向上遍历 DOM 树 <div class="se-preview-section-delimiter"></div>

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()//方法返回被选元素的直接父元素
parents()//方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()//方法返回介于两个给定元素之间的所有祖先元素。
应用:
(document).ready(function()$(“span”).parent().css(“color”:”red”,”border”:”2pxsolidred”););(document).ready(function(){ $(“span”).parent().css({“color”:”red”,”border”:”2px solid red”}); }); (document).ready(function(){
(“span”).parents();(“span”).parents(); (“span”).parents(“ul”);//使用可选参数来过滤对祖先元素的搜索
});
(document).ready(function(){(document).ready(function(){ (“span”).parentsUntil(“div”);//返回介于与

元素之间的所有祖先元素
});

<div class="se-preview-section-delimiter"></div>####16.2jQuery 遍历 - 后代-向下遍历 DOM 树<div class="se-preview-section-delimiter"></div>

下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()//方法返回被选元素的所有直接子元素
find()//方法返回被选元素的后代元素，一路向下直到最后一个后代
实例
(document).ready(function(){(document).ready(function(){ (“div”).children();
$(“div”).children(“p.1”);//可选参数来过滤对子元素的搜索类名为 “1” 的所有

元素，并且它们是

的直接子元素
});
(document).ready(function(){(document).ready(function(){ (“div”).find(“span”);//返回属于

后代的所有元素
$(“div”).find(“*”);//返回

的所有后代
});

<div class="se-preview-section-delimiter"></div>####16.3jQuery 遍历 - 同胞 - 水平遍历<div class="se-preview-section-delimiter"></div>

siblings()//方法返回被选元素的所有同胞元素
next()//方法返回被选元素的下一个同胞元素
nextAll()//方法返回被选元素的所有跟随的同胞元素
nextUntil()//方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()//相反方向
prevAll()//相反方向
prevUntil()//相反方向
实例
(document).ready(function(){(document).ready(function(){ (“h2”).siblings();
(“h2”).siblings(“p”);//可选参数来过滤对同胞元素的搜索(“h2”).siblings(“p”);//可选参数来过滤对同胞元素的搜索 (“h2”).next();
(“h2”).nextAll();(“h2”).nextAll(); (“h2”).nextUntil(“h6”);//返回介于

与

元素之间的所有同胞元素
});

<div class="se-preview-section-delimiter"></div>####16.4jQuery 遍历 - 过滤<div class="se-preview-section-delimiter"></div>

first()//首个元素
last()//最后一个元素
eq()//带有指定索引号的元素,首个元素的索引号是 0 而不是 1
filter()//允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()//方法返回不匹配标准的所有元素
实例
(document).ready(function(){(document).ready(function(){ (“div p”).first();//选取首个

元素内部的第一个

元素
$(“div p”).last();//选择最后一个

元素中的最后一个

元素
$(“p”).eq(1);//选取第二个

元素（索引号 1）
$(“p”).filter(“.intro”);//返回带有类名 “intro” 的所有

元素
$(“p”).not(“.intro”);//返回不带有类名 “intro” 的所有

元素
});

<div class="se-preview-section-delimiter"></div>###17.jQuery - AJAX <div class="se-preview-section-delimiter"></div>####17.1jQuery - AJAX load() 方法<div class="se-preview-section-delimiter"></div>

语法
$(selector).load(URL,data,callback);//load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
//1. 必需的 URL 参数规定您希望加载的 URL。
//2. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
//3. 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
实例
“demo_test.txt”的内容:

jQuery and AJAX is FUN!!!

This is some text in a paragraph.

$(“#div1”).load(“demo_test.txt”);//到指定的

元素中
$(“#div1”).load(“demo_test.txt #p1”);//把 “demo_test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的

元素中

(“button”).click(function(){(“button”).click(function(){ (“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“外部内容加载成功！”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});

<div class="se-preview-section-delimiter"></div>####17.2jQuery - AJAX get() 和 post() 方法<div class="se-preview-section-delimiter"></div>

GET - 从指定的资源请求数据
.get(URL,callback);POST−向指定的资源提交要处理的数据.get(URL,callback); POST - 向指定的资源提交要处理的数据 .post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
实例
(“button”).click(function()$.get(“demotest.asp”,function(data,status)alert(“Data:”+data+“\nStatus:”+status);););(“button”).click(function(){ $.get(“demo_test.asp”,function(data,status){ alert(“Data: ” + data + “\nStatus: ” + status); }); }); (“button”).click(function(){
$.post(“demo_test_post.asp”,
{
name:”Donald Duck”,
city:”Duckburg”
},
function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});
“`