【連載】前端我的文章整理-從基礎到入門

1. 初識JS
    1.1 什麼是JS語言
    1.2 JS的三個組成部分
    1.3 script 標籤
    1.4 js中輸入輸出語句
    1.5 註釋
2. 變量
    2.1 變量的聲明與賦值
    2.2 變量的命名規則與規範
    2.3 交換兩個變量的值
3. 數據類型
    3.1 如何查看數據類型
    3.2 Number 類型
    3.3 String 類型
    3.4. boolean 類型
    3.5 undefined類型與null類型
4. 簡單數據類型轉換
    4.1 轉字符串類型
    4.2 轉數值類型
    4.3 轉布爾類型
5. JS小數運算精度丟失
    5.1 JS數字精度丟失的一些典型問題
    5.2 JS數字丟失精度的緣由
    5.3 JS數字丟失精度的解決方案
6. 運算符
    6.1 一元運算符
    6.2 邏輯運算符
    6.3 運算符的優先級
7. 選擇語句
    7.1 if..else語句
    7.2 switch..case
    7.3 三元運算符
8.循環語句
    8.1 while 循環
    8.2 do..while 循環
    8.3 for 循環
    8.4 break 和 continue
    8.5 循環語句練習
9. 數組
    9.1 建立數組
    9.2 數組的下標與長度
    9.3 數組的賦值與取值
    9.4 數組的遍歷
    9.5 數組綜合練習
10. 冒泡排序
    10.1 冒泡排序的思路
    10.2 按性能等級冒泡排序分3個等級
11. 函數
    11.1 函數的基礎知識
    11.2 函數的聲明與調用
    12.3 聲明函數的兩種方式
    11.4 函數的參數
    11.5 函數的返回值
    11.6 函數三要素
    11.7 文檔註釋
    11.8 函數綜合練習
    11.9 函數的做用域
    11.10 預解析
    11.11 遞歸函數
    11.12 回調函數
12. 對象
    12.1 對象的基本概念
    12.2 建立對象
    12.2.1 經過構造函數建立
    12.2.2 經過對象字面量
    12.2.3 關於 this
    12.3 操做對象的屬性
    12.3.1 "." 語法
    12.3.2 "[]"語法
    12.3.3 兩種方法的區別
    12.4 遍歷對象
    12.5 查看對象的類型
    12.6 批量建立對象
    12.7 值類型與引用類型
    12.8 基本包裝類型
    12.9 僞數組(類數組)
    12.10 arguments 對象
    12.11 JSON 對象
13. 內置對象
    13.1 Math 對象
    13.2 Date對象
        13.2.1 建立一個日期對象
        13.2.2 日期格式化
        13.2.3 獲取日期的指定部分
        13.2.4 時間戳
    13.3 Array 對象
        13.3.1 數組轉換成字符串 join()
        13.3.2 數組的增刪操做
        13.3.3 數組的翻轉與排序
        13.3.4 數組的拼接與截取
        13.3.5 數組查找元素
        13.3.6 清空數組
        13.3.7 數組的綜合練習
    13.4 String 對象
        13.4.1 字符串大小寫轉換的方法
        13.4.2 indexOf 查找指定字符串
        13.4.3 trim 去除空白
        13.4.4 slice 截取字符串
        13.4.5 substring 截取字符串
        13.4.6 字符串的 substr方法
        13.4.7 match 查找字符串
        13.4.8 replace 替換字符串
        13.4.9 split 切割字符串轉爲數組
    13.5 Array對象 與 String對象綜合練習

1.2 DOM操做

認識什麼是 DOM，經過什麼樣的方法去對頁面元素進行增刪改查...

JavaScript 基礎知識 - DOM篇(一)

JavaScript 基礎知識 - DOM篇(二)

1. DOM 基本概念
2. 查找 DOM 對象
    2.1 根據id獲取元素
    2.2 根據標籤名獲取元素
