jQuery学习笔记

1.jQuery的CDN
新浪：http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js
百度：http://libs.baidu.com/jquery/1.9.1/jquery.min.js
360： http://libs.useso.com/js/jquery/1.9.1/jquery.min.js
谷歌：http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
微软：http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js



2.加载jQuery
<script type="text/javascript" src="xxxxxxxxxx.js"></script>



3.jQuery基本语法
$(selector).action()
//美元符号定义 jQuery
//选择符（selector）“查询”和“查找” HTML 元素
//jQuery 的 action() 执行对元素的操作

例子：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素



3.文档就绪函数
所有 jQuery 函数位于一个 document ready 函数中
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
（如果在文档没有完全加载之前就运行函数，有些操作可能失败。）

$(document).ready(function(){


--- jQuery functions go here ----


});



4.jQuery选择器
分类：
元素选择器
属性选择器
CSS 选择器

例子：
$(this)            当前HTML元素

元素选择器：
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

属性选择器：
$("[href]") 选取所有带有href属性的元素
$("[href='#']") 选取所有属性href='#'的元素
$("[href!='#']")选取所有属性href!='#'的元素
$("[href$='.jpg']")选取所有href属性以‘.jpg’结尾的元素

CSS 选择器：
$("p").css("background-color","red"); 把所有p元素的背景颜色更改为红色


5.jQuery事件
jQuery事件函数：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
其他事件详细看：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

例子：
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function()
 {
$("p").hide();
 });
});
</script>

jQuery名称冲突问题：
"$"符号除了jQuery会使用以外，其他js库中（如Prototype）也会使用"$"
为了防止"$"的冲突，jQuery使用noConflict()方法来解决
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
例子：
//可以通过全名替代简写的方式来使用 jQuery
<script>
$.noConflict();
jQuery(document).ready(function(){
 jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
 });
});
</script>

//可以创建自己的简写
<script>
var jq = $.noConflict();
jq(document).ready(function(){
 jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
 });
});
</script>

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


6.jQuery的（动画）效果
1)隐藏/显示
$(selector).hide(speed,callback);   //隐藏
$(selector).show(speed,callback); //显示
$(selector).toggle(speed,callback); //切换隐藏和显示
（可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。）
（可选的 callback 参数是隐藏或显示完成后所执行的函数名称。）



例子：
//隐藏
$("#hide").click(function(){
 $("p").hide();
});

//显示
$("#show").click(function(){
 $("p").show();
});

2）淡入淡出
$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //淡出
$(selector).fadeToggle(speed,callback); //切换淡入和淡出
$(selector).fadeTo(speed,opacity,callback); //设置渐变到某一指定透明度（0-1）
（可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。）
（可选的 callback 参数是隐藏或显示完成后所执行的函数名称。）
（opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间））

3）滑动
$(selector).slideDown(speed,callback); //下滑
$(selector).slideUp(speed,callback); //上滑
$(selector).slideToggle(speed,callback); //切换下滑和上滑
（可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。）
（可选的 callback 参数是隐藏或显示完成后所执行的函数名称。）


4）动画
$(selector).animate({params},speed,callback);
（必需的 params 参数定义形成动画的 CSS 属性。）
（可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。）
（可选的 callback 参数是动画完成后所执行的函数名称。）



注意：
a.默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
b.提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，
比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery动画的几个特点：
*操作多个属性 （生成动画的过程中可同时使用多个属性）
*使用相对值 （可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=）
*使用预定义的值 （可以把属性的动画值设置为 "show"、"hide" 或 "toggle"）
*使用队列功能 （按顺序添加animate，就可以按这个顺序执行动画）

例子：
//把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
$("button").click(function(){
 $("div").animate({left:'250px'});
}); 

//把 <div> 元素移动到左边，直到 left=250px，opacity=0.5（透明度），height=150px，width=150px为止：
$("button").click(function(){
 $("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
 });
}); 


  //使用相对值
$("button").click(function(){
 $("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
 });
});


//使用预定义值（show，hide，toggle）
$("button").click(function(){
 $("div").animate({
height:'toggle'
 });
});


//按队列顺序执行动画
$("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");
});


//按队列顺序执行动画
$("button").click(function(){
 var div=$("div");
 div.animate({left:'100px'},"slow");
 div.animate({fontSize:'3em'},"slow");
});


5)停止stop()
$(selector).stop(stopAll,goToEnd);
（可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。）
（可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。）
（默认地，不带任何参数的 stop() 会清除在被选元素上指定的【当前】动画。）


6）callback函数
前面提到的各种特效括号中的"callback"函数，是在当前动画 100% 完成之后执行。
结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。




7）Chaining特性
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。


例子：
//"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);




7.jQuery的通过DOM操作来控制HTML内容
1）获取内容、属性：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr(attribute, callback) - 设置或返回属性值
例子：
$("#test").text()  //获取id=test的元素中的文本内容

2）设置内容、属性：
text(),html(),val(),attr()的括号用填入你想要改变成的内容"xxx"即可
例子：
$("#test1").text("Hello world!");    //把id=test1的元素中的文本内容改成 Hello world!
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");  //改变（设置）链接中 href 属性的值
//attr() 方法也允许您同时设置多个属性
$("#w3s").attr({  
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});

3）回调函数
text()、html() 以及 val()，同样拥有回调函数。
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。

例子：
$("#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 + ")";
 });
});


attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。


例子：
$("button").click(function(){
 $("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
 });
});


4）添加
jQuery可以向HTML中添加一下内容
append() - 在被选元素中的结尾插入内容
prepend() - 在被选元素中的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

实例：
$("p").append("Some appended text."); //在p元素中的结尾插入括号中的内容
$("p").prepend("Some prepended text.");

