浅谈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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
jquery拖动改变div大小
Jul 04 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
详解javascript函数写法大全
Mar 25 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 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 Cookie的一个使用注意点
2008/11/08 PHP
php中计算时间差的几种方法
2009/12/31 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php建立Ftp连接的方法
2015/03/07 PHP
CI框架的安全性分析
2016/05/18 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
javascript中的几个运算符
2007/06/29 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python封装shell命令实例分析
2015/05/05 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
PHP开发的一般流程
2013/08/13 面试题
个人求职信范文分享
2014/01/06 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
可可西里观后感
2015/06/08 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang