jQuery迭代器

jQuery 迭代器

在叶小钗的博客中看到一段关于遍历的代码 var ajQuery = {}; function dir(elem, dir, until) { var matched = [], truncate = until !== undefined; while ((elem = elem[dir]) && elem.nodeType !== 9) { if (elem.nodeType === 1) { if (truncate) { if (elem.nodeName.toLowerCase…

http://www.imooc.com/code/3417 迭代器迭代器是一个框架的重要设计.我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代器模式(Iterator). jQuery中的$.each方法就是一个典型的迭代器,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,如下代码: $.each([52, 97], function(index, value) { alert(index + ':…

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq…

JQuery操作类数组的工具方法

JQuery学习之操作类数组的工具方法在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况下,JQuery提供了几个常用的属性和方法来操作JQuery对象. length:该属性返回JQuery里包含的DOM元素的个数. context:该属性返回获取该JQuery对象传入context参数 JQuery:该属性返回JQuery的版本 each(fn(index)):该方法是是一个迭代器…

JQuery常用函数及功能小结

1.文档加载完成执行函数$(document).ready(function(){ alert("开始了");});2.添加/删除CSS类$("#some-id").addClass("NewClassName");$("#some-id").removeClass("ClassNameToBeRemoved");3.选择符利用了CSS和Xpath(XML Path Language)选择符的能力,以及…

解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

本章开始分析过滤器,根据API的顺序来主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器首页我们知道jQuery对象是一个数组对象内部结构 jQuery的选择最终还是依靠的DOM提供的接口,jQuery只是最了最佳的方式最快的匹配到合适的位置构建一个基础的jQuery对象有: 元素合集元素数量上下文通过pushStack()方法构建的prevObject的引用储存,这个在DOM操作的时候特别有用选择器具体文章前面有分析,pushStack…

javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

js/jquery/html前端开发常用到代码片段

1.IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容. 条件注释使用方法示…

JQuery常用方法一览

$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值 $(”元素名称”).html(); 获得该元素内的内容(…

js设计模式总结-迭代器模式

迭代器模式要解决的问题迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,for..of..,for..in..,for 迭代器的种类分两种,内部迭代器,外部迭代器. 内部迭代器内部迭代器的迭代过程对外部是不可控的,内部自己实现迭代过程.比如forEach, jQuery中的$.each 外部迭代器外部迭代器就相对灵活,可以控制迭代过程,需要显式调用迭代操作.外部迭代器较…

ES6的Iterator,jquery Fn

ES6的Iterator对象详解 Iterator实现原理创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员. 不断调用指针对象的next方法,直到它指向数据结构的结束位置. 每一次调用next方法,都会返回数据结构的当前成员的信息.具体来说,就是返回一个包含value和done两个属性的对象.其中,value属性是…

jquery 源码解析节点遍历

jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. ☑ <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 ☑ 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. ☑ &l…

Jquery遍历选中的input标签

$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value")); })…

jQuery常用操作方法及常用函数总结

一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中控件 $("#ID #ID") // 通过控件ID取其中的控件 $(…

JQuery常用函数及功能小结－－转载

1.文档加载完成执行函数 $(document).ready(function(){ alert("开始了"); }); 2.添加/删除CSS类 $("#some-id").addClass("NewClassName"); $("#some-id").removeClass("ClassNameToBeRemoved"); 3.选择符利用了CSS和Xpath(XML Path Language)选择符…

迭代器和for-of

在ES5及之前的JS标准中,我们习惯了用for(var i = 0; i < Array.length;i++){//TODO}或者是for(var index in Array){console.log(Array[index]);}或forEach 前者固然是好的,而后两个毛病多多,forEach不能够用return或者break中断循环,index in Array 返回的index不是数字,而是字符串“0”,“1”,“2”等等,因此衍生了功能强大的for-of for-of for( v…

jquery 源码解析

静态与实力方法共享设计遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = { each:function(callback,args){ return jQuery.each(this,callback,args); } } 实例方法取与静态方法,换句话来说静态与实例方法共享设计,静态方法挂在jquery构造器上面方法链式调用的实现 $("li").eq(0…

jQuery：常用方法一览

Attribute:$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值$(”元素名称”).html(); 获得该元…

javascript设计模式与开发实践阅读笔记（7）——迭代器模式

迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素. 流行语言如Java.Ruby 等都已经有了内置的迭代器实现,许多浏览器也支持JavaScript的Array.prototype.forEach. jQuery中的迭代器 $.each( [1, 2, 3], function( i, n ){ console.log( '当…

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为内部迭代器和外部迭代器一.jQuery 中的迭代器 $.each( [1,2,3,4], function (i, n) { console.log( "当前下表为…

jQuery基础修炼圣典—DOM篇（二）jQuery遍历

1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 理解节点查找关系: <div class="div"> <ul class="son"> <li class="grandson">1…

javascript设计模式学习之七——迭代器模式

一.迭代器模式定义迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,并且不需要暴露该对象的内部表示. 在当前大部分语言中,都已经内置了迭代器模式.迭代器有内部迭代器和外部迭代器之分,一般现有语言中实现的大多是内部迭代器. 二.jquery中的each实现对于数组采用数字下标访问,防止原型链上其他非数值属性的干扰. //类似jquery中的each迭代器 $.each=function(obj,callback){ var value, i=, isArray=isArrayLike(o…

jQuery常用技巧-使用的总结

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge…

JQuery源码分析（八）

jQuery的each迭代器 jQuery的each方法从使用上就要分2种情况: $.each()函数 $(selector).each() $.each()函数和$(selector).each()是不一样的,后者是专门用来遍历一个jQuery对象的,是为jQuery内部服务的. $.each()函数可用于迭代任何集合,无论是"名/值"对象(JavaScript对象)或数组.在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数. (该值也可以通过访问this关键字得…

JQuery源码分析（七）

了解jQuery对DOM进行遍历背后的工作机制,这样可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能. 关于jQuery对象的包装 var $aaron = $("aaron"); 我们可以得知Query选择器最终都是通过DOM接口实现取值的, 但是通过jQuery处理后返回的不仅仅只有DOM对象,而是一个包装容器,返回jQuery对象:$aaron 看一下代码: 在jQuery对象中有个prevObject对象,这个是干嘛用的呢? jQuery对象栈,jQuery…

JQuery 常用方法基础教程

本文转自(http://www.cnblogs.com/Leo_wl/archive/2010/06/22/1762401.html) 对于学习使用jquery 的朋友,能用的到,简单的了解下jquery的一些操作. $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map $(”img”).attr(”src”,”test.jpg”);…