基礎教程 3. JS 邏輯運算符和 DOM 對象

時間  2021-08-12
標籤 javascript css html java 數組 瀏覽器 markdown app 函數 oop 欄目 JavaScript 简体版
原文   原文鏈接

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰javascript

1、邏輯運算符 || 和 &&

一、 || 表示或者，二者中有一個爲true，就返回true

if (0 || 1) {
  console.log('true')
}
if (0 || false) {
  console.log('false')
}
if (true || 0) {
  console.log(true);
}
複製代碼

2 && 是而且，兩個值中必須兩個都是true，才返回true

if (0 && 1) {
  console.log(1, '0 && 1')
}
if (0 && false) {
  console.log(2, '0 && false')
}
if (true && 0) {
  console.log(3, 'true && 0');
}
複製代碼

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

  • || 若是第一個爲true就返回第一個，若是第一個不爲true就返回第二個
var r1 = 1 || 0;
console.log(r1);
var r2 = 0 || false;
複製代碼
  • && 若是第一個爲true返回第二個，若是第一個爲false返回值第一個
var r3 = 1 && 0;
var r4 = false && 0;
console.log(r3);
console.log(r4);
複製代碼

2、==和===的區別

== 在比較時等號左右兩側數據類型不一樣時會先轉成相同數據類型，再比較

  1. == 是相對比較； === 是絕對比較
  • 1.1 字符串 == 數字 ；字符串轉換成數字
console.log(1 == '1'); // true

複製代碼
  • 1.2 布爾值 == 數字; 布爾值轉成數字
console.log(1 == true); // true;

複製代碼
  • 1.3 布爾值 == 字符串; 布爾值轉數字，字符串也轉成數字，而後進行比較；
console.log(false == '0'); // true
複製代碼

  • 1.4 null == undefined // true, null 和undefined和其餘數據類型比較都是falsecss

  • 1.5 對象 == 對象; 比較的是空間地址，地址相同返回truehtml

console.log({} == {}); // false
複製代碼
  • 1.6 對象 == 字符串; 對象轉成字符串，而後和字符串比較
console.log({} == '[object Object]'); // true
複製代碼
  • 1.7 對象 == 布爾值；對象先轉成字符串，再轉數字，布爾值也轉成數字，在比較這兩個數字
console.log({} == true); // false
console.log([] == false); // true
複製代碼
  • 1.8 對象 == 數字；對象先轉成字符串，而後再轉成數字
console.log({} == 1); // false
console.log([] == 0); // true
複製代碼
  • 特殊：NaN和NaN 永遠不相等
console.log(NaN == NaN); // NaN和NaN 永遠不相等

複製代碼

3、for循環

for 循環 (for loop) 語句：按照必定的規律，重複去作某一件事情，此時就須要使用循環語句.java

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

/* [ 0: 1, 1: 2, 2: 3, ... 11: 12 length: 12 // length屬性的值表示數組有多少項 ] */

// 把數組裏面的每一項都輸出出來：

console.log(ary[0]);
console.log(ary[1]);
console.log(ary[2]);
console.log(ary[3]);
console.log(ary[4]);
console.log(ary[5]);
console.log(ary[6]);
console.log(ary[7]);
console.log(ary[8]);
console.log(ary[9]);
console.log(ary[10]);
console.log(ary[11]);
複製代碼

? 思考：咱們發現上面的代碼中除了方括號中索引不一樣，其餘的代碼都是相同的。 這個時候要是有一個變量i，而後讓: 第一次時i=0， 第二次i=1， 第三次i=2， ... 依次類推，每一次幫咱們給i加上1，那麼到什麼就不加了呢，由於i的最大索引是length-1，因此當i大於length-1以後就再也不加了。 而後咱們把代碼中的索引換成i就能夠了 console.log(ary[i]);數組

for (var i = 0; i < ary.length; i++) {

  // 第一次循環: i = 0 i < 12 因此 ary[i] 是 ary[0]
  // 第二次循環: i = 1 i < 12 因此 ary[i] 是 ary[1]
  // ...
  // i = 12 i < 12 => false 再也不執行循環體，循環結束，
  console.log(ary[i]);
}
console.log(i); // 在for的小括號裏聲明的變量能夠在外面使用
複製代碼

for 循環語法

  1. 定義初始值 var i = 0
  2. 設定循環成立的條件 i < ary.length（若是條件成立執行循環，不成立則結束循環）
  3. 條件成立會執行循環體中的內容（循環體就是花括號中的代碼）
  4. 執行累加 i++

var i = 0; 和i++ 能夠不放到括號裏，可是你寫在括號裏的這個變量和寫在外面是同樣的，在循環裏i++更改的就是外面聲明的這個i；瀏覽器

var k = 0;
for (;k < 5;) {
  console.log(k);
  k++;
}
console.log(k); // 在外面的k也被更改了，已經變成了5
複製代碼

