浅谈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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
JavaScript实现五子棋小游戏
Oct 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python 文件和输入输出小结
2013/10/09 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
Python中的zipfile模块使用详解
2015/06/25 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
药剂专业自荐信范文
2014/04/16 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
使用JS实现简易计算器
2021/06/14 Javascript
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android