jQuery

/**
* 把所有 jQuery 代码置于事件处理函数中
* 把所有事件处理函数置于文档就绪事件处理器中
* 把 jQuery 代码置于单独的 .js 文件中
* 如果存在jQuery 名称冲突，用var jq=jQuery.noConflict()，使用自己的名称（比如 jq）来代替 $ 符号。
*/

 

//ready();hide();click();这些都是jquery的事件函数
//fadeToggle(speed,callback)显示被隐藏的元素，并隐藏已显示的元素：speed:"slow"、"fast" 或毫秒。
//fadeTo(speed,opacity,callback)允许渐变为给定的不透明度
// jQuery slideToggle(speed,callback)
//animate(); 注意队列功能,依次执行

$("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");
　　div.animate({fontSize:'3em'},"slow");
});


//callback
$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});


//jQuery 方法链接
$("#p1").css("color","red")
　　.slideUp(2000)
　　.slideDown(2000);



var EBTitle = document.getElementById("EBTitle");
var EBcontent = document.getElementById("EBcontent");
$(document).ready( //$(document).ready让这个方法在所有元素加载完之后才运行
function onclick (place) { //这个地方还是要用原生，因为要代参数进去
　　switch (place){
　　　　case "HongKong":
　　　　　　EBTitle.innerHTML = HongKongA;
　　　　　　EBcontent.innerHTML = HongKongB;

　　　　　　var txt1="<b>I </b>"; // 以 HTML 创建新元素
　　　　　　var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
　　　　　　var txt3=document.createElement("big"); // 通过 DOM 创建新元素
　　　　　　txt3.innerHTML="jQuery!";
　　　　　　$("EBcontent").append(txt3);
　　　　break;
　　}
})

 

***jQuery DOM 操作

获得内容
* text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){
　　alert("Text: " + $("#test").text());
　　$("#test1").text("Hello world!");
});

 

 

* html() - 设置或返回所选元素的内容（包括 HTML 标记）

$("#btn2").click(function(){
　　alert("HTML: " + $("#test").html());
　　$("#test1").html("Hello world!");
});

 

* val() - 设置或返回表单字段的值

$("#btn1").click(function(){
　　alert("Value: " + $("#test").val());
　　$("#test1").val("Hello world!");
});

 

* attr() - 方法用于获取属性值。

$("#btn1").click(function(){
　　alert("attr: " + $("#test").attr("href",回调函数));
　　"href" : "http://www.w3school.com.cn/jquery",
　　"title" : "W3School jQuery Tutorial"
});

 

 

添加新的 HTML 内容

* append() - 在被选元素的结尾插入内容

$("p").append("Some appended text.");

 

* prepend() - 在被选元素的开头插入内容

$("p").prepend("Some prepended text.");

 

* after() - 在被选元素之后插入内容

$("img").after("Some text after");

 

* before() - 在被选元素之前插入内容

$("img").before("Some text before");

 

删除元素/内容



* remove() - 删除被选元素（及其子元素）

$("#div1").remove();

 

* empty() - 从被选元素中删除子元素

$("#div1").empty();

 

jQuery 操作 CSS

* addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
　　$("h1,h2,p").addClass("blue");
　　$("div").addClass("important");
　　$("#div1").addClass("important blue");
});

 

* removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
　　$("h1,h2,p").removeClass("blue");
});

 

* toggleClass() - 对被选元素进行添加/删除类的切换操作

$("button").click(function(){
　　$("h1,h2,p").toggleClass("blue");
});

 

* css() - 设置或返回样式属性

$("p").css("background-color"); 
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

 

jQuery 尺寸 方法
* width() - 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
* height() - 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
　　var txt="";
　　txt+="Width: " + $("#div1").width() + "</br>";
　　txt+="Height: " + $("#div1").height();
　　$("#div1").html(txt);
});

 

* innerWidth() - innerWidth() 方法返回元素的宽度（包括内边距）。
* innerHeight() - innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){
　　var txt="";
　　txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
　　txt+="Inner height: " + $("#div1").innerHeight();
　　$("#div1").html(txt);
});

 

