jquery1.4 教程三 新增方法教程
.clearQueue()：移除队列中还没有运行的所有函数
clearQueue()的作用与stop(true)很类似，简化了stop(true)，在1.4后stop()主要用于终止动画，而终止队列函数使用clearQueue()，clearQueue()接受一个参数：队列名称，即移除特定队列。
来看demo：
clearQueue()
$(function(){
})
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:50px;
background:green; display:none; }
div.newcolor { background:blue; }
$("#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();
});
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
<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：
delay()
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
运行
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay()</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>
<p><button>运行</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：
detach()
p { background:yellow; margin:6px 0; } p.off { background: black; }
添加/删除段落
这是一个用于测试的段落
var p;
$("button").click(function(){
if (p) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>detach()</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>p { 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：
has()
- 测试1
- 测试2
- 测试2.1
- 测试2.1
- 测试3
- 测试4
$('li').has('ul').css('background-color', 'red');
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
源代码如下：
<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对象选择器一样时候会会终止选取。有些拗口，看下面示例
来看示例：
nextUntil()
- dt1
- dd1
- dd2
- dd3
- dd4
- dt2
- dd1
- dd2
- dd3
- dt3
- dd1
- dd2
$('#term-2').nextUntil('dt').css('background-color', 'red');
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
源代码如下：
<dl>
<dt>dt1</dt>
<dd>dd1</dd>
<dd>dd2</dd>
<dd>dd3</dd>
<dd>dd4</dd>
<dt id="term-2">dt2</dt>
<dd>dd1</dd>
<dd>dd2</dd>
<dd>dd3</dd>
<dt>dt3</dt>
<dd>dd1</dd>
<dd>dd2</dd>
</dl>
$('#term-2').nextUntil('dt').css('background-color', 'red');
可以看到，只选中了$(‘#term-2′)以下的dd，但是遇到下个 <dt>dt3</dt>时就终止选取了！
既然有nextUntil当然就有prevUntil，作用相反，这里就不再做演示。
jQuery.noop() ：返回一个空函数
这个方法对制作插件有些用处。
.parentsUntil( [ selector ] )
这个方法，我不知道如何才能表述的易于理解。还是看官方英文说明：http://api.jquery.com/parentsUntil/
相关推荐
-
jquery1.4 教程三 新增方法教程
.clearQueue():移除队列中还没有运行的所有函数 clearQueue()的作用与stop(true)很类似,简化了stop(true),在1.4后stop()主要用于终止动画,而终止队列函数使用clearQueue(),clearQueue()接受一个参数:队列名称,即移除特定队列. 来看demo: clearQueue() $(function(){ }) div { margin:3px; width:40px; height:40px; position:absolute; l
-
Mybatis入门教程之新增、更新、删除功能
上一节说了Mybatis的框架搭建和简单查询,这次我们来说一说用Mybatis进行基本的增删改操作: 一. 插入一条数据 1.首先编写USER.XML(表的xml)使用insert元素,元素写在mapper中: <insert id="insertitem" parameterType="cn.qkp.po.user"> INSERT INTO user(username,birthday,sex,address) VALUES(#{username},
-
使用node打造自己的命令行工具方法教程
一.实现一个简单的功能 二.环境 1.系统: window 10 2.编辑器: vscode 3.node版本: 8.7.0 三.开始玩 1.打开命令行,新建一个pa'ckage.json npm init 这时看到一个新的package.json生成了,使用编辑器打开 2.修改package.json,新增一个bin属性 { "name": "my-cli", "version": "1.0.0", "descri
-
百度UEditor编辑器使用教程与使用方法(图文)
我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web
-
零基础易语言入门教程(三)之了解控制台程序
易语言简介: 易语言是一门以中文作为程序代码编程语言.以"易"著称.创始人为吴涛.早期版本的名字为E语言.易语言最早的版本的发布可追溯至2000年9月11日.创造易语言的初衷是进行用中文来编写程序的实践.从2000年至今,易语言已经发展到一定的规模,功能上.用户数量上都十分可观. 易语言和其它编程语言一样都有后台程序,它也不一定必须是窗口程序的了,下面小编带大家了解易语言的控制台程序. 方法和步骤如下所示: 1.延时命令: 首先学习一个第一个命令,该命令可将其脚本界面延时.1000毫秒
-
BootStrap入门教程(三)之响应式原理
相关阅读: BootStrap入门教程(一)之可视化布局 BootStrap入门教程(二)之固定的内置样式 Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .
-
mysql5.7.23版本安装教程及配置方法
亲身实践安装mysql,用时居然花费了三个小时,在有那么多教程的情况下,依然在不该花费时间的路上浪费了太多时间.希望这篇文章能够帮助大家少走弯路~~ 1.下载 https://www.mysql.com/ 官网地址 我下载的是64位. 2.解压 下载之后,我选择直接解压到D盘,文件地址是:D:\mysql-5.7.23-winx64,这里说这么清楚,是为了接下来的环境配置.你也可以根据自己个人喜好选择对应的位置. 3.环境配置 环境配置是为了后面利用cmd管理员命令进行安装. 首先用控制面板,
-
在IDEA的maven项目中连接并使用MySQL8.0的方法教程
首先看一下我的基本的开发环境: 操作系统:MacOS 10.13.5编辑器:IDEA 2018.3其他:MySQL8.0.15.Maven 3.3.9.JDK 1.8 好,下面就正式开始: 第一步:在IDEA中新建一个maven项目 1.使用骨架创建maven项目,此处选择:maven-archetype-quickstart 2.填入GroupId和ArtifactId 3.第一个选中maven安装的文件夹,第二个选中maven安装文件夹中的conf/settings.xml,第三个如果set
-
win10 64位 jdk1.8的方法教程详解
上篇文章给大家介绍了win10系统64位jdk1.8的下载与安装教程图解,需要的朋友可以参考下 配置Java环境,是否安装JRE. 一.安装得有JRE JDK和JRE分别安装在不同的文件夹下 新建:JAVA_HOME 值:JDK的安装路径 新建:CLASSPATH 值:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar 在Path变量中添加:%JAVA_HOME%\bin 和 %JAVA_HOME%\jre\bin 测试是否配置成功 java -version
-
android studio编译jar包或者aar包的方法教程详解
1. 在原有工程目录右键-> new ->Module->: 2. 选择library: 3. 一路next,最后finish: 4. 在新生成的lib module下的build.gradle中添加如下代码: task makeJar(type: Copy) { //删除存在的 delete 'build/outputs/aar/plugin-release.aar' delete 'libs/' //设置拷贝的文件来源 from('build/outputs/aar/') ////新