浅谈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 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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的面向对象编程
2006/10/09 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
tagName的使用,留一笔
2006/06/26 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python操作gitlab API过程解析
2019/12/27 Python
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
党员岗位承诺书
2014/03/25 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
开天辟地观后感
2015/06/09 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
优质护理服务心得体会
2016/01/22 职场文书
php双向队列实例讲解
2021/11/17 PHP
Python保存并浏览用户的历史记录
2022/04/29 Python