规范JavaScript命名
驼峰命名法 驼峰命名法按照第一个字母是否大写分为： Pascal Case 大驼峰式命名法：首字母大写 StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写 studentInfo、userInfo、productInfo 变量 命名方法：小驼峰式命名法 命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数) 命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。 示例 // 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable'; // 不好的命名方式 var setCount = 10; var getTitle = 'LoginTable'; 函数 命名方法：小驼峰式命名法 命名规范：前缀应当为动词。 命名建议：可使用常见动词约定 动词 含义 返回值 can 判断是否可执行某个动作(权限) 函数返回一个布尔值 ...
规范JavaScript注释
行内注释 显示一个解释的评论 // 用来显示一个解释的评论 显示表达式的结果 // -> 用来显示表达式的结果 显示 console 的输出结果 // >用来显示 console 的输出结果 示例 function test() { // 测试函数 console.log('Hello World!'); // >Hello World! return 3 + 2; // ->5 } //(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。 单行注释 示例 // 调用了一个函数；1)单独在一行 setTitle(); 单独一行：//(双斜线)与注释文字之间保留一个空格。 普通多行注释 示例 /* * 代码执行到这里后会调用setTitle()函数 * setTitle()：设置title的值 */ setTitle(); 若开始/*和结束*/都在一行，推荐采用单行注释。若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。 函数多行注释 函数(方法) ...
jQuery原理（事件操作相关方法）
on方法 // 事件操作相关方法 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.eventsCache[name].push(callBack); ...
jQuery原理（属性操作相关方法）
attr方法 设置或者获取元素的属性节点值 //属性操作相关的方法 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); }); } } // 2. 判断是否是对象 ...
jQuery原理（DOM操作相关方法）
empty方法 清空指定元素中的所有内容。也就是遍历内容，然后将其innerHTML清空。 kjQuery.prototype.extend({ empty: function () { // 遍历所有找到的元素 this.each(function (k, v) { v.innerHTML = ''; }); // 返回this对象为了方便链式编程 return this; }, }) remove方法 删除所有的元素或指定元素。判断是否传入参数，如果传入参数，则删除指定元素，否则删除全部。 JavaScript元素不能自己删除自己，只能通过上级元素删除。 remove: function (sele) { if (arguments.length === 0) { // 遍历指定的元素 this.each(function (k, v) ...
jQuery原理（原型上的属性、方法）
jQuery原型上的属性 kjQuery.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原型上的方法 toArray ...
jQuery原理（入口函数）
基本结构 jQuery的基本结构如下： (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.prototype = ...
八、jQuery的QQ音乐播放器
项目资料 查看源码 在线Demo 基本框架及顶部布局 <div class="header"> <h1 class="logo"><a href="#"></a></h1> <ul class="register"> <li>注册</li> <li>登陆</li> </ul> </div> <div class="content"> <div class="content_in"></div> </div> <div class="footer"> <div class="footer_in"></div> </div> * { margin: 0; padding: 0; } .header { width: 100%; height: 45px; background: red; } .header .l ...
七、jQuery狂拍大灰狼案例
在线案例显示：狂拍灰太狼 首页布局 基本布局 完成首页的布局，背景使用了一张图片。其余元素，图中已经标出。 <div class="container"> <h1>0</h1> <div class="progress"></div> <button class="start">开始游戏</button> <div class="rules">游戏规则</div> </div> * { margin: 0; height: 0; } .container { width: 320px; height: 480px; background: url("https://tva1.sinaimg.cn/large/005B3XPgly1gfw7dh267lj308w0dc759.jpg") no-repeat 0 0; margin: 50px auto; position: relative; } ...
六、jQuery节点操作
添加节点相关方法 内部插入 插入到节点最前面 // 方法1 $li.prependTo('ul') // 方法2（常用） $('ul').prepend($li) 添加到节点最后边 // 方法1 $li.appendTo('ul') // 方法2（常用） $('ul').append($li) 外部插入 将元素添加到指定元素外部的后面 // 方法1 $li.insertAfter('ul') // 方法2（常用） $('ul').after($li) 会将元素添加到指定元素外部的前面 // 方法1 $li.insertBefore('ul') // 方法2（常用） $('ul').before($li) 删除节点相关方法 remove()或detach() 删除指定元素，可传入参数。例如$('li').detach('.item')表示删除li下的.item元素 $('div').remove() $('li').detach('.item') 两个方法一样，都可以接收参数。 empty() 删除指定元素的内容和子元素,指定元素自身不会 ...
