浅谈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 相关文章推荐
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
vue 数据操作相关总结
Dec 17 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
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
javascript中UMD规范的代码推演
2018/08/29 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Python表示矩阵的方法分析
2017/05/26 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python调用其他文件函数或类的示例
2019/07/16 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python必须了解的35个关键词
2020/07/16 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript