一、逻辑运算符 || 和 &&

1、 || 表示或者，两者中有一个为 true，就返回 true

  1. if (0 || 1) {
  2.   console.log('true')
  3. }
  4. if (0 || false) {
  5.   console.log('false')
  6. }
  7. if (true || 0) {
  8.   console.log(true);
  9. }

2 && 是并且，两个值中必须两个都是 true，才返回 true

  1. if (0 && 1) {
  2.   console.log(1, '0 && 1')
  3. }
  4. if (0 && false) {
  5.   console.log(2, '0 && false')
  6. }
  7. if (true && 0) {
  8.   console.log(3, 'true && 0');
  9. }

3. || 和 && 也是有返回值的，

  • || 如果第一个为 true 就返回第一个，如果第一个不为 true 就返回第二个
  1. var r1 = 1 || 0;
  2. console.log(r1);
  3. var r2 = 0 || false;
  • && 如果第一个为 true 返回第二个，如果第一个为 false 返回第一个
  1. var r3 = 1 && 0;
  2. var r4 = false && 0;
  3. console.log(r3);
  4. console.log(r4);

二、==和===的区别

== 在比较时等号左右两侧数据类型不同时会先转成相同数据类型，再比较

  1. == 是相对比较； === 是绝对比较
  • 1.1 字符串 == 数字 ；字符串转换成数字
  1. console.log(1 == '1'); // true
  • 1.2 布尔值 == 数字; 布尔值转成数字
  1. console.log(1 == true); // true;
  • 1.3 布尔值 == 字符串; 布尔值转数字，字符串也转成数字，然后进行比较；
  1. console.log(false == '0'); // true
  • 1.4 null == undefined // true, null 和 undefined 和其他数据类型比较都是false
  • 1.5 对象 == 对象; 比较的是空间地址，地址相同返回true
  1. console.log({} == {}); // false
  • 1.6 对象 == 字符串; 对象转成字符串，然后和字符串比较
  1. console.log({} == '[object Object]'); // true
  • 1.7 对象 == 布尔值；对象先转成字符串，再转数字，布尔值也转成数字，在比较这两个数字
  1. console.log({} == true); // false
  2. console.log([] == false); // true
  • 1.8 对象 == 数字；对象先转成字符串，然后再转成数字
  1. console.log({} == 1); // false
  2. console.log([] == 0); // true
  • 特殊：NaN 和 NaN 永远不相等
  1. console.log(NaN == NaN); // NaN 和 NaN 永远不相等

三、for循环

for 循环 (for loop) 语句：按照一定的规律，重复去做某一件事情，此时就需要使用循环语句.

  1. var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  3. /* [
  4.    0: 1,
  5.    1: 2,
  6.    2: 3,
  7.    ...
  8.    11: 12
  9.    length: 12 // length属性的值表示数组有多少项
  10.  ]
  11. */
  13. // 把数组里面的每一项都输出出来：
  15. console.log(ary[0]);
  16. console.log(ary[1]);
  17. console.log(ary[2]);
  18. console.log(ary[3]);
  19. console.log(ary[4]);
  20. console.log(ary[5]);
  21. console.log(ary[6]);
  22. console.log(ary[7]);
  23. console.log(ary[8]);
  24. console.log(ary[9]);
  25. console.log(ary[10]);
  26. console.log(ary[11]);

? 思考：我们发现上面的代码中除了方括号中索引不同，其他的代码都是相同的。
这个时候要是有一个变量i，然后让:
第一次时i=0，
第二次i=1，
第三次i=2，
…
依次类推，每一次帮我们给i加上1，那么到什么就不加了呢，因为i的最大索引是length-1，所以当i大于length-1之后就不再加了。
然后我们把代码中的索引换成i就可以了 console.log(ary[i]);

  1. for (var i = 0; i < ary.length; i++) {
  3.   // 第一次循环: i = 0  i < 12 所以 ary[i] 是 ary[0]
  4.   // 第二次循环: i = 1  i < 12 所以 ary[i] 是 ary[1]
  5.   // ...
  6.   // i = 12 i < 12 => false 不再执行循环体，循环结束，
  7.   console.log(ary[i]);
  8. }
  9. console.log(i); // 在for的小括号里声明的变量可以在外面使用