3. 註冊事件
    3.1 事件三要素
    3.2 註冊事件的兩種方式
    3.3 鼠標點擊事件
    3.4 鼠標通過、離開事件
    3.5 表單得到、失去焦點事件
    3.6 其餘觸發事件彙總
4. 優雅降級和漸進加強
5. 屬性操做
    5.1 普通標籤屬性
    5.2 表單屬性操做
    5.3 標籤自定義屬性
        attribute系列
    5.4 排他思想(tab欄的主要思想)
    5.5 tab 欄切換
6. 標籤內容
    6.1 innerHTML
    6.2 innerText
    6.3 innerText 的兼容性問題
7. 節點操做
    7.1 節點的屬性
    7.2 節點層次
        7.2.1 孩子節點
        7.2.2 兄弟節點
        7.2.3 父節點
8. 樣式操做
    8.1 樣式操做注意點
    8.2 樣式操做案例
9. 動態建立元素
    9.1 克隆節點
    9.2 添加節點
        9.2.1 appendChild
        9.2.2 insertBefore
    9.3 建立節點
        9.3.1 document.write(基本不用)
        9.3.2 innerHTML
        9.3.3 createElement
    9.4 刪除節點
    9.5 動態建立元素綜合練習

1.3 BOM操做

本篇最主要的知識點就是「定時器」，後面無論是動畫仍是輪播圖特效都會用到定時器。

JavaScript 基礎知識 - BOM篇

1. BOM 基本概念
2. window 對象
    2.1 window.onload
    2.2 window.open
    2.3 window.close
3. 定時器
    3.1 延時定時器
    3.2 間歇定時器
    2.3 定時器綜合練習
4. Location對象
    4.1 經常使用的屬性和方法
5. Navigator 對象
6. Screen 對象
7. History 對象
8. javascript 彈框
9. javascript Cookie

2. JS 進階篇

2.1 原生 js 特效

經過原生 js實現動畫，再去拓展一些特效：「輪播圖」、「手風琴」...

JavaScript 進階知識 - 特效篇(一)

JavaScript 進階知識 - 特效篇(二)

1. offset 系列
    1.1 offsetWidth 和 offsetHeight
    1.2 offsetParent
    1.3 offsetLeft與offsetTop
2. 勻速動畫框架
    2.1 勻速動畫初體驗
    2.2 勻速動畫函數封裝
3. 輪播圖
    3.1 簡單輪播圖
    3.2 左右焦點輪播圖
    3.3 無縫輪播圖
    3.4 完整版輪播圖
4. 緩動動畫框架
    4.1 緩動動畫初體驗
    4.2 緩動動畫函數封裝
    4.3 獲取元素計算後的樣式
    4.4 緩動動畫修改多個樣式
    4.5 緩動動畫修復定時器bug
    4.6 緩動動畫兼容其它樣式屬性
    4.7 緩動動畫添加回調函數
5. 筋斗雲案例
6. 右下角關閉廣告案例
7. 手風琴案例
8. 旋轉木馬案例
9. 三大系列
    9.1 offset 系列
    9.2 scroll 系列
    9.3 client 系列
    9.4 screen 系列
    9.5 三大系列的區別
10. 事件對象
    10.1 事件對象的概述
    10.2 獲取事件對象
    10.3 事件對象的經常使用屬性
    10.4 pageX與pageY的兼容性
    10.5 案例：鼠標跟隨
    10.6 案例：拖拽效果
    10.7 案例：放大鏡
11. 註冊事件
    11.1 on + 事件名稱 方式
    11.2 addEventListener 方式
12. 事件冒泡和事件捕獲
    12.1 事件冒泡
    12.2 阻止事件冒泡
    12.3 事件捕獲
    12.4 事件流
    12.5 鍵盤事件
    12.6 案例：彈幕效果
13. 瀑布流
    14. 正則表達式
    14.1 建立正則表達式
    14.2 元字符
    14.3 正則內部類
    14.4 正則邊界
    14.5 量詞
    14.6 括號總結
    14.7 正則表達式綜合案例
    14.8 正則補充知識點

