1．jQuery语法
1.1 基础语法：$(selector).action( )
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() - 隐藏当前元素
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$(“ul li:first”) - 每个<ul>的第一个<li>元素
$(“div#intro .head”) - id=”intro”的<div>元素中所有class=”head”的元素
1.2 文档就绪函数
$(document).ready(function(){
--- jQuery function go here ---
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
-
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
2．jQuery选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
2.1 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p.intro") 、$("p#demo") 选取所有 class="intro" 或id="demo"的 <p> 元素。
2.2 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href='#']")或$("[href!='#']") 选取所有带有 href 值等于（或不等于） "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2.3 css选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
例：$("p").css("background-color","red");
3．jQuery效果
3.1 影藏/显示：hide/show
语法：$(selector).hide(speed,callback); 影藏
$(selector).show(speed,callback); 显示
$(selector).toggle(speed,callback); 切换（显示被隐藏的元素，并隐藏已显示的元素）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是hide()或show()或toggle()完成后所执行的函数名称。
3.2 淡入/淡出：fade
fadeIn().............淡入已隐藏的元素
fadeOut()...........淡出可见元素
fadeToggle().......在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo().............允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法：$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长
$(selector).fadeTo(speed,opacity,callback);
必需的speed 参数规定效果的时长,
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
实例：
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.7);
});
3.3 滑动：slide
slideDown().............向下滑动元素
slideUp().................向上滑动元素
slideToggle()............在 slideDown() 与 slideUp() 方法之间进行切换。
3.4 动画：animate( )
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
实例：
$("button").click(function(){
$("div").animate({left:'250px'});
});
............................................................................................................................
<button>开始动画</button>
<div style="background:#98bf21;height:100px;100px;position:absolute;"></div>
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
① 操作多个属性
$("div").animate({
left:'250px',
opacity:'0.5',
'150px'
});
提示：animate() 方法几乎可以操作所有CSS属性，但必须使用Camel标记法书写所有额属性名，比如，必须使用paddingLef而不是padding-left。
并且，色彩动画不包含在核心jQuery库中，如果需要生成颜色动画，需要从jQuery.com下载Color Animations插件。
② 使用相对值
该值相对于元素的当前值，需要在值的前面加上 +=或 -=
$("div").animate({
left: '250px',
height: '+=150px',
'+=150px'
});
③ 使用预定义的值
可以把属性的动画值设置为”show”、”hide”或”toggle”
$("div").animate({
height: 'toggle'
});
这里的效果相当于：$("div").slideToggle();
④ 使用队列功能
默认的，jQuery提供针对动画的队列功能。这意味着若果在彼此之后编写了多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
上面的例子把 <div> 元素移动到右边，然后增加文本的字号。
3.5 停止动画：stop( )
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法：$(selector).stop(stopAll, goToEnd);
stopAll：可选，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
goToEnd：可选，规定是否立即完成当前动画。默认是 false。
因此，默认地，stop()会清除在被选元素上指定的当前动画。
3. 6 链接：Chaining( )
Chaining( )允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
例：$("#p1").css("color","red").slidUp(2000).slideDown(2000);
"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动
提示：1、这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，只需简单地把该动作追加到之前的动作上。
2、当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。
4．jQuery HTML
4.1 获取内容和属性
提示：DOM = Document Object Model（文档对象模型）
⑴ 获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
-
-
- text() 设置或返回所选元素的文本内容
- html() 设置或返回所选元素的内容（包括 HTML 标记）
- val() 设置或返回表单字段的值
-
实例1：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
............................................................................................................................
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
实例2：
$("button").click(function(){
alert("Value: " + $("#test").val());
});
............................................................................................................................
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
⑵ 获取属性 - attr()
实例3：
$("button").click(function(){
alert($(“#w3s”).attr(“href”));
});
............................................................................................................................
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
4.2 设置内容和属性
⑴ 设置内容 - text()、html() 以及 val()
实例1：
$("#btn1").click(function(){ $("#test1").text("Hello world!"); });
text()、html() 以及 val() 的回调函数：
上面的三个 jQuery 方法同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例2：
$("#btn1").click(function(){
$("#test1").text(function( i , origText ){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function( i , origText ){
return "Old html:" + origText + " New html: Hello <b>world!</b> (index:" + i + ")";
});
});
............................................................................................................................
<p id="test1">这是<b>粗体</b>文本1。</p>
<p id="test2">这是<b>粗体</b>文本2。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
⑵ 设置属性 - attr()
实例3：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery/",
"title" : "W3School jQuery 教程"
});
});
attr()的回调函数：
attr()也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例4：
$("button").click(function(){
$("#w3s").attr("title", function( i , origValue ){
return i + "/" + origValue;
});
});
4.3 添加元素
添加新的HTML内容：
append()--------在被选元素的结尾插入内容
prepend()-------在被选元素的开头插入内容
after()-----------在被选元素之后插入内容
before()---------在被选元素之前插入内容
实例1：
function appendText() {
var txt1="<p>HTML.</p>"; // 以HTML创建新元素
var txt2=$("<p></p>").html("<b>jQuery.</b>"); //以jQuery创建新元素
var txt3=document.createElement("i");
txt3.innerHTML="DOM."; // 通过 DOM 来创建斜体文本
① $("body").append(txt1,txt2,txt3); // 追加新元素
② $("button").after(txt1,txt2,txt3); // 追加新元素
③ $("button").append(txt1,txt2,txt3); // 追加新元素
}
............................................................................................................................
<p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>
结果：
①等效于②，都是在<button></button>后追加新元素（在</body>前）；
③是在<button>后追加新元素（<在/button>前）。
4.4 删除元素
一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
注：remove() 方法也可接受一个参数，对被删元素进行过滤。
例：$(“p”).remove(.italic); // 删除 class="italic" 的所有 <p> 元素
4.5 CSS类
jQuery操作CSS：
addClass()---------向被选元素添加一个或多个类
removeClass()-----从被选元素删除一个或多个类
toggleClass()------对被选元素进行添加/删除类的切换动作
css()---------------设置或返回一个或多个样式属性
样式:
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
...................................................................................................................................
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<div>这是非常重要的文本！</div>
<button>向元素添加类</button>
...................................................................................................................................
(1) addClass( )方法:
例 4.5.1：
$("button").click(function(){
$("h1, h2, p").addClass("blue");------------------// 向不同的元素添加 class 类
$("div").addClass("important blue");-----------// 给同一元素添加多个class 类
});
(2) removeClass( )方法：
例 4.5.2：
$("h1, h2, p").removeClass("blue");------------------// 从不同的元素删除 class 类
(3) toggleClass( )方法：
例 4.5.3：
$("h1, h2, p").removeClass("blue");----------// 对被选元素进行添加/删除类的切换操作
(4) css( )方法：
1. 返回css属性：css(“propertyname”);
2. 设置css属性：css(“propertyname”, “value”);
3. 设置多个css属性：css({“propertyname”:“value”, “propertyname”:“value”,...});
例 4.5.4：
$("p").css("background-color");-----------// 返回匹配元素的background-color值
$("p").css("background-color", “pink”);---// 为所有匹配元素设置background-color
$("p").css({"background-color":“pink”, “font-size”:”200%”});----//设置多个属性
注： 当要返回background-color时，若果匹配的P元素不止一个，此时返回的是第一个p的背景色。
.........................................................................................................................................
<p style="这是一个段落。</p>
<p style="这是一个段落。</p>
<p style="这是一个段落。</p>
<button>返回 p 元素的背景色</button>
此时：
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
结果：返回第一个p的背景色
4.6 尺寸
jQuery 提供多个处理尺寸的重要方法：
-
- width()---------------设置或返回元素的宽度（不包括内边距、边框或外边距）
- height()--------------设置或返回元素的高度（不包括内边距、边框或外边距）
- innerWidth()---------返回元素的宽度（包括内边距）
- innerHeight()--------返回元素的高度（包括内边距）
- outerWidth()---------返回元素的宽度（包括内边距和边框）
- outerHeight()--------返回元素的高度（包括内边距和边框）
- outerWidth(true)----返回元素的宽度（包括内边距、边框和外边距）
- outerHeight(true)---返回元素的高度（包括内边距、边框和外边距）
实例1：
<div id="div1" style="height: 100px; 300px;
padding: 10px; margin: 3px; border: 1px solid blue;
font-size: 10.5000pt;" style="line-height: 1.571428em; font-family: 宋体; font-size: 10.5pt;"> lightblue;">
</div>
<button>显示div的尺寸</button>
...................................................................................................................................
结果： W：300 H：100 width() 与 height()
iW：320 iH：120 innerWidth()： width + padding
oW：322 oH：122 outerWidth()： width + padding + border
oW(true)：328 oH(true)：128 outerWidth(true)：width + padding + border + margin
...................................................................................................................................
实例2：
返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + " ";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
实例3：
设置指定元素的宽度和高度: $(“#div1”).width(500).height(500);