for 循环语法

  1. 定义初始值 var i = 0
  2. 设定循环成立的条件 i < ary.length（如果条件成立执行循环，不成立则结束循环）
  3. 条件成立会执行循环体中的内容（循环体就是花括号中的代码）
  4. 执行累加 i++

var i = 0; 和i++ 可以不放到括号里，但是你写在括号里的这个变量和写在外面是一样的，在循环里i++更改的就是外面声明的这个i；

  1. var k = 0;
  2. for (;k < 5;) {
  3.   console.log(k);
  4.   k++;
  5. }
  6. console.log(k); // 在外面的k也被更改了，已经变成了5

倒着输出一个数组

  • 把i的初始值设置为ary.length - 1，然后条件是 i >=0 ; i—;
  1. var ary = [12, 23, 34];
  2. for (var i = ary.length - 1; i >= 0; i--) {
  3.   console.log(ary[i]);
  4. }

输入数组中的奇偶项

  1. // 输出数组中的奇数项
  2. // 偶数：能够被2整除的数字叫做偶数（整除：被除数除以余数商是整数且余数为0）
  3. // 奇数：不能被2整除的数字
  5. for (var j = 0; j < ary.length; j++) {
  6.   if (j % 2 === 0) {
  7.     // % 是取模运算符 ，就是取余数
  8.     // 0 % 2 余数是0
  9.     // 1 % 2 余数是1
  10.     // 3 % 2 余数是1
  11.     // 4 % 2 余数是0
  12.     console.log(ary[j]);
  13.   }
  14. }

理解 break和 continue

  • continue 跳出某一轮的循环，继续后面的循环
  1. for (var i = 0; i < 10; i++) {
  2.     if (i === 5) {
  3.         continue; // 跳出i=5的那一次循环。结束本轮循环（循环体中的continue后面的代码将不再执行，继续执行下一轮循环）
  4.     }
  5.     console.log(i)
  6. }
  • break 结束整个循环
  1. for (var i = 0; i < 10; i++) {
  2.     if (i === 5) {
  3.         break; // 结束i=5及以后所有的循环。break是强制结束整个循环，不做任何处理，同时循环体中的break后面的代码也不会执行了
  4.     }
  5.     console.log(i)
  6. }

四、for in 循环

for in循环 for in 循环是专门用来遍历对象的，可以把对象里面的属性一个一个的遍历出来。 注意：for in只能遍历对象的可枚举属性。一般浏览器默认添加的都是不可枚举的属性。例如proto****

  1. var obj = {
  2.   name: '珠峰',
  3.   age: 10
  4. };
  6. for (var k in obj) {
  7.   // k 代表每次遍历时的属性名
  8.   console.log('k ', k);
  9.   console.log('obj[k]', obj[k]);
  10. }

五、获取DOM对象

DOM对象：我们通过 js 的相关和 html 方法获取到的 html 文档中的元素

  1. document.getElementById()

通过 ID 获取页面中的元素对象 getElementById()方法

语法：document.getElementById(‘idbox’); 参数：元素id， ‘box’就是参数 返回值（函数执行过后的结果）：如果获取到，就是获取到的 DOM 元素对象，如果获取不到就是 null；

  • 解析：
    1. document 是根据 ID 查找的上下文，document 代表的是整个 HTML 文档（就是 html 标签自身及包裹的所有内容），getElementById 的上下文只能是 document
    2. 通过getElementById获取的元素是一个对象数据类型的值（里面包含了很多的内置属性，这些属性都是描述这个对象的）
  • DOM对象的属性：
    1. className: 存储的是字符串类型（string），代表的是当前元素的样式类名
    2. id: 存储的是一个字符串类型（string），当前元素的ID名
    3. innerHTML：字符串 存储的当前元素中所有的内容（包含标签，并且标签以字符串形式存在）
    4. innerText: 存储当前元素中所有的文本内容（没有元素标签）
    5. onclick: 鼠标点击事件 元素的点击事件属性，基于这个属性，我们可以给元素绑定点击事件
    6. onmouseover: 鼠标划过事件
    7. onmouseout: 鼠标划出事件
    8. style 存储当前元素的所有的【行内样式】值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法通过这个属性获取到）；
  1. var box = document.getElementById('box');
  2. console.log(box);
  1. getElementsByTagName()

