浅谈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 相关文章推荐
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
使用原生js写ajax实例(推荐)
May 31 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
详解支持Angular 2的表格控件
2017/01/19 Javascript
js a标签点击事件
2017/03/30 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue中对象数组去重的实现
2020/02/06 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python+django+sql学生信息管理后台开发
2018/01/11 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
恶意软件的定义
2014/11/12 面试题
初中生操行评语大全
2014/04/24 职场文书
社区禁毒工作方案
2014/06/02 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
简单谈谈Python面向对象的相关知识
2021/06/28 Python