//append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
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);         // 追加新元素
}

$("img").after("Some text after"); //在img元素之后插入内容
$("img").before("<b>Some text before</b>"); //在img元素之前插入内容

//after()和before() 方法也能够插入若干个新元素
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}


5)删除
remove() - 删除被选元素（以及子元素） -"全家死"
empty() - 从被选元素中删除子元素  -"孩子死"
（remove中可以带参数，用来过滤出要删除的元素）

实例：
$("#div1").remove(); //删除id=div1的元素以及它的子元素
$("#div1").empty(); //删除id=div1的元素的子元素
$("p").remove(".italic"); //删除含有class="italic"的<p>元素



8.jQuery控制CSS内容
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例：
$("div").addClass("important"); //向一个元素添加class属性
$("h1,h2,p").addClass("blue"); //向多个元素添加class属性
$("#div1").addClass("important blue"); //向一个元素添加多个属性
$("h1,h2,p").removeClass("blue"); //向不同元素删除它们指定的class属性
$("h1,h2,p").toggleClass("blue"); //切换添加/删除Class操作

$("p").css("background-color"); //返回background-color属性的值
$("p").css("background-color", "yellow"); //修改background-color属性的值为yellow
$("p").css({"background-color":"yellow","font-size":"200%"}); //修改多个属性的值



9.jQuery控制元素和浏览器窗口的尺寸
width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() - 返回元素的宽度（包括内边距）
innerHeight() - 返回元素的高度（包括内边距）
outerWidth() - 返回元素的宽度（包括内边距和边框）
outerHeight() - 返回元素的高度（包括内边距和边框）

实例：
$("#div1").width(); //返回id=div1的元素的宽度
$("#div1").innerWidth(); //返回id=div1的元素的宽度（包括padding）
$("#div1").outerWidth(); //返回id=div1的元素的宽度（包括padding和margin和border）
$(document).width(); //返回HTML文档的宽度
$(window).width(); //返回浏览器窗口的宽度
$("#div1").width(500).height(500); //设置div元素的宽度和高度


10.jQuery遍历DOM元素
parent() - 返回被选元素的直接父元素
parents() - 返回被选元素的所有祖先元素，一路向上直到根元素(<html>)
parentsUntil() - 返回介于被选元素和指定元素之间的所有祖先元素
children() - 返回被选元素的的所有直接子元素
find() - 返回被选元素的后代元素，一路向下直到最后一个后代
siblings() - 返回被选元素的所有同胞元素
next() - 返回被选元素的下一个同胞元素
nextAll() - 返回被选元素的所有跟随的同胞元素
nextUntil() - 返回介于被选元素和指定元素之间的所有同胞元素
prev()
prevAll()
prevUntil()

first() - 返回被选元素集合中的首个元素
last() - 返回被选元素集合中的最后一个元素
eq(索引号) - 返回被选元素集合中的指定索引号的元素（与数组类似，索引号从0开始）
filter("匹配标准") - 返回被选元素集合中符合匹配标准的元素
not("匹配标准") - 返回被选元素集合中不符合匹配标准的元素（与楼上相反）



实例：
$("span").parent(); //返回每个span元素的直接父元素
$("span").parents(); //返回每个span元素的所有祖先
$("span").parents("ul"); //返回每个span元素的所有祖先，并且是这些祖先要是ul元素
$("span").parentsUntil("div"); //返回span元素和div元素之间的所有祖先元素

$("div").children(); //返回div元素的所有直接子元素
$("div").children("p.1"); //返回div元素的直接子元素，并且返回的这些直接子元素要是class=1的p元素
$("div").find("*"); //返回div元素的所有后代
$("div").find("span"); //返回div元素后代的所有span元素

$("h2").siblings(); //返回h2元素的所有同胞元素
$("h2").siblings("p"); //返回h2元素的同胞元素中的所有p元素
$("h2").next(); //返回h2元素的下一个同胞元素
$("h2").nextAll(); //返回h2元素的所有跟随的同胞元素
$("h2").nextUntil("h6");//返回h2元素和h6元素之间的所有同胞元素（不包括h2和h6本身）

$("div p").first(); //返回<div>元素内部的第一个<p>元素
$("div p").last(); //返回<div>元素内部的最后一个<p>元素
$("p").eq(1); //返回所有<p>元素中的第2个<p>元素
$("p").filter(".intro");//返回所有带有类名为 "intro" 的 <p> 元素
$("p").not(".intro"); //返回所有不带有类名为 "intro" 的 <p> 元素


11.jQuery的AJAX
1）load()方法：
$(selector).load(URL,data,callback); //load方法：从服务器加载数据，并把返回的数据放入被选元素中
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

实例：
$("#div1").load("demo_test.txt"); //把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1"); //把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中

callback函数的参数：
可以是：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
实例：
$("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);
 });
});


2）get()和post()方法
HTTP请求：
GET - 从指定的资源请求数据 (查看)
POST - 向指定的资源提交要处理的数据 (修改)
更多对比：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

语法：
$.get(URL,callback); //通过 HTTP GET 请求从服务器上请求数据
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$.post(URL,data,callback); //通过 HTTP POST 请求从服务器上请求数据
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。



实例：
//使用 $.get() 方法从服务器上的一个文件中取回数据
$("button").click(function(){
 $.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
 });
});
（$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。）


//使用 $.post() 连同请求一起发送数据
$("button").click(function(){
 $.post("demo_test_post.asp",
 {
name:"Donald Duck",
city:"Duckburg"
 },
 function(data,status){
alert("Data: " + data + "\nStatus: " + status);
 });
});
（$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。）