1.选择器实例
语法 | 描述 |
---|---|
$(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" 的元素 |
2.jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
3.隐藏和显示
① $(selector).hide(speed,callback); ② $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
$("button").click(function(){
$("p").hide(1000);
});
③$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
4. 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn() 用于淡入已隐藏的元素
- fadeOut() 方法用于淡出可见元素
- fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果
- fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
5.滑动
jQuery 拥有以下滑动方法:
- slideDown() 方法用于向下滑动元素
- slideUp() 方法用于向上滑动元素
- slideToggle() jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们
实例
$("#flip").click(function(){ $("#panel").slideToggle(); });
6.动画
jQuery animate() 方法用于创建自定义动画。
实例1
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
实例2
隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:
$("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"); });
7.停止
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
实例:
$("#stop").click(function(){
$("#panel").stop();
});
8.回调 jQuery Callback 函数
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
实例:
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
9.Chaining
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
实例:
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
10.获得内容和属性
三个简单实用的用于 DOM 操作的 jQuery 方法:
内容:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
属性:
- attr() 方法用于获取属性值
11:添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
实例:
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); // 追加新元素
}
12. 删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
实例:
$("#div1").remove();
$("#div1").empty();
下面的例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
13. 获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
下面的例子将返回首个匹配元素的 background-color 值:
$("p").css("background-color");
下面的例子将为所有匹配元素设置 background-color 和 font-size:
$("p").css({"background-color":"yellow","font-size":"200%"});
14.尺寸
jQuery 提供多个处理尺寸的重要方法:
- width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
- height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
- innerWidth() 方法返回元素的宽度(包括内边距)
- innerHeight() 方法返回元素的高度(包括内边距)
- outerWidth() 方法返回元素的宽度(包括内边距和边框)
- outerHeight() 方法返回元素的高度(包括内边距和边框)
实例:
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
显示文档和窗口的尺寸
$(document).ready(function(){
$("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);
});
});
15 遍历
①祖先
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent() 方法返回被选元素的直接父元素。
- parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
实例:
$("span").parent().css({"color":"red","border":"2px solid red"});
$("span").parents().css({"color":"red","border":"2px solid red"});
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
②子孙
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children() 方法返回被选元素的所有直接子元素。
- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
实例 :
$("div").children().css({"color":"red","border":"2px solid red"});
$("div").find("span").css({"color":"red","border":"2px solid red"});
③同胞
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings() 方法返回被选元素的所有同胞元素
- next() 方法返回被选元素的下一个同胞元素
- nextAll() 方法返回被选元素的所有跟随的同胞元素
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() 工作方式与上面的方法类似,只不过方向相反
- prevAll()
- prevUntil()
实例:
$("h2").siblings().css({"color":"red","border":"2px solid red"});
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
④过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素。 索引号从 0 开始,因此首个元素的索引号是 0 而不是 1
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not() 方法返回不匹配标准的所有元素。
实例:
$("p").eq(1);
$("div p").first().css("background-color","yellow");
$("p").filter(".intro").css("background-color","yellow"); //class='intro'
16. ajax
① load() 方法从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:
实例:
$("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);
});
});
②$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
实例:http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_get
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
③$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
实例
$("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });
17 jQuery noConflict() 方法
其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制
实例1:
您仍然可以通过全名替代简写的方式来使用 jQuery
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});
实例2:
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
});
实例3:
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});
参考文献:http://www.w3school.com.cn/jquery/jquery_selectors.asp
好好学习哟!