规范JavaScript命名
驼峰命名法 驼峰命名法按照第一个字母是否大写分为： Pascal Case 大驼峰式命名法：首字母大写 StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写 studentInfo、userInfo、productInfo 变量 命名方法：小驼峰式命名法 命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数) 命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。 示例 1234567// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable'; // 不好的命名方式var setCount = 10;var getTitle = 'LoginTable'; 函数 命名方法：小驼峰式命名法 命名规范：前缀应当为动词。 命名建议：可使用常见动词约定 动词 含义 返回值 can 判断是否 ...
规范JavaScript注释
行内注释 显示一个解释的评论 // 用来显示一个解释的评论 显示表达式的结果 // -> 用来显示表达式的结果 显示 console 的输出结果 // >用来显示 console 的输出结果 示例 1234function test() { // 测试函数 console.log('Hello World!'); // >Hello World! return 3 + 2; // ->5} //(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。 单行注释 示例 12// 调用了一个函数；1)单独在一行setTitle(); 单独一行：//(双斜线)与注释文字之间保留一个空格。 普通多行注释 示例 12345/** 代码执行到这里后会调用setTitle()函数* setTitle()：设置title的值*/setTitle(); 若开始/*和结束*/都在一行，推荐采用单行注释。若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一 ...
jQuery原理（事件操作相关方法）
on方法 12345678910111213141516171819202122232425// 事件操作相关方法kjQuery.prototype.extend({ on: function (name, callBack) { this.each(function (key, ele) { // 2. 判断当前元素中是否有保存所有事件的对象 if (!ele.eventsCache) { ele.eventsCache = {}; } // 3. 判断对象中有没有对应类型的数组 if (!ele.eventsCache[name]) { ele.eventsCache[name] = []; // 4. 将回调函数添加到数组中 ele.eventsCach ...
jQuery原理（属性操作相关方法）
attr方法 设置或者获取元素的属性节点值 123456789101112131415161718192021222324252627//属性操作相关的方法kjQuery.prototype.extend({ attr: function (attr, value) { // 1. 判断是否是字符串 if (kjQuery.isString(attr)) { if (arguments.length == 1) { return this[0].getAttribute(attr); } else { this.each(function (key, ele) { ele.setAttribute(attr, value); }); } } ...
jQuery原理（DOM操作相关方法）
empty方法 清空指定元素中的所有内容。也就是遍历内容，然后将其innerHTML清空。 12345678910kjQuery.prototype.extend({ empty: function () { // 遍历所有找到的元素 this.each(function (k, v) { v.innerHTML = ''; }); // 返回this对象为了方便链式编程 return this; },}) remove方法 删除所有的元素或指定元素。判断是否传入参数，如果传入参数，则删除指定元素，否则删除全部。 JavaScript元素不能自己删除自己，只能通过上级元素删除。 12345678910111213141516171819202122232425262728remove: function (sele) { if (arguments.length === 0) &# ...
jQuery原理（原型上的属性、方法）
jQuery原型上的属性 12345678910111213141516kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, // 版本号 jquery: "1.1.0", // 实例默认的选择器取值 selector: "", // 实例默认的长度 length: 0, // 给实例添加新元素 push: [].push, // 对实例中的元素进行排序 sort: [].sort, // 按照指定下标指定数量删除元素，也可以替换删除的元素 splice: [].splice,}; 关于三个方法（push,sort,splice）以push为例： 通过[].push找到数组的push方法 但是对象的push方法由对象调用，那么this就指向了对象（jQuery） 所以也就相当于[].push.apply(this)将元素添加到对 ...
jQuery原理（入口函数）
基本结构 jQuery的基本结构如下： 12345678910111213141516171819202122232425(function (window, undefiend) { var jQuery = function () { return new jQuery.fn.init() } jQuery.prototype = { constructor: jQuery } jQuery.fn.init.prototype = jQuery.prototype window.jQuery = window.$ = jQuery})(window);/* 其中fn指代的是原型，因此以上结构可以转换成以下结构 */(function (window, undefiend) { var jQuery = function () { return new kjQuery.prototype.init(); } ...
六、jQuery节点操作
添加节点相关方法 内部插入 插入到节点最前面 1234// 方法1$li.prependTo('ul')// 方法2（常用）$('ul').prepend($li) 添加到节点最后边 1234// 方法1$li.appendTo('ul')// 方法2（常用）$('ul').append($li) 外部插入 将元素添加到指定元素外部的后面 1234// 方法1$li.insertAfter('ul')// 方法2（常用）$('ul').after($li) 会将元素添加到指定元素外部的前面 1234// 方法1$li.insertBefore('ul')// 方法2（常用）$('ul').before($li) 删除节点相关方法 remove()或detach() 删除指定元素，可传入参数。例如$('li').detach('.item')表示删除li下的.item元素 12$(&#x ...
五、jQuery动效
显示隐藏动画 显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数： 一个参数 代表动画完成的时间 两个参数 第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数 123456789101112131415161718$(function () { $('button').eq(0).click(function () { $('div').show(1000, function () { alert('显示动画执行完毕') }) }) $('button').eq(1).click(function () { $('div').hide(1000, function () { alert('隐藏动画执行完毕') & ...
四、jQuery事件相关
事件绑定 绑定方式有两种： 直接通过.eventName(fn)方式绑定。 123$('button').click(function () { alert('hello tzk')}) 编码效率高 部分事件jQuery没有实现 通过on(eventName,function)方式绑定 123$('button').on('click', function () { alert('hello tzk')}) 编码效率略低 所有JavaScript事件都可以添加 注意：以上两种绑定方式均不会被覆盖，并且可以添加多个事件。 123456789$('button').click(function () { alert('hello tzk')})$('button').click(function () { alert( ...
