浅谈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实现跳转菜单的具体方法
Jul 05 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php流量统计功能的实现代码
2012/09/29 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP导入导出Excel代码
2015/07/07 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
微信小程序实现分享商品海报功能
2019/09/30 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python set集合使用方法解析
2019/11/05 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
网站设计师的岗位职责
2013/11/21 职场文书
行风评议整改报告
2014/11/06 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL