学习就是刻意的去重复练习。

---

2017年2月8日15:13:21

|| 用法 0 || 12; // 返回值12 false || 12; // 返回值12 undefind || 12; // 返回值12 null || 12; // 返回值12 '' || 12; // 返回值12

使用场合：一般对于某个变量不确定是否有值时时候，|| 后面的值为当 || 前面的值为null 或 undefined 或 false 或 0 时的默认值。

---

2017年2月6日09:47:36

1.自执行的匿名函数

/** 在看一些js源码的时候经常会看到下面这种写法，刚开始可能不太明白，其实这就是一个页面加载完成后自执行的匿名函数。第一个小括弧里的$是变量名，第二个小括弧里的jQuery是传入的参数，指向$。 */ !function ($) { // 一些代码 }(jQuery);

看下面这个例子： 新建txt文件，修改文件名为test.html，将下面这行代码复制进去，点击浏览器方式打开，会看见页面加载完成后会弹出alert窗口，值为8。

!function (x, y) { alert(x + y); } (3, 5);

还有种自执行的匿名函数写法如下：

(function ($) { // 一些代码 }) (jQuery);

上述两种自执行匿名函数功能相同，只是第一种的 ! 替代了第二种的包围的小括弧。

2.jQuery功能扩展

jQuery一个最大的优势在于可以扩展它的方法，通常有以下两种方式。

给jQuery扩展全局函数

jQuery扩展全局函数的意思就是给它本身扩展方法，一般调用方式就为:

// jQuery 等同于 $ $.ajax({ // ... });

扩展全局函数的方式为：

jQuery.add = function (x, y) { alert (x, y); }; // 调用全局函数 $.add(3, 4);

给jQuery的对象扩展函数

首先得知道什么是jQuery的对象，我们单纯的把选择器选中的对象作为jQuery对象，如：

// 下面这个就是一个jQuery对象 $('#tableId')

扩展jQuery的对象函数的方式为：

jQuery.fn.add = function (x, y) { alert(x + y); };

调用jQuery的对象函数的方式为：

$('#test').add(3, 4);

注：在开发通用性组件时通常使用扩展jQuery对象函数的方式。

3.jQuery.inArray(value, arr);

判断 value 是否存在数组 arr 中，类似 js 原生代码的 indexOf，如果 value 属于数组 arr, 返回值为 value 在数组 arr 中的索引值，如果不存在，则返回 -1。

---

2017年2月5日15:06:33

1.trim的正确使用（jquery的方法，不是js原生方法） 之前只知道使用 trim() 可以去除字符串的首尾空格，于是就理所当然的这样写：

var str = ' hello javascript '; alert(str.trim());

当然上面那种写法在大多数情况是没有问题的，但如果要做浏览器兼容，在IE8中是会报错的：对象不支持“trim”属性或方法（实测IE8以上的版本都是可以正常运行的）

为解决浏览器兼容问题，可以采用另外一种写法：（这种写法在所有浏览器中都是可用的）

var str = ' hello javascript '; alert($.trim(str));

---

2017年2月2日19:22:21

1.在写js代码的时候需要经常拼写html代码，没有空格符的拼写很不利于后期代码维护。 如：

var html = '<div class="bootstrap-table"><div class="fixed-table-toolbar"></div><div class="fixed-table-container"></div>';

这里介绍一种合适的方法，将html代码拼写在数组中，再利用数组的join方法得到完整的拼接字符串，如：

var html = [ '<div class="bootstrap-table">', '<div class="fixed-table-toolbar"></div>', '<div class="fixed-table-container">', '<div class="fixed-table-header"><table></table></div>', '<div class="fixed-table-body">', '<div class="fixed-table-loading">', '</div>', '</div>', '<div class="fixed-table-pagination"></div>', '</div>', '</div>' ].join(''); alert(html);

2.jquery中几个容易混淆方法讲解

方法名方法示例方法讲解insertAfterA.insertAfter(B)将A对象的dom对象移动到B对象的后面afterA.after(B)将B对象的dom元素复制一份添加到A对象后面appendA.append(B)在A对象的内部末尾添加B对象

代码展示如下：

<input type="button" value="insertAfter" onclick="testInsertAfter()"> <input type="button" value="after" onclick="testAfter()"> <input type="button" value="append" onclick="testAppend()"> <ul> <li class="first">first</li> <li class="second">second</li> <li class="third">third</li> </ul> <li class="fourth"></li> // 这里默认已经引入了jqeury库 <script> function testInsertAfter () { $('.first').insertAfter('.third'); /** second third first */ } function testAfter () { $('.first').after($('.third').html()); /** second third first third */ } /*这里建议多点几次两个按钮，会发现每点击一次after按钮都会添加一个字符串'third'，但是insertAfter按钮好像只执行了一次。这是因为after会复制一份原先的代码放在后面，并不改变原先的代码；而insertAfter是移动代码插入后面，原先的代码被移动过后也就不存在了*/ function testAppend () { // 将class为'fourth'的li元素添加到ul元素的内部，并且位置在最后 // append方法和insertAfter方法一样，是移动，使用过之后原先的就不存在了 $('ul').append($('.fourth')); } </scipt>

注意事项： a. 由于二者都是jquery的方法，所以都得由jqeury的选择器调用，即$(‘..’).after(..)；

b.insertAfter() 的参数只有一个，理论上也为jqeury选择器，但为了写法方便，通常将 $(‘.third’) 直接写成 ‘.third’ 也是可以的;

c.after() 的参数也只有一个，并且只能是html代码，after方法会自动格式化参数html代码，如参数为”<h1>格式为h1的文字大小</h1>”，最后显示出来就是

格式为h1的文字大小

d.如果我们想把一段自定义的html代码插入到页面中的一个dom元素后面，我们可以使用下面这种写法：

var html = '<span>this is a span element</span>'; $(html).insertAfter('.third'); // 上面那种写法与 $('.third').after(html); 在这里是一样的(那就意味着在其他地方有不同的点)

---

2016年11月1日23:59:21

-需求：用js原生代码制作简易计算器

知识点：

知识点讲解value获取对象值，经常获取到的是字符串valueAsNumber获取对象的数字型值

---

<form> <input type="number" id="num1"> + <input type="number" id="num2"> = <input type="number" id="result" readonly> <input type="button" value="计算" onclick="sum()"> </form> <script> function sum () { var n1 = document.getElementById("num1").valueAsNumber; var n2 = document.getElementById("num2").valueAsNumber; document.getElementById("result").valueAsNumber = n1 + n2; } </script>

有兴趣的朋友可以试试将javascript代码中的valueAsNumber换成value看看会得到什么结果。

---

2016年10月16日11:20:04

需求：点击按钮，克隆表格中的第一行

知识点：

知识点讲解clone()克隆本身replace(a, b)用b替换字符串中的a正则表达式转义符和全局查询

---

<!-- html代码 --> <input type="button" value="添加一行" id="addRow"> <table> <tr id="firstTr"> <td><input type="text" placeholder="输入姓名"/></td> <td><input type="text" placeholder="输入年龄"/></td> <td><input type="text" placeholder="输入性别"/></td> </tr> </table> // js代码 //页面加载完成后执行方法 $(document).ready(function () { // 监听按钮的点击事件，只要点击按钮，执行下面的方法 $('#addRow').on('click', function () { var self = $('#firstTr').clone(); var anonyTr = $('<div>').append(self).html(); anonyTr = anonyTr.replace(/id\=\"firstTr\"/g, ''); $('table').append(anonyTr); }); });

方法使用过程中需要注意的地方：

---

1.clone() 讲解

---

2.正则表达式讲解

转义符介绍

正则表达式中 = 和 ” 有特殊的含义，如果需要使用其本身的字符作用的话，需要在前面加上转义字符 \。 如： /id\=\”word\”/ 这个正则表达式表示的意思就是找到字符串中 id=“word” 这个字符串。

全局查询介绍: /g (global) var str = 'he is her day'; // 使用正则表达式 /he/ 查到的只是第一个he,找到就结束了 // 而使用正则表达式 /he/g 查到的却是两个he，第二个he是her里面的子字符串 // 正则表达式 /g 可认为是全局查询，并不是找到即返回，而是查询整个字符串

---

3.replace() 讲解

var str = 'hello world, i love you!'; // 现在需要将其中的world用girl代替 // 这里弹出 'hello gril, i love you'，猛一看是替换掉了 alert(str.replace(/world/, 'gril')); // 这里依旧弹出 'hello world, i love you!'，可看出并没有改变其本身 alert(str); /** * 使用中的误区： * 可以认为在使用replace()方法时时将str赋值了一份，<br> * 对赋值的那一份进行了字符串的替换。<br> * 但在实际操作中，我们希望的是对其本身进行字符串替换，<br> * 操作方法：将替换后的字符串再赋值给这个变量即可。<br> * 如上面的例子中：str = str.replace(/world/, 'gril'); * alert(str); // 'hello gril, i love you' */

---

---

2016年9月28日22:47:18

需求：往数组中添加元素

传统方法：

var arr = []; arr[0] = 1; arr[1] = 2; 使用上面那种方法携带下标值未免繁琐和不高端，推荐使用js数组自带的方法。 方法讲解示例push()在数组末尾添加元素arr.push(1)pop()删除数组的最后一个元素arr.pop()

使用数组自带方法：

arr = []; // 使用push()方法时注意不能同时调用，如arr.push(1).push(2)是错误的写法 arr.push(1); // 此时数组为 [1] arr.push(2); // 此时数组为 [1, 2] alert(arr.push('aa')); // 返回结果 3，表示往数组中插入的是第三个元素了 // 此时数组为 [1, 2, 'aa'] alert(arr.pop()); // 返回结果'aa',表示数组最后一个元素'aa'，同时执行删除步骤 // 此时数组为 [1, 2] // 使用pop()方法时注意不能同时调用，如arr.pop().pop()是错误的写法 arr.pop(); arr.pop(); // 此时数组为 []

类似方法延伸：（用法同push()和pop()）

方法讲解示例unshift往数组头部添加若干元素arr.unshift(1)shift删除数组的第一个元素arr.shift()

---

2016年9月27日23:16:19

需求：将英文名字规范化，如 admin 、 BOB 统一改为首字母大写，其他字母小写 var name = 'BoB'; // 期望值 Bob name = name.charAt(0).toUpperCase() + name.substring(1).toLowerCase(); alert(name); // 返回结果 Bob 方法讲解charAt(0)下标为0，获取字符串中的第一个字符toUpperCase()将字符串里的字母全部变为大写substring(1)下标为1，获取字符串中的第二个字符到末尾的子字符串toLowerCase()将字符串里的字母全部变为小写

---

需求：不使用Number()和parseInt()，将字符串’123’转为数字123 var str = '123'; alert(typeof str); // 返回结果 string alert(typeof (+str)); // 返回结果 number alert(typeof (str - '0')); // 返回结果 number alert(typeof (str * 1)); // 返回结果 number 操作符 '+'、'-'、'*'的妙用。

---

‘=>’ 是什么？ x => x+5; // --------------- 等效于下面这个匿名函数 ----------------- function (x) { return x+5; }