二、ES6新语法
let关键字 特点 var关键字 let关键字 变量提升 √ × 作用域 没有块级作用域，是函数作用域 有块级作用域 重复声明 √ × 重新赋值 √ √ 变量提升 12console.log(age);let age = 38; 作用域 12345for (var i = 0; i < 10; i++) {}console.log(i);for (let n = 0; i < 10; i++) {}console.log(n); 图中可对比看出，如果用var声明，在循环外部还是可以使用i变量；但用let声明变量，循环外部不可以使用n变量 不可重复声明 123let num2 = 10;let num2 = 20;console.log("num2: ", num2); 重新赋值 123let num2 = 10;num2 = 20;console.log("num2: ", num2); const关键字 使用场景 一些不会变化 ...
一、Node.js入门
什么是NodeJs NodeJs是一个基于谷歌V8引擎的运行环境。(服务器上的v8引擎就是node.js) 其作用是让js拥有开发服务端的功能 环境安装 官方地址：https://nodejs.org/zh-cn/ 安装完成后，添加环境变量。命令行终端输入node -v即可输出版本号。 同样的，安装完NodeJs之后会自动安装npm（node package manager）。输入npm -v也会出现版本号。 npm可以到NPM去寻找包，类似GitHub。 运行NodeJs VSCode中使用RunCoder插件 终端 注意路径问题，执行命令为node 文件名 VSCode中的终端同理。 双击node.exe，在其内编写代码 服务器端与浏览器端 服务端的JavaScript只有ECMAScript，也就意味着在NodeJs
规范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的QQ音乐播放器
项目资料 查看源码 在线Demo 基本框架及顶部布局 12345678910111213<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"></ ...