倒着輸出一個數組

  • 把i的初始值設置爲ary.length - 1，而後條件是 i >=0 ; i--;
var ary = [12, 23, 34];
for (var i = ary.length - 1; i >= 0; i--) {
  console.log(ary[i]);
}
複製代碼

輸入數組中的奇偶項

// 輸出數組中的奇數項
// 偶數：可以被2整除的數字叫作偶數（整除：被除數除以餘數商是整數且餘數爲0）
// 奇數：不能被2整除的數字

for (var j = 0; j < ary.length; j++) {
  if (j % 2 === 0) {
    // % 是取模運算符 ，就是取餘數
    // 0 % 2 餘數是0
    // 1 % 2 餘數是1
    // 3 % 2 餘數是1
    // 4 % 2 餘數是0
    console.log(ary[j]);
  }
}
複製代碼

理解break和continue

  • continue 跳出某一輪的循環，繼續後面的循環
for (var i = 0; i < 10; i++) {
   if (i === 5) {
      continue; // 跳出i=5的那一次循環。結束本輪循環（循環體中的continue後面的代碼將再也不執行，繼續執行下一輪循環）
   }
   console.log(i)
}
複製代碼
  • break 結束整個循環
for (var i = 0; i < 10; i++) {
   if (i === 5) {
      break; // 結束i=5及之後全部的循環。break是強制結束整個循環，不作任何處理，同時循環體中的break後面的代碼也不會執行了
   }
   console.log(i)
}
複製代碼

4、for in 循環

for in循環 for in 循環是專門用來遍歷對象的，能夠把對象裏面的屬性一個一個的遍歷出來。 注意：for in只能遍歷對象的可枚舉屬性。通常瀏覽器默認添加的都是不可枚舉的屬性。例如__proto__markdown

var obj = {
  name: '江外',
  age: 10
};

for (var k in obj) {
  // k 表明每次遍歷時的屬性名
  console.log('k ', k);
  console.log('obj[k]', obj[k]);
}
複製代碼

5、獲取DOM對象

DOM對象：咱們經過js的相關和html方法獲取到的html文檔中的元素app

  1. document.getElementById()

經過ID獲取頁面中的元素對象 getElementById()方法函數

語法：document.getElementById('idbox'); 參數：元素id， 'box'就是參數 返回值（函數執行事後的結果）：若是獲取到，就是獲取到的DOM元素對象，若是獲取不到就是null；oop

  • 解析：
    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 存儲當前元素的全部的【行內樣式】值（獲取和操做的都只能是寫在標籤上的行內樣式，寫在樣式表中的樣式，沒法經過這個屬性獲取到）；
var box = document.getElementById('box');
console.log(box);
複製代碼
  1. getElementsByTagName()

經過標籤名獲取【元素對象集合】

  • 解析：
    1. 語法：context.getElementsByTagName('標籤名')
    2. 參數：標籤名字符串
    3. 返回值：從context下面查到的指定標籤名DOM元素對象組成的集合；這個集合中的每一項都是DOM元素對象；
    4. context不是寫死的，是咱們指定的上下文。你想獲取那個元素下面的指定標籤元素集合，哪一個元素就是上下文
var listContainer = document.getElementById('container');
var  liList = listContainer.getElementsByTagName('li'); // 此時listContainer 就是上下文

console.log(liList); //
console.log(liList[0]);
console.log(liList[1]);
console.log(liList[2]);
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對象

for (var i = 0; i < liList.length; i++) {
   var cur = liList[i];
   cur.myIndex = i; // 經過自定義屬性存儲這個元素在元素集合中的索引
   console.log(cur);
}
複製代碼

6、隔行變色

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>江外-隔行變色</title>
   <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .li-wrapper { margin: 30px auto; border: 1px solid #00b38a; width: 500px; } .li-wrapper li { height: 50px; line-height: 50px; text-align: center; border-bottom: 1px darkblue dashed; } </style>
</head>
<body>
<ul id="liWrapper" class="li-wrapper">
   <li>1item1</li>
   <li>2item2</li>
   <li>3item3</li>
   <li>4item4</li>
   <li>5item5</li>
   <li>6item6</li>
   <li>7item7</li>
   <li>8item8</li>
   <li>9item9</li>
   <li>10item10</li>
</ul>

<script src="js/6-changeColor.js"></script>
</body>
</html>

複製代碼
// 1. => 獲取元素 liWrapper下的li

var liWrapper= document.getElementById('liWrapper');
var liList = liWrapper.getElementsByTagName('li');
for (let i = 0; i < liList.length; i++) {
   // 循環遍歷元素對象，而後取出每一項
   if (i % 2 === 0) {
      // 若是是i是偶數
      liList[i].style.backgroundColor = 'pink';
   } else {
      // 不然i是奇數
      liList[i].style.backgroundColor = 'yellow';
   }
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程