jQuery教程
- 向页面添加jQuery库
jQuery库在I:/project/html/first1中
- jQuery语法
$(selector).action();
美元符号定义jQuery
选择符用于查询和查找HTML元素
action（）执行操作
实例
$(this).hide()-隐藏当前元素
$("P").hide()-隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
- 文档就绪函数
$(document).ready(function(){
---jQuery functions go here---
})
所有的jQuery函数都位于这个函数中，防止文档在完全加载（就绪）之前运行 jQuery 代码。
- jQuery 选择器
a.jQuery 元素选择器
$("p")选择
元素
$("p.intro")选取所有 class="intro" 的元素
$("p#demo")选取所有 id="demo" 的元素
b. jQuery CSS选择器
$("p").css("background-color","red")
c. 更多选择器实例
$(this) 当前 HTML 元素
$("p") 所有元素
$("p.intro") 所有 class="intro" 的元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个<\ul>的第一个<\li>元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的元素中的所有 class="head" 的元素
- jQuery 事件
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件(?)
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 效果
1.隐藏/显示
hide()和shou()$(selector).hide/show(speed,callback);speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" （带引号）或毫秒
callback 参数是隐藏或显示完成后所执行的函数名称。
toggle()$("button").click(function(){ $("p").toggle(); });用于切换
hide()和show()，也有speed和callback两个参数。2.淡入淡出
fadeIn()从无到有fadeOut()从有到无fadeToggle()有-无-有fadeTo()淡出至原图的0-1倍
以上均接受speed和callback参数，除此之外在两个参数中间fadeTo还有个opacity参数（透明度）。3.滑动
slideDown()向下滑动显示slideUp()向上滑动消失slideToggle()先向下显示再向上消失4.动画 animate()
默认情况下，所有 HTML 元素的位置都是静态的并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
- 方法
$(selector).animate({params},speed,callback);
$("button").click(function(){ $("div").animate({left:'250px'}); });必需的params参数定义形成动画的CSS属性。
- 操作多个属性
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
- 使用相对值
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
- 使用预定义的值
$("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()
用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。6. callback
Callback 函数在当前动画 100% 完成之后执行。
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });7.chaining
允许在相同的元素上运行多条 jQuery 命令，一条接着另一条。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);折进缩行不影响执行。
jQuery HTML
1.获取
- 获取内容
text()- 设置或返回所选元素的文本内容html()- 设置或返回所选元素的内容（包括 HTML 标记）val()- 设置或返回表单字段的值$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); ...
- 获取属性 -
attr()$("button").click(function(){ alert($("#w3s").attr("href")); });2.设置
设置内容
.text("")
.html("")
.val("")
text()、html()以及val()的回调函数
a. 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
b. 以函数新值返回希望使用的字符串$("#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 world! (index: " + i + ")"; }); });
- 设置属性 -
attr()$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });允许同时设置多个属性
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" }); });
attr()的回调函数
a. 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
b. 以函数新值返回希望使用的字符串3.添加
append()- 在被选元素的结尾插入内容prepend()- 在被选元素的开头插入内容after()- 在被选元素之后插入内容before()- 在被选元素之前插入内容4.删除
remove()- 被选元素及其子元素
remove()方法也可接受一个参数，允许对被删元素进行过滤empty()- 删除被选元素的子元素5.CSS类
addClass()- 添加 class 属性
向不同的元素添加 class 属性$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });规定多个类
$("button").click(function(){ $("#div1").addClass("important blue"); });
removeClass()- 删除指定的 class 属性toggleClass()- 对被选元素进行添加/删除类的切换操作6.css()
- 返回 CSS 属性
css("propertyname");
- 设置 CSS 属性
css("propertyname","value");
- 设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});
7.尺寸
width()-设置或返回元素的宽度（不包括内边距、边框或外边距）
height()- 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()- 返回元素的宽度（包括内边距）。
innerHeight()- 返回元素的高度（包括内边距）
outerWidth()- 返回元素的宽度（包括内边距和边框）
outerHeight()- 返回元素的高度（包括内边距和边框）
outerWidth(true)- 返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true)- 返回元素的高度（包括内边距、边框和外边距）
jQuery 遍历
1.祖先
parent()- 返回被选元素的直接父元素parents()- 返回被选元素的所有祖先元素
可以使用可选参数来过滤对祖先元素的搜索parentsUntil()- 返回介于两个给定元素之间的所有祖先元素（两端均不包括）2.后代
children()- 返回被选元素的所有直接子元素
使用可选参数来过滤对子元素的搜索find()- 返回被选元素的后代元素，一路向下直到最后一个后代3.同胞
siblings()- 返回被选元素的所有同胞元素
可以使用可选参数来过滤对同胞元素的搜索next()- 返回被选元素的下一个同胞元素nextAll()- 返回被选元素的所有跟随的同胞元素nextUntil()- 返回介于两个给定参数之间的所有跟随的同胞元素(两端均不包含）4.过滤
first()- 返回被选元素的首个元素$(document).ready(function(){ $("div p").first(); });选取首个 div 元素内部的第一个 p 元素
last()- 返回被选元素的最后一个元素$(document).ready(function(){ $("div p").last(); });选择最后一个 div 元素中的最后一个 p 元素
eq()- 返回被选元素中带有指定索引号的元素$(document).ready(function(){ $("p").eq(1); });索引号从 0 开始,选取第二个 p 元素（索引号 1）
filter()- 允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回not()- 返回不匹配标准的所有元素
jQuery AJAX
AJAX教程
1.加载 load()
从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定希望加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
可选的 callback 参数是 load() 方法完成后所执行的函数名称把文件 "demo_test.txt" 的内容加载到指定的
元素中：$("#div1").load("demo_test.txt");
也可以把 jQuery 选择器添加到 URL 参数,如把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的
元素中：$("#div1").load("demo_test.txt #p1");
callback 参数规定当 load() 方法完成后所要允许的回调函数，接收三个参数
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象2.get()和post()
HTTP方法-get post对比
- $.get()
$.get(URL,callback);
必需的 URL 参数规定希望请求的 URL
可选的 callback 参数是请求成功后所执行的函数名$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });第一个参数是希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
- $.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); }); });第一个参数是希望请求的 URL ("demo_test_post.asp")。
然后连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
jQuery 杂项
noConflict()
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行！"); }); });也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，可以把它存入变量，以供稍后使用。
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 仍在运行！"); }); });
jQuery 参考手册
参考手册
选择器
事件
效果
文档操作
属性操作
CSS操作
AJAX
遍历
数据
DOM元素方法
核心
属性