浅谈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建立一个语法高亮输入框实现思路
Feb 26 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
jQuery中库的引用方法
Jan 06 jQuery
layui table 参数设置方法
Aug 14 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[03:08]Ti4观战指南上
2014/07/07 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python面向对象之继承和多态用法分析
2019/06/08 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
大学生年度自我鉴定
2013/10/31 职场文书
学期自我评价
2014/01/27 职场文书
五好关工委申报材料
2014/05/31 职场文书
2014教师研修学习体会
2014/07/08 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
校园运动会广播稿
2015/08/19 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript