浅谈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 Date对象 日期获取函数
Dec 19 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 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
自己动手做一个SQL解释器
2006/10/09 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
JS在if中的强制类型转换方式
2018/07/15 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
python实现RSA加密(解密)算法
2016/02/17 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
车贷收入证明范本
2014/01/09 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
员工工作表现自我评价
2015/03/06 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers