jQuery前言
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
1 向页面添加jQuery库：
<script type="text/javascript" src="jQuery.js"></script>
2 jQuery语法：
基础语法是：
$(selector).action()
文档就绪函数：
$(document).ready(function(){
--- jQuery functions go here ----
});一 jQuery选择器
1.1 元素选择器：
| | 方法 | 作用 |
|---|
$("p") | 选取 <p> 元素。 |
$("p.intro") | 选取所有 class="intro" 的 <p> 元素。 |
$("p#demo") | 选取所有 id="demo" 的 <p> 元素。 |
1.2 属性选择器：
| | 方法 | 作用 |
|---|
$("[href]") | 选取所有带有 href 属性的元素。 |
$("[href='#']") | 选取所有带有 href 值等于 “# ” 的元素。 |
$("[href!='#']") | 选取所有带有 href 值不等于 “# ” 的元素。 |
$("[href$='.jpg']") | 选取所有 href 值以 “.jpg ” 结尾的元素。 |
1.3 CSS选择器:
| | 方法 | 作用 |
|---|
$("p").css("background-color","red"); | 把所有 p 元素的背景颜色更改为红色 |
1.4 更多选择器
| | 方法 | 作用 |
|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 “.jpg ” 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
二 jQuery事件函数
| | 方法 | 作用 |
|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
例子：<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>三 jQuery效果
语法：
$(selector).anction(speed,callback);
3.1 jQuery隐藏和显示
| | 方法 | 作用 |
|---|
hide() | 隐藏 |
show() | 显示 |
toggle() | 隐藏和显示切换 |
（其中这三个函数可带速度和回调函数参数）
3.2 jQuery淡入淡出(入：进入浏览器，出：出去流览器)
| | 方法 | 作用 |
|---|
fadeIn() | 淡入 |
fadeOut() | 淡出 |
fadeToggle() | 淡入淡出切换 |
fadeTo() | 淡的透明度to(0-1) |
3.3 jQuery 滑动效果
| | 方法 | 作用 |
|---|
slideDown() | 向下滑动 |
slideUp() | 向上滑动 |
slideToggle() | 向上向下滑动切换 |
四 jQuery 动画
语法：
$(selector).animate({params},speed,callback);例子
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});jQuery stop()
方法用于在动画或效果完成前对它们进行停止
$(selector).stop(stopAll,goToEnd);
Callback
函数在当前动画 100% 完成之后执行
语法:
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});Chaining
允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);五 获得HTML内容和属性
| | 方法 | 作用 |
|---|
text() | 设置或返回所选元素的文本内容（不包括 HTML 标记） |
html() | 设置或返回所选元素的内容（包括 HTML 标记） |
val() | 设置或返回表单字段的值 |
attr() | 方法用于获取属性值。 |
例子$("#test").text();
$("#test").html();
$("#test").val();
$("#w3s").attr("href");
//设置Html内容和属性
$("#test").text("hello");
$("#test").html("<h1>hello</h1>") ;
$("#test").val(hello");
$("#w3s").attr("href","http://www.baidu.com")
//通过回调函数
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});六 添加新的 HTML 内容
| | 方法 | 作用 |
|---|
append() | 在被选元素的结尾插入内容 |
prepend() | 在被选元素的开头插入内容 |
after() | 在被选元素之后插入内容 |
before() | 在被选元素之前插入内容 |
`$("p").prepend("Some prepended text.");七 删除已有的 HTML 元素
| | 方法 | 作用 |
|---|
remove() | 删除被选元素（及其子元素） |
empty() | 从被选元素中删除子元素 |
八 操作CSS
| | 方法 | 作用 |
|---|
addClass() | 向被选元素添加一个或多个类 |
removeClass() | 从被选元素删除一个或多个类 |
toggleClass() | 对被选元素进行添加/删除类的切换操作 |
css() | 设置或返回样式属性 |
$("p").css("background-color") | 返回css属性值 |
$("p").css("background-color","yellow") | 设置css属性 |
$("p").css({"background-color":"yellow","font-size":"200%"}) | 设置多个css |
九 尺寸方法
| | 方法 | 作用 |
|---|
width() | 方法设置或返回元素的宽度（不包括内边距、边框或外边距） |
height() | 方法设置或返回元素的高度（不包括内边距、边框或外边距） |
innerWidth() | 方法返回元素的宽度（包括内边距） |
innerHeight() | 方法返回元素的高度（包括内边距） |
outerWidth() | 方法返回元素的宽度（包括内边距和边框） |
outerHeight() | 方法返回元素的高度（包括内边距和边框） |
$(document).height() | 返回文档（HTML 文档）的宽度和高度 |
$(window).height() | 返回窗口（浏览器视口）的宽度和高度 |
十 jQuery遍历
| | 方法 | 作用 | 例子 |
|---|
parent() | 方法返回被选元素的直接父元素 | $("span").parent() |
parents() | 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html> ) | |
children() | 方法返回被选元素的所有直接子元素 | |
find() | 方法返回被选元素的后代元素的指定元素 | $("div").find("span") $("div").find("*") 表示div 后的所有元素 |
siblings() | 方法返回被选元素的所有同胞元素 | $("h2").siblings() h1 h2 h3 都会被找到next() 方法返回被选元素的下一个同胞元素 |
first() | 方法返回被选元素的首个元素 | |
last() | 方法返回被选元素的最后一个元素 | |
eq() | 方法返回被选元素中带有指定索引号的元素 | $("p").eq(1) |
filter() not() | 方法返回匹配标准的所有元素 | $("p").filter(".intro") |
not() | 方法返回不匹配标准的所有元素。 | |
十一 Ajax
11.1 load()
方法从服务器加载数据，并把返回的数据放入被选元素中
语法：
$(selector).load(URL,data,callback)
例子
$("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);
});
});11.2 $.get()
方法通过 HTTP GET 请求从服务器上请求数据
语法:
$.get(URL,callback)
例子
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});11.3 $.post(URL,data,callback)
方法通过 HTTP POST 请求从服务器上请求数据并发送数据。
语法:
$.post(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文件
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>转载自
jQuery总结
