随笔分类 - JavaScript
摘要：前言：瀑布流的效果，页面都是由很多数据块(这里将数据块分成多列)组成，每个数据块的高度不等， 浏览器下拉后数据都是从高度最小列最先展示在用户面前；实例：http://miiee.taobao.com/choice.htm?pcid=8106&cid=81060011、首先获取每列的高度,保存在一个数组中，然后求数组中最小项的值// 获取数值数组中最小项的索引// 数组只有一个元素，直接返回0// 如果最小值有两个或以上,则返回第一个最小值的索引function minIndexOf ( array ) { var arr = array || [], len = arr.lengt..
阅读全文
摘要：例图：一、思路1、单击元素时，使元素可以编辑，并获得焦点2、按下键盘检测用户编辑元素中的文本3、监听按下Enter键操作或离开可编辑元素焦点时，更新数据库二、代码 1 $(function(){ 2 // return obj { length: 字节长度, limitStr: 限定的字符串(字节长度小于等于intVal) } 3 function getStringByteInfo ( string, intVal ) { 4 var str = $.trim(string) || '', length = str.length, len, reg, char...
阅读全文
摘要：一、需求示例图二、需求分析1、分页依据元素: 当前页码, 后端的页码总数2、页数小于等于6, 直接在当前页码显示左右相邻页码3、页数大于等于7, 根据 余数（= 总页码数 - 当前页码数）来做判断三、注释源码注：代码依赖jQuery库function paging ( currentPage, totalPage ) { var p = currentPage, t = totalPage, linkStr = ''; // 页码链接(后面 + 页码参数),也可以作为参数传递 // 插入一个页码包装器 $('').appendTo('body')
阅读全文
摘要：需求示例：一、插件API1、插件使用$.slide( container, contentCls, triggerCls [,config] );2、必选参数container: selector, // 外围盒子选择器contentCls: selector, // 内容面板父容器ClassNametriggerCls: selector, // 触发器父容器ClassName3、config配置可选参数，例 :{ autoplay: true, // 是否自动轮播，默认false delay: 4000, // 自动轮播延迟时间，默认4000，单位毫秒 interval: 4000,...
阅读全文
摘要：序言：最近在学习jQuery.Callbacks对象，看jQuery.Callbacks的API文档，不是很懂，因此看看其源码部分，理解其使用方法，记录下自己在阅读源码时的记录并分享给大家。有理解不透的地方望同仁指点，代码来源：jQuery 1.9.1版本。作者：华子yjh，欢迎转载，转载时请注明出处并附上原文链接。一、源码解读/* * Create a callback list using the following parameters: * * options: an optional list of space-separated options that will chang...
阅读全文
摘要：序言：倒计时应用于各网站页面，普遍存在，用过别人写的库(复杂)组件，也怕自己写的不好，今天又遇到一个倒计时的需求，因此打算自己写一遍。作者：华子yjh一、组件API1、组件调用方式countDown(targetTime, callback(d, h, m, s)); // 组件调用方式2、参数(Params)说明targetTime: // 用户设置倒计时的目标时间callback(d, h, m, s): // 回调函数，其参数分别为倒计时间中的天、小时、分钟、秒值二、使用案例1、HTML结构2、JavaScript代码var targetTime = '2013/03/15 18
阅读全文
摘要：前言：很久没有写js代码了，为了提升自己对js的认识，编写高质量的js代码，最近在看JavaScript模式一书，结合自己的理解总结一些知识点。作者：华子yjh一、深入理解JavaScript中的函数1、函数是(一等)对象函数可以通过内置构造函数来创建：var fn1 = function(){}var fn2 = new function(){};// 在以上两行代码中，第二行代码更能体现出函数是一个对象.函数可以拥有属性var fn = function(){}fn.NUM = 100;console.log(fn.NUM); // 100// 上面代码中，fn增加了一个NUM的属性，而只
阅读全文
摘要：一、jQuery.roll 插件使用说明jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：/* * @作者 华子yjh http://www.cnblogs.com/yangjunhua/ * @source 博客园 * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration 滚.
阅读全文
摘要：一、源码思路分析总结[ 作者：华子yjh ]概要：jQuery的核心思想可以简单概括为“查询和操作dom”，今天主要是分析一下jQuery.prototype.init选择器构造函数，处理选择器函数中的参数；这个函数的参数就是jQuery()===$()执行函数中的参数，可以先看我之前写的浅析jQuery基础框架一文，了解基础框架后，再看此文。思路分析:以下是几种jQuery的使用情况(用于查询dom)，每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象)，该对象包含查询的dom节点)：1、处理 $(""), $(null), $(undefin
阅读全文
摘要：一、jQuery.buildFragment使用方法1、参数jQuery.buildFragment( args, context, scripts );2、返回值return { fragment: fragment, cacheable: cacheable };二、思路分析1、处理context参数根据传入到context参数值的不同，确保context为文档根节点document 2、限制可缓存条件2.1、字符串小于512字节2.2、字符串不存在option标签(克隆option标签会丢失选中状态,因此不缓存)2.3、字符串不存在<object>,<embed>
阅读全文
摘要：一、jQuery.clean使用方法jQuery.clean( elems, context, fragment, scripts );二、思路分析1、处理参数context，确保其为文档根节点document2、处理参数elems数组(循环遍历数组) 2.1、elem为数字，转换为字符串 2.2、elem为非法值，跳出本次循环 2.3、elem为字符串 2.4、字符串不存在实体编号或html标签，则创建文本节点 2.5、字符串为实体编号或html标签1 创建一个div元素并插入到文档碎片中2 处理xhtml风格标签3 将elem包裹起来，并将包裹后的字符串作为div的innerHT...
阅读全文
摘要：一、原型模式结构1 // 定义一个jQuery构造函数2 var jQuery = function() {3 4 };5 6 // 扩展jQuery原型 7 jQuery.prototype = {8 9 };上面是一个原型模式结构，一个jQuery构造函数和jQuery实例化对象的的原型对象，我们一般是这样使用的：1 var jq = new jQuery(); //变量jq通过new关键字实例化jQuery构造函数后就可以使用原型对象中的方法，但是jQuery并不是这么使用的二、返回选择器实例 1 var jQuery = function() { 2 3 // 返回选...
阅读全文
摘要：一、创建正则对象： 1、构造函数RegExp创建正则对象 2、使用正则直接量 二、正则表达式字符 1、反斜线\ 在正则表达式中表示转义序列 特殊符号： 如果想要在正则表达式中匹配它们，应该在他们前面加上反斜线，如： 2、直接量字符 3、字符类 下面也属于字符类： 4、重复字符类 贪婪的重复字符 非贪
阅读全文
摘要：一、jQuery.extend方法1、用途 jQuery.extend方法是将多个对象(提供对象)的属性(包括原型中的属性)复制给另一个对象(要扩展的目标对象)，使目标对象增强行为；当提供对象有而目标对象没有的属性(包括方法)，则直接复制给目标对象，当它们有相同的属性名(即key键相同)，且值为对象...
阅读全文
摘要：在浏览网页时可以看到复制功能，如：在看一个带有源码的demo时，可以点击复制，把源码复制到剪切板，然后粘贴到本地review，ie浏览器可以使用浏览器内置对象(window.clipboradData)的setData方法，但无法兼容其他浏览器，下面介绍ZeroClipboard:一、原理ZeroClipboard利用透明的flash让其漂浮在复制按钮之上，将需要复制的内容传入flash，在通过flash的复制功能把传入的内容复制到剪切板。二、结构1、ZeroClipboard其实是国外的一个js类库，源码结构如：var ZeroClipboard = { //这里是属性和方法....
阅读全文
摘要：一、事件流1、事件冒泡 事件沿DOM树向上传播2、事件捕获 事件到达预定目标之前被捕获3、DMO2级事件 事件捕获阶段，处于目标阶段，事件冒泡阶段二、事件处理程序格式：on + ＂事件名＂1、HTML事件处理程序1 <input type="button" value="click me" onclick="showMessage()" >2、DOM0级事件处理程序1 element.onclick = function(){ //... }3、DOM2级事件处理程序1 element.addEventListener(t
阅读全文
摘要：一、理解篇:1、每创建的一个函数都有一个prototype属性，该属性是一个对象，prototype默认有一个constructor属性，默认指向prototype对象所在函数的指针；2、prototype对象中定义的属性和方法是实例化prototype所在函数对象所共享的，当prototype为字面量对象时，其constructor属性将指向Object构造函数；3、在实例对象中默认有一个内部属性__proto__，该属性指向原型对象，即(构造函数中的prototype属性，实例对象的原型对象)4、在一个函数被作为构造函数时，我们把在构造函数中定义的属性，方法称为实例属性和方法，把在prot
阅读全文
摘要：一、函数声明与函数表达式1、函数声明之后，可以在声明之前调用，也可以在声明之后调用，因为所有的函数声明(包括var声明的变量)都会在代码执行之前就加载到作用域中，函数名其实是一个Function类型的对象的引用，声明函数时函数名其实也就被赋值了；2、而函数表达式则不同，函数表达式是将函数赋值给一个变量，只有当代码执行到那一行的时候，函数才真正的有定义，因此这个变量只有在表达式之后才能使用，否则这个变量为undefined，如果这个变量不是通过var关键字声明,那么它就没有任何值。例1：fn1(); //fn1fn2(); //fn2 is not a functionconsole.log(t
阅读全文
摘要：一、this出现的几种情况1、构造函数中的thisfunction Fn(){ console.log(this); }var obj1 = new Fn(); //obj1, 函数Fn中的this指向实例对象obj12、普通函数中的thisfunction Fn1(){ console.log(this); }Fn1(); //window, Fn1属于window全局对象的一个属性,即：Fn1()===window.Fn1(),函数Fn1中的this指向window对象Fn()===window.Fn(); //window, Fn属于window全局对象的一个属性,即：Fn()===wi
阅读全文
摘要：一、setTimeoutsetTimeout(function(){ //要执行的代码 },200);理解：指隔200ms后,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行二、setIntervalsetInterval(function(){ //要执行的代码 },200);A、理解：1、上面代码是指每隔200ms就创建一个执行代码的定时器2、当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript...
阅读全文