jquery1.4教程三——新增方法教程

鸭子不懂爱

鸭子不懂爱

2016-02-19 13:48

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享jquery1.4教程三——新增方法教程教程,希望对大家能有一点小小的帮助。

.clearQueue():移除队列中还没有运行的所有函数

clearQueue()的作用与stop(true)很类似,简化了stop(true),在1.4后stop()主要用于终止动画,而终止队列函数使用clearQueue(),clearQueue()接受一个参数:队列名称,即移除特定队列。

来看demo:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

源代码如下:

代码如下:
input name="" id="start" type="button" value="开始运行动画" /
input name="" id="stop" type="button" value="终止动画" /
div/div
$(function(){
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
$("div").stop();
});
})

留意stop的监听函数中的
$(div).clearQueue();
$(div).stop();
大家可以看看将 这二句其中一句注释掉后,看下效果,体会下clearQueue与stop的区别。
.contains():检查一个DOM元素是否包含另外一个DOM元素
留意contains接受二个参数是DOM元素,如下形式:
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
.delay():设置一个定时器,用于延迟队列中函数的运行
接受二个参数:
第一个参数:用于定时器的持续时间
第二个参数:对列名(可选)

来看demo:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

源代码如下:

代码如下:
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titledelay()/title
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"/script
style
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
/style
/head
body
pbutton运行/button/p
div class="first"/div
div class="second"/div
script
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
/script
/body
/html

留意第一个绿色的层,在隐藏后,延迟了800毫秒才又触发fadeIn显示。
.detach():用于删除对象,同时保留删除对象数据。
detach这个方法非常有用,作用近似于.remove(),但比remove来的强大。detach在删除的同时,会返回被删除对象。

来看demo:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

源代码如下:
代码如下:
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titledetach()/title
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"/script
stylep { background:yellow; margin:6px 0; } p.off { background: black; }/style
/head
body
button添加/删除段落/button
p这是一个用于测试的段落/p
script
var p;
$("button").click(function(){
if (p) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});
/script
/body
/html

留意p = $(p).detach();。删除了$(p)。但将$(p)写入了p 这个变量。
所有教程结束了,将把所有demo压缩下放出。

.has() : 测试一个jquery对象是否包含指定的Dom或选择器的对象。
这个方法非常有用。接受一个参数:选择器或DOM,你可以对只存在指定子节点的jquery对象进行操作。

来看demo:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

源代码如下:
ul
li测试1/li
li测试2
ul
li测试2.1/li
li测试2.1/li
/ul
/li
li测试3/li
li测试4/li
/ul
$('li').has('ul').css('background-color', 'red');
示例中只有嵌套ul的li才加上红色背景。
jQuery.isEmptyObject() :测试一个对象是否为空
比如:
jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false
jQuery.isPlainObject() :测试变量类型是否为Object
比如:
jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false
.nextUntil([selector]):选取jquery对象接下来的同级所有与选择器匹配的对象。
这个方法很有用。jquery的查找方法next()很常用,但next()只选取接下来的一个对象,无法选取多个。而如果使用siblings()又不方便,1.4新加的nextUntil()就是用于解决这个问题。同时这个方法有个神奇的地方,即找到跟jquery对象选择器一样时候会会终止选取。有些拗口,看下面示例

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

来看示例:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

源代码如下:
dl
dtdt1/dt
dddd1/dd
dddd2/dd
dddd3/dd
dddd4/dd
dt id="term-2"dt2/dt
dddd1/dd
dddd2/dd
dddd3/dd
dtdt3/dt
dddd1/dd
dddd2/dd
/dl
$('#term-2').nextUntil('dt').css('background-color', 'red');
可以看到,只选中了$(‘#term-2′)以下的dd,但是遇到下个 dtdt3/dt时就终止选取了!
既然有nextUntil当然就有prevUntil,作用相反,这里就不再做演示。
jQuery.noop() :返回一个空函数
这个方法对制作插件有些用处。
.parentsUntil( [ selector ] )
这个方法,我不知道如何才能表述的易于理解。还是看官方英文说明:http://api.jquery.com/parentsUntil/

展开更多 50%)
分享

猜你喜欢

jquery1.4教程三——新增方法教程

Web开发
jquery1.4教程三——新增方法教程

jquery1.4教程二——ajax方法的改进

Web开发
jquery1.4教程二——ajax方法的改进

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery1.4教程——便利的设置函数

Web开发
jquery1.4教程——便利的设置函数

jquery1.4后 jqDrag 拖动 不可用

Web开发
jquery1.4后 jqDrag 拖动 不可用

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery团队发布jquery 1.4

Web开发
jquery团队发布jquery 1.4

JQuery 1.4 中的Ajax问题

Web开发
JQuery 1.4 中的Ajax问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jquery1.4教程——便利的设置函数

jquery1.4教程——便利的设置函数

电脑连接功放音箱全接触

电脑连接功放音箱全接触
下拉加载更多内容 ↓