* outerWidth() - 方法返回元素的宽度（包括内边距和边框）。
* outerHeight() - 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
　　var txt="";
　　txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
　　txt+="Outer height: " + $("#div1").outerHeight();
　　$("#div1").html(txt);
});

 

* outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
* outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

$("button").click(function(){
　　var txt="";
　　txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
　　txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
　　$("#div1").html(txt);
});

 

* 返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

$("button").click(function(){
　　var txt="";
　　txt+="Document width/height: " + $(document).width();
　　txt+="x" + $(document).height() + "\n";
　　txt+="Window width/height: " + $(window).width();
　　txt+="x" + $(window).height();
　　alert(txt);
});

 

* 设置指定的 <div> 元素的宽度和高度：

$("button").click(function(){
　　$("#div1").width(500).height(500);
});

 

向上遍历 DOM 树
* parent() - 方法返回被选元素的直接父元素。

$(document).ready(function(){
　　$("span").parent();
});

 

* parents() - 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

$(document).ready(function(){
　　$("span").parents();
});

 

$(document).ready(function(){
　　$("span").parents("ul");
});

 

* parentsUntil() - 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
　　$("span").parentsUntil("div");
});

 

向下遍历 DOM 树
* children() - 方法返回被选元素的所有直接子元素。

$(document).ready(function(){
　　$("div").children("p.1");
});

 

* find() - 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
　　$("div").find("span");
});

 

 

在 DOM 树中水平遍历
* siblings() - 方法返回被选元素的所有同胞元素。

$(document).ready(function(){
　　$("h2").siblings("p");
});

 

* next() - 方法返回被选元素的下一个同胞元素。

$(document).ready(function(){
　　$("h2").next("p");
});

 

* nextAll() - 方法返回被选元素的所有跟随的同胞元素。

$(document).ready(function(){
　　$("h2").nextAll("p");
});

 

* nextUntil() - 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
　　$("h2").nextUntil("h6");
});

 

* prev() * prevAll() * prevUntil()
方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。




缩写搜索元素的范围

* first() - 方法返回被选元素的首个元素。

$(document).ready(function(){
　　$("div p").first();
});

 

* last() - 方法返回被选元素的最后一个元素。

$(document).ready(function(){
　　$("div p").last();
});

 

* eq() - 方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
　　$("p").eq(1);
});

 

* filter() - 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
　　$("p").filter(".intro");
});

 

* not() - 方法返回不匹配标准的所有元素。

$(document).ready(function(){
　　$("p").not(".intro");
});

 

 

AJAX
jQuery load() 方法

* jQuery load() - 方法是简单但强大的 AJAX 方法。从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);

/*
必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。
*/

可以把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");



可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
* 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);
　　});
});

 

AJAX get() 和 post() 方法
两种在客户端和服务器端进行请求-响应的常用方法
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

* GET - 从指定的资源请求数据
* POST - 向指定的资源提交要处理的数据


jQuery $.get() 方法
* $.get() - 方法通过 HTTP GET 请求从服务器上请求数据。

/*
$.get(URL,callback);
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
*/
$("button").click(function(){
　　$.get("demo_test.asp",function(data,status){
　　　　alert("Data: " + data + "\nStatus: " + status);
　　});
});

/*
ASP 文件 ("demo_test.asp") 类似这样：

<%
response.write("This is some text from an external ASP file.")
%>
*/

 

jQuery $.post() 方法
* $.post() - 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

/*
必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。
*/

$("button").click(function(){
$.post("demo_test_post.asp",
{
　　name:"Donald Duck",
　　city:"Duckburg"
},
function(data,status){
　　alert("Data: " + data + "\nStatus: " + status);
});
});

/*
这个 ASP 文件 ("demo_test_post.asp") 类似这样：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
*/

 

jQuery - noConflict() 方法
* noConflict() - 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

var jq = $.noConflict();
jq(document).ready(function(){
　　　　jq("button").click(function(){
　　　　jq("p").text("jQuery 仍在运行！");
　　});
});

 

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
　　　　$("button").click(function(){
　　　　$("p").text("jQuery 仍在运行！");
　　});
});