2.2 深刻理解 Ajax

簡單介紹什麼是服務器，而且教你怎麼搭建一臺本地運行的服務器，最後詳細介紹 Ajax的操做過程。

JavaScript 進階知識 - Ajax篇

1. 服務器端技術基礎
    1.1 服務器
    1.2 客戶端
    1.3 軟件開發架構
    1.4 網絡基礎
2. Web 服務器
    2.1 Web服務器的做用
    2.2 AMP 集成環境
    2.3 Web服務器軟件的安裝
    2.4 安裝的建議與問題
    2.5 Wamp服務器的使用
    2.6 Wamp服務器的簡單配置
3. HTTP傳輸協議
    3.1 請求報文
    3.2 響應報文
4. Ajax 編程
    4.1 Ajax的基本概念
    4.2 建立Ajax
    4.3 Ajax實現一個簡單的聊天室
    4.4 複雜的數據格式介紹
    4.4.1 XML數據格式
    4.4.2 JSON數據格式
    4.5 Ajax代碼的封裝
5. jQuery中的Ajax操做
6. 模板引擎的使用
    6.1 模板引擎的使用步驟
    6.2 模板引擎的其餘用法
    6.3 模板引擎原生語法
    6.4 案例：Ajax模擬請求json數據案例
    6.5 案例：Ajax提供數據實現瀑布流
7. Ajax請求模擬軟件
8. 同源策略
    8.1 什麼是同源策略
    8.2 同源策略的目的
    8.3 限制範圍
9. 跨域
    9.1 JSONP
    9.2 WebSocket

2.3 js 高級知識

本篇文章主要介紹的是 js高級階段的知識點，主要有：面向對象編程思想、原型、閉包、遞歸。函數的 apply和 call調用模式...

JavaScript 進階知識 - 高級篇

1.異常處理
    1.1異常捕獲
    1.2拋出異常
    1.3異常的傳遞機制
2.面向對象編程
    2.1 面向過程和麪向對象的的對比
    2.2 面向對象編程舉例
    2.3 面向對象的三大特性
    2.4 建立對象的方式
    2.5 面向對象案例
3.原型
    3.1 傳統構造函數存在問題
    3.2 原型的概念
    3.3 原型的使用
    3.4 __proto__屬性
    3.5 constuctor屬性
    3.6 原型繼承
4.原型鏈
    4.1 什麼是原型鏈
    4.2 原型鏈的拓展
    4.3 屬性的搜索原則
5.Object.prototype成員介紹
    5.1 constructor 屬性
    5.2 hasOwnProperty 方法
    5.3 isPrototypeOf 方法
    5.4 propertyIsEnumerable 方法
    5.5 toString 和 toLocalString 方法
    5.6 valueOf 方法
6.靜態方法和實例方法
7.做用域
    7.1 塊級做用域
    7.2 詞法做用域
    7.3 變量提高（預解析）
    7.4 做用域鏈
8.Function
    8.1 建立函數的幾種方式
    8.2 Function 構造函數建立函數
    8.3 Function 的使用
    8.4 Function 的原型鏈結構
    8.5 完整的原型鏈
9.arguments對象
10. 函數的四種調用模式
    10.1 函數模式
    10.2 方法模式
    10.3 構造器模式
    10.4 上下文（借用方法）模式
    10.5 面試題分析
11.遞歸
    11.1 什麼是遞歸
    11.2 化歸思想
    11.3 遞歸練習
12. JS 內存管理
    12.1 內存生命週期
    12.2 垃圾回收
13. 閉包
    13.1 閉包的概念
    13.2 閉包模型
    13.3 閉包的使用
    13.4 閉包裏的緩存
14. 沙箱模式
    14.1 沙箱模式的做用
    14.2 沙箱模式模型
    14.3 沙箱模式應用
    14.4 沙箱模式的說明
15. 工廠模式

2.4 jQuery 使用方法詳解

雖說 jQuery的黃金時代已通過去了，可是不缺少一些公司還在使用，本篇做爲一篇「速查字典」仍是能夠的。

