浅谈jquery高级方法描述与应用


Posted in Javascript onOctober 04, 2016

1.addBack()

a. third-item的 li 下几个相邻节点(包括third-item)

$( "li.third-item" ).nextAll().addBack(). 
 .css( "background-color", "red" );

b. 和end()方法类似,选中的是div.after-addback和p元素,end选中的是div.after-addback元素

$( "div.after-addback").find("p").addBack().addClass("background"); 
$( "div.after-addback").find("p").end().addClass("background");

2.callback.fire()

通过参数调用foo函数

var foo = function(value){ 
  console.log( "foo:" + value ); 
} 
var callbacks = $.Callbacks(); 
callbacks.add(foo); 
callbacks.fire("hello"); 
callbacks.fire("world");

3.callback.lock()

锁住callback函数列表,这个方法不能接受任何参数。

var foo = function( value ) { 
 console.log( "foo:" + value ); 
}; 
var bar = function( value ){ 
 console.log( "bar:" + value ); 
}  
var callbacks = $.Callbacks(); 
callbacks.add( foo ); 
callbacks.fire( "hello" ); // 输出 "foo: hello" 
callbacks.lock(); // 此后不能在调用foo方法,除非$.Callbacks("memory") ,可以add一个函数 
callbacks.fire( "world" ); // 没有调用foo方法 
callbacks.add( bar ); // 当callbacks 赋值为 $.Callbacks("memory") ,创建一个callback对象,使用memory标识,可以再add一个函数 
callbacks.fire( "world" ); // 输出 "bar: hello"

4.defered.promise()

在原来的Deferred对象上返回另一个Deferred对象

$(function(){ 
  $("input[type=button]").click(function(){ 
    $.ajax({ 
      url : "validate.html", 
      type : "POST", 
      dataType : "json" 
    }).done(function(data){ 
      alert(data.a); 
    }).fail(function(){ 
      alert("error"); 
    }) 
  }); 
       
  var dtd = $.Deferred(); 
  var wait = function(dtd){ 
    var tasks = function(){ 
      alert("执行完毕!"); 
      dtd.resolve(); // 改变Deferred对象的执行状态 
    }; 

  setTimeout(tasks,5000); 

 }; 

 dtd.promise(wait); 

 wait.done(function(){ alert("哈哈,成功了!"); }).fail(function(){ alert("出错啦!");  
});

5.animate({ step : function(){ } })

一个元素动画的同时进行另一个元素的动画

$( "#go" ).click(function() { 
 $( ".block:first" ).animate({ 
  left: 100 
 }, { 
  duration: 1000, 
  step: function( now, fx ){ 
   $( ".block:gt(0)" ).css( "left", now ); 
  } 
 }); 
});

6.clone()

与appendTo方法同时使用,创建一个克隆的元素

<div class="container"> 
 <div class="hello">Hello</div> 
 <div class="goodbye">Goodbye</div> 
</div>
$( ".hello" ).appendTo( ".goodbye" );

结果是:

<div class="container"> 
 <div class="goodbye"> 
  Goodbye 
  <div class="hello">Hello</div> 
 </div> 
</div>
$( ".hello" ).clone().appendTo( ".goodbye" );

结果是:

<div class="container"> 
 <div class="hello">Hello</div> 
 <div class="goodbye"> 
  Goodbye 
  <div class="hello">Hello</div> 
 </div> 
</div>

以上就是小编为大家带来的浅谈jquery高级方法描述与应用全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue.js中$watch的用法示例
Oct 04 #Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 #Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 #Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 #Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 #Javascript
json定义及jquery操作json的方法
Oct 03 #Javascript
javascript中异常处理案例(推荐)
Oct 03 #Javascript
You might like
PHP文件读取功能的应用实例
2015/05/08 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js实现延时加载Flash的方法
2015/11/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python动态文本进度条的实例代码
2020/01/22 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
explicit和implicit的含义
2012/11/15 面试题
机电专业毕业生求职信
2013/10/27 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
心理健康教育制度
2014/01/27 职场文书