頁面由三部分組成

• HTML 超文本編輯
• CSS 層疊樣式表
• JS 輕量級腳本語言

JS由三部分組成

• ECMAScript js[語法] 變量 條件 判斷 循環(huán) 數(shù)據(jù)類型；兼容性很好 沒問題
• DOM document object model 文檔對象模型 增刪改查 兼容性問題很多
• BOM browser object model 瀏覽器對象模型 不兼容 不能解決

常用快捷鍵

• 復(fù)制 ctrl + D;

• 強(qiáng)制換行 ctrl+enter；command+enter;

• 快速生成列表 ul>li*6>a{列表$} + Tab;

• 收縮代碼 ctrl + -/+;

• div.box + Tab;

• -#header+#main+#footer;

• -#header+(#main>.left.right)+#footer;

• w200+h200+bg#ccc +Tab;
  width: 200px;
  height: 200px;
  background: #cccccc;

• c +Tab
  color: #000;

• psa +Tab
  position: absolute;

• psr +Tab
  position: relative;

• psf +Tab
  position: fixed;

• mg20 +Tab
  margin:20px;

• pa20 +Tab
  padding: 20px;

• mgl/r/t/b/20 +Tab
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;

• pa/r/t/b20 + Tab

        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
  

• dib +Tab
  display: inline-block;

• di +Tab
  display: inline;

• db +Tab
  display: block;

• fz20 + tab;
  font-size: 20px;

• lh30px + Tab;
  line-height:30px ;

• fl + tab ;
  float: left;

• fr + tab ;
  float: right;

• tac+ tab;
  text-align: center;

• alt 選兩個(gè)

• script:src + tab

CSS 引入方式

• 行內(nèi)
• 內(nèi)嵌
• 外聯(lián)
• 導(dǎo)入

JS 引入方式

• 行內(nèi)
• 內(nèi)嵌 script標(biāo)簽內(nèi)部
• 外鏈 script:src + tab 引入

js思路

• 拿到誰 獲取元素
• 添加事件
• 做什么事

JS作用

• JS操作CSS

對象具有的兩個(gè)特征：屬性和方法；

屬性 和 方法的區(qū)別 ：屬性沒括號 ，方法有括號；

this 是誰:

• 當(dāng)函數(shù)被調(diào)用的時(shí)候，點(diǎn)前面是誰 ，this就是誰;
• 當(dāng)函數(shù)被調(diào)用的時(shí)候，沒有點(diǎn) ，this就是window;
• 當(dāng)元素身上的事件被觸發(fā)時(shí)，會觸發(fā)一個(gè)函數(shù)，函數(shù)中的this指向當(dāng)前被觸發(fā)事件的這個(gè)元素

輸出方式--調(diào)試代碼

• alert 彈出框
• confirm() 彈出框 返回值是布爾值 true / false
• console.log() 打印 在控制臺
• console.dir() 打印屬性和方法
• console.table() 把對象以表格的形式輸出 -- 基本不用
• document.write 在頁面輸出
• innerHTML 輸出元素包裹的內(nèi)容 innerText 輸出文本

命名方式：匈牙利命名法 又稱 駝峰式命名法

• 除了第一個(gè)單詞外 從第二個(gè)單詞開始 每個(gè)單詞首字母大寫
• 常用的命名前綴
  • a 數(shù)組 aDiv 獲取一組元素對象 arr array ary
  • o 對象 oDiv 獲取一個(gè)元素對象 obj普通對象
  • s 字符串 string
  • n 數(shù)字 number
  • b 布爾值 boolean

數(shù)據(jù)類型

1.基本數(shù)據(jù)類型
五種:
- string
- number
- boolean
- null
- undefined
2.引用數(shù)據(jù)類型
兩類:
- 對象數(shù)據(jù)類型 array 普通對象object Date RegExp ...
- 函數(shù)數(shù)據(jù)類型 function(){}
3.區(qū)別：
- 基本數(shù)據(jù)類型 是對值的引用
- 引用數(shù)據(jù)類型 是對地址的引用

循環(huán)

• for 循環(huán)四部曲
  1.定義
  2.條件
  3.語句
  4.自增

  
  
  

  for循環(huán)圖解

• 判斷

  • if ...else if...else

    if(num==0){
       alert('0')
    }else if(num==1){
        alert('1')
    }else if(num==2){
        alert('2')
    }else{
        alert('3')
    }
  

  • switch...case..break

  switch(num){
          case 0:
              alert(0);
              break;
          case 1:
              alert(1);
              break;
          case 2:
              alert(2);
              break;
          default:
              alert(3);
              break;
      }