jQuery库 在线

217jQuery 捕获


attr 和 prop 的区别介绍:
对于 HTML 元素本身就带有的固有属性 在处理时 使用 prop 方法
对于 HTML 元素 自己自定义的 DOM 属性 在处理时 使用 attr 方法
<a href="https://www.facesoho.com" target="_self" class="btn">小鸟启蒙</a>
这个例子里 <a> 元素的 DOM 属性有 href target 和 class 这些属性就是 <a> 元素本身就带有的属性
也是 W3C 标准里就包含有这几个属性
或者说在 IDE 里能够智能提示出的属性  叫做固有属性
处理这些属性时 建议使用 prop 方法

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
这个例子里 <a> 元素的 DOM 属性有 href id 和 action
前两个是固有属性 而后面一个 action 属性是我们自己自定义上去的
<a> 元素本身是没有这个属性的
这种就是自定义的 DOM 属性
处理这些属性时 建议使用 attr 方法

216jQuery 动画

队列操作

jquery中有一个Queue队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的,Queue队列如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施

Queue队列

队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行出入操作(入队),队列的特点是先进先出,最先插入的元素最先被删除。

为什么要引入队列

var a = 1;setTimeout(function(){  a=2;},0)alert(a);

我们一直习惯于线性的编写代码逻辑,但是在JavaScript编程几乎总是伴随着异步操作:

setTImeout,css3Transition/Animation,ajax,dom的绘制,postmessage,web Database 等等,大量异步操作所带来的回调函数会把我们的算法分解,对于“异步+回调”的模式,怎么“拉平”异步操作使之跟同步一样,因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑,所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序

看一个代码段:

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列,它的内部其实就是一组队列 Queue,所以队列和 Deferred 地位类似,是一个内部使用的基础设施。

  • 当 slideUp 运行时,fadeIn 被放到 fx 队列中
  • 当 slideUp 完成后,从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API:

jQuery.queue/dequeuejQuery.fn.queue/dequeue

但是不同与普通队列定义的是:

  • jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素,还会自动执行返回的队头元素
  • fn 是扩展在原型上的高级API是提供给实例使用的
  • .queue/.dequeue 其内部是调用的 .queue,.dequeue 静态的底层方法实现入列与出列

215jQuery 事件方法

对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click。因为这些元素属于动态生成,除非采用 noclick 内联的形式。那么解决办法是使用 live 和 on 事件方法。

注意,jquery 1.7.2 之后的版本不建议使用 live。

例如:

$(".box ").click(function(){});

类名为 box 的元素是由 jquery 动态生成,以上写法将会无效,那么可以改为如下:

$(".box ").live('click', function(){});

或者:

$(".box ").on('click', function(){});

另外 click, blur, keyup, change等方法,都可以这样解决。

214jQuery 删除元素

对楼上进行补充:

$(selector) 语法的返回结果是一个元素的列表,即:将 $("#div1") 看作一个列表,remove() 中的筛选条件实际上是对这个列表中的元素进行筛选删除,而不会去删除这个列表中不存在的元素(子元素不在这个列表中)。

213jQuery 删除元素

解释一下楼上的,就是说如果子元素符合过滤器中条件而父元素不符合的话,是不会删除符合条件的子元素,即过滤器中条件只能作用于同级,不能作用于子元素。