jQuery 入門詳解（一）

jQuery 入門詳解（二）

1. jQuery基本概念
    1.1 什麼是 jQuery？
    1.2 jQuery 的版本
    1.3 jQuery 初體驗
    1.4 jQuery對象 和 DOM對象
    1.5 jQuery對象 和 DOM對象相互轉換
2. jQuery 選擇器
    2.1 基本選擇器
    2.2 層級選擇器
    2.3 過濾選擇器
    2.4 表單選擇器
    2.5 篩選選擇器
    2.6 幾個小案例
3. jQuery 節點操做
    3.1 查找節點
    3.2 建立節點
    3.3 添加節點
    3.4 刪除節點
    3.5 克隆節點
    3.6 替換節點
    3.7 包裹節點
    3.8 遍歷節點
    3.9 節點操做案例
4. jQuery 屬性操做
    4.1 attr 操做
    4.2 prop 操做
    4.3 屬性操做案例
5. jQuery 樣式操做
    5.1 css 操做
    5.2 class 操做
    5.4 常見的樣式
    5.5 關於元素定位的經常使用方法
    5.6 樣式操做案例
6. jQuery 設置和獲取HTML、文本和值
    6.1 html()方法
    6.2 text()方法
    6.3 val()方法
7. jQuery 裏的事件機制
    7.1 加載 DOM
    7.2 事件綁定
    7.3 合成事件
    7.4 事件冒泡
    7.5 事件對象的屬性
    7.6 移除事件
    7.7 模擬操做
    7.8 事件委託
    7.9 其餘用法
8. jQuery 動畫
    8.1 show()方法 和 hide()方法
    8.2 fadeIn()方法 和 fadeOut()方法
    8.3 slideUp()方法 和 slideDown()方法
    8.4 自定義動畫方法 animate()
    8.5 其餘動畫方法
    8.6 jQuery 動畫案例
9. jQuery 裏的 Ajax 操做
    9.1 load()方法
    9.2 $.get()方法和$.post()方法
    9.3 $.ajax()方法
    9.3 jQuery中的serialize和serializeArray方法
10. jQuery 插件的使用
    10.1 顏色插件-jQuery.color.js
    10.2 懶加載插件- jquery.lazyload.js
    10.3 jQuery UI 插件
    10.4 jQuery自定義插件
    10.5 jQuery自定義插件-瀑布流插件

3. HTML5 & CSS3

3.1 HTML5 詳解

介紹了新增的一些特性，一些操做音頻視頻的 API，以及網絡狀態、地理位置和 WEB存儲。

HTML5 入門詳解

1. 認識HTML5
2. 語法規範
3. 語義化標籤
4. HTML5 瀏覽器支持
5. 表單
    5.1 表單控件
    5.2 表單元素
    5.3 表單屬性
    5.4 表單事件
    5.5 表單樣式
6. 多媒體標籤
    6.1 音頻
    6.2 視頻
    6.3 音頻/視頻方法
7. DOM 擴展
    7.1 獲取元素
    7.2 類名操做
    7.3 自定義屬性
8. 網絡狀態
9. 地理定位
    9.1 獲取地理信息方式
    9.2 隱私
    9.3 使用地理定位
    9.4 百度地圖的用法
10. WEB 存儲
    10.1 特性
    10.2 方法詳解
    10.3 sessionStorage
    10.4 localStorage
    10.5 差別性
11. 文件讀取
12. 拖拽

3.2 CSS3 詳解

css2的升級，添加了媒體查詢、 Flex佈局、 2D & 3D轉換等新特性。

CSS3 入門詳解（一）

CSS3 入門詳解（二）

1.選擇器
    1.1 屬性選擇器
    1.2 僞類選擇器
    1.3 僞元素選擇器
2. 顏色
    2.1 RGBA
    2.2 HSLA
    2.3 關於 CSS 的透明度
3. 文本陰影
4. 盒模型
5. 邊框
    5.1 邊框圓角
    5.2 邊框陰影