通过标签名获取【元素对象集合】

  • 解析：
    1. 语法：context.getElementsByTagName(‘标签名’)
    2. 参数：标签名字符串
    3. 返回值：从 context 下面查到的指定标签名 DOM 元素对象组成的集合；这个集合中的每一项都是 DOM 元素对象；
    4. context 不是写死的，是我们指定的上下文。你想获取那个元素下面的指定标签元素集合，哪个元素就是上下文
  1. var listContainer = document.getElementById('container');
  2. var liList = listContainer.getElementsByTagName('li'); // 此时 listContainer 就是上下文
  4. console.log(liList);
  5. console.log(liList[0]);
  6. console.log(liList[1]);
  7. console.log(liList[2]);
  8. liList[0].style.backgroundColor = 'red';
  • 解析：
    1. 获取的是一个元素结合（HTMLCollection），元素集合也是一个对象数据类型的，结合和数组非常类似（数字作为索引，length代表长度），但它不是数组，而是叫做类数组。
    2. 和数组操作一样，通过[索引]的方式可以取出类数组的每一项。liList[0]获取的是第一项。
    3. liList.length 表示集合中li的数量
    4. 集合中的每一项都是元素对象，我们可以获取或者修改它的元素属性，如style、innerHTML、innerText
    5. 结合索引、length可以通过for循环把集合中的每一项获取出来。

? 思考 ? DOM对象也是对象，那么我们可以向操作普通对象那样操作它吗？比如说添加一个属性，或者修改某个属性？ DOM对象也是对象，我们也可以向操作对象的方式一样操作DOM对象

  1. for (var i = 0; i < liList.length; i++) {
  2.     var cur = liList[i];
  3.     cur.myIndex = i; // 通过自定义属性存储这个元素在元素集合中的索引
  4.     console.log(cur);
  5. }

六、隔行变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>珠峰-隔行变色</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul, li {
  12.             list-style: none;
  13.         }
  14.         .li-wrapper {
  15.             margin: 30px auto;
  16.             border: 1px solid #00b38a;
  17.             width: 500px;
  18.         }
  20.         .li-wrapper li {
  21.             height: 50px;
  22.             line-height: 50px;
  23.             text-align: center;
  24.             border-bottom: 1px darkblue dashed;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <ul id="liWrapper" class="li-wrapper">
  30.     <li>1item1</li>
  31.     <li>2item2</li>
  32.     <li>3item3</li>
  33.     <li>4item4</li>
  34.     <li>5item5</li>
  35.     <li>6item6</li>
  36.     <li>7item7</li>
  37.     <li>8item8</li>
  38.     <li>9item9</li>
  39.     <li>10item10</li>
  40. </ul>
  42. <script src="js/6-changeColor.js"></script>
  43. </body>
  44. </html>
  1. // 1. => 获取元素 liWrapper 下的 li
  3. var liWrapper = document.getElementById('liWrapper');
  4. var liList = liWrapper.getElementsByTagName('li');
  5. for (let i = 0; i < liList.length; i++) {
  6.     // 循环遍历元素对象，然后取出每一项
  7.     if (i % 2 === 0) {
  8.         // 如果是 i 是偶数
  9.         liList[i].style.backgroundColor = 'pink';
  10.     } else {
  11.         // 否则 i 是奇数
  12.         liList[i].style.backgroundColor = 'yellow';
  13.     }
  14. }