6. 背景
    6.1 background-size
    6.2 background-origin
    6.3 background-clip
    6.4 多背景
7. 漸變
    7.1 線性漸變
    7.2 徑向漸變
8. 過渡
    8.1 幀動畫
    8.2 補間動畫
9. 2D轉換
    9.1 位移
    9.2 縮放
    9.3 旋轉
    9.4 傾斜
    9.5 矩陣
10. 3D 轉換
    10.1 3D 座標軸
    10.2 透視（perspective）
    10.3 3D呈現（transform-style）
    10.4 3D呈現案例：3D輪播圖
    10.5 backface-visibility
11. 動畫
    11.1 如何實現動畫
    11.2 動畫關鍵屬性
    11.3 動畫案例
12. 伸縮佈局
    12.1 什麼是伸縮佈局
    12.2 基本概念
    12.3 flex-direction屬性
    12.4 flex-wrap 屬性
    12.5 flex-flow 屬性
    12.6 justify-content 屬性
    12.7 align-items 屬性
    12.8 align-content 屬性
    12.9 Order 屬性
    12.10 flex-grow 屬性
    12.11 flex-shrink 屬性
    12.12 flex-basis 屬性
    12.13 flex 屬性
    12.14 align-self 屬性

4. 前端框架

4.1 three.js 框架

canvas的升級框架，功能更增強大。

three.js 入門詳解(一)

three.js 入門詳解(二)

1. 概述
    1.1 什麼是WebGL？
    1.2 初識three.js
    1.3 前期準備
        1.3.1 下載地址
        1.3.2 目錄結構
        1.3.3 配置開發環境
2. 開始使用Three.js
    2.1 渲染器(renderer)
    2.2 場景(scene)
    2.3 照相機(camera)
    2.4 建立一個物體
    2.5 渲染
    2.6 完整代碼
3. Three.js功能概覽
4. 照相機
    4.1 什麼是照相機？
    4.2 正交投影和透視投影
    4.3 正交投影照相機
        4.3.1 參數介紹
        4.3.2 示例代碼
    4.4 透視投影照相機
        4.4.1 參數介紹
        4.4.2 示例代碼
5. 點、線、面
    5.1 3D世界的組成
    5.2 在Three.js中定義一個點
    5.3 點的操做
    5.4 繪製一條線段
    5.5 線條的深度理解
    5.6 繪製網格線
6. 幾何形狀
    6.1 基本幾何形狀
        6.1.1 立方體
        6.1.2 平面
        6.1.3 球體
        6.1.4 圓形
        6.1.5 圓柱體
        6.1.6 正四面體、正八面體、正二十面體
        6.1.7 圓環面
        6.1.8 圓環結
    6.2 文字形狀
        6.2.1 下載使用
        6.2.2 參數介紹
        6.2.3 示例代碼
    6.3 自定義形狀
7. 材質
    7.1 基本材質
    7.2 Lambert 材質
    7.3 Phong材質
    7.4 法向材質
    7.5 材質的紋理貼圖
        7.5.1 單張圖像應用於長方體
        7.5.2 六張圖像應用於長方體
        7.5.3 棋盤
8. 網格
    8.1 建立網格
    8.2 修改屬性
        8.2.1 材質
        8.2.2 位置、縮放、旋轉
9. 動畫
    9.1 實現動畫效果
        9.1.1 動畫原理
        9.1.2 setInterval方法
        9.1.3 requestAnimationFrame方法
    9.2 使用stat.js記錄FPS
    9.3 彈球案例
10. 外部模型
    10.1 支持格式
    10.2 無材質的模型
    10.3 有材質的模型
        10.3.1 代碼中設置材質
        10.3.2 建模軟件中設置材質
11. 光與影
    11.1 環境光(AmbientLight)
    11.2 點光源(PointLight)
    11.3 平行光(DirectionalLight)
    11.4 聚光燈(SpotLight)
    11.5 陰影
補充問題
    本地服務器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。