HTML5+CSS3技術（十四）帶你體驗js框架jQuery
「AWEI」HTML5+CSS3技術（十四）用戶交互js基礎及更容易上手的js框架-->jQuery
javaScript 闡述
什麼是javaScript?
JavaScript是網景（Netscape）公司開發的一種跨平臺，基於客戶端瀏覽器、面向（基於）對象（Object）、事件驅動（eventDriven）式的網頁腳本語言；
JavaScript的前身叫liveScript，是Netscape公司的腳本語言。後來在Sun公司推出著名的java語言之後，NC公司和Sun公司於1995年一起重新設計了LiveScript,並重新命名JavaScript;
JavaScript的主要特點：
-->簡單性：JavaScript語句可以直接嵌入到HTML文檔彙總，其語句的解釋執行由WEB瀏覽器
-->基於對象：儘管JavaScript語言不具有創建對象的能力，但它可直接調用其自身提供的對象；
-->事件驅動：JavaScript採用事件驅動方式，可對用戶的鼠標單擊、移動窗口、菜單選擇待事件產生相應的響應；
-->平臺無關性：JavaScript腳本語言的依賴於WEB瀏覽器，而與操作環境無關；
-->安全性: JavaScript腳本語言是通過WEB瀏覽器處理的，不能修改其他晚間的內容；
JavaScript的應用場合：
-->交互式用戶界面
-->少量數據查找
-->表單驗證
-->表數據交互
-->多框架交互
-->動態HTML
JavaScript 編寫規則
-->JavaScript區分大小寫；
-->JavaScript腳本程序必須嵌入在HTML文件中
-->JavaScript腳本程序中不能包含HTML標記代碼；（雙引號）
-->每行寫一條腳本語句；
-->程序塊用{and}符號包圍，如函數、條件、循環；
-->語句末可以加分號，每句結束用”;”;
如何將JavaScript嵌入到html頁面中？
Js代碼用<script>調用時，有兩種情況：
-->放在<head></head> 標籤內
-->放在<body></body> 標籤內
對於一般的js文件或者代碼，放在哪裡的確是沒有影響，放在兩個地方都可以。這類js文件是不需要引入什麼參數來進行操作的。
放到<head></head> 標籤內
放在<body></body> 標籤內
html加載順序是從上到下，其實影響的並不是head或body標籤，而是執行的順序，如果先寫<body></body>再寫<head></head>，就會先執行body的內容，案例：
頁面加載的時候，會先彈出two，再彈出one。交換<body></body><head></head>順序，就會得出相反的順序。
從JavaScript對頁面下載性能方向考慮：由於腳本會阻塞其他資源的下載（如圖片等）和頁面渲染，直到腳本全部下載並執行完成後，頁面的渲染才會繼續，因此推薦將所有的<script>標籤儘可能放到<body>標籤的底部，以儘量減少對整個頁面下載的影響。
原因：如果JavaScript文件是從HTML文檔的<head>部分用<script>標籤調用的，它將在HTML文 檔之前加載到瀏覽器裡。同樣如果<script>標籤位於文檔底部</body>之前，就不能保證哪個文件 最先結束加載（瀏覽器可能一次加載多個）。因為腳本加載時文檔可能不完整，所以模型也不完整。”
JavaScript 的變量：
變量是存儲信息的容器；
實例：var x=2;
Var y=3;
Var z=x+y;
就像代數那樣
X=2;
Y=3;
Z=x+y;
在代數中，我們使用字母（比如 x）來保存值（比如 2）。
通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 5。
在 JavaScript 中，這些字母被稱為變量。
提示：您可以把變量看做存儲數據的容器。
JavaScript 變量
與代數一樣，JavaScript 變量可用於存放值（比如 x=2）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）
提示：JavaScript 語句和 JavaScript 變量都對大小寫敏感。
變量命名規則：
-->必須是一個有效的變量：以字母開頭，中間可以出現數字如：demo1、demo2等；除下劃線（_）作為連接字符外，變量名稱不能有空格、（+）、（-）、（，）或其他字符
-->不能使用JavaScript中的掛件自作為變量；在JavaScript中定義了40多個關鍵字，關鍵字是JavaScript內部使用的，不能作為變量的名稱；
--> JavaScript區分大小寫，即變量sfjFar、sfJFar是不同的變量
聲明變量：
聲明：Var a; 賦值：a=10;
“var” ---用於聲明變量的關鍵字
“a“ –變量名
同時聲明和初始化變量： var a=10;
聲明多個變量：var x,y,z=10;
JavaScript 數據類型
-->數值（整數和實數） var y=123;
-->字符串型（用“”號或’’括起來的字符或數值 var x=”abc” ; var x=’123’;
-->布爾型（使True或False表示） var tt=true; var nn=false;
-->undefined var x=abc;
-->空值 var x=null;
在JavaScript的基本類型中的數據可以是常量，也可以變量；
注意：數值用來做計算；字符用來做描述；
JavaScript 常量
--> 整形常量：javascript的常量通常又稱字面常量，它是不能改變的數據。其整形常量可以使用十六進制、八進制、十進制表示其值；
--> 實型常量：實型常量由整數部分加小數部分表示；如12.38,13.67；可以使用科學或標準方法表示：5E7、4e5;
--> 布爾值:兩種狀態：true或false；用來說明或代表一種狀態或標誌，以說明操作流程；它與c++是不一樣的，c++可以用1或0表示其狀態；
--> 字符型常量：使用單引號（‘）或雙引號（“）括起來的一個或幾個字符；如”天咯昂“、”345“等
--> 空值：JavaScript中有一個空值null，表示什麼也沒有；如試圖引用沒有定義的變量，則返回一個null值
--> 特殊字符：JavaScript中同樣以有些以反斜槓（\）開頭的不可顯示的特殊字符；通常稱為控制字符；
JavaScript 算數運算符
算術運算符用於執行變量與/或值之間的算術運算。
給定 y=5，下面的表格解釋了這些算術運算符：
JavaScript 賦值運算符
賦值運算符用於給 JavaScript 變量賦值。
給定 x=10 和 y=5，下面的表格解釋了賦值運算符：
比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等。
給定 x=5，下面的表格解釋了比較運算符：
例子：
預覽結果：
注意：== :判斷結果值是否相等；===:判斷結果值 和類型 是否嚴格相等
邏輯運算符
邏輯運算符用於測定變量或值之間的邏輯。
給定 x=6 以及 y=3，下表解釋了邏輯運算符：
&&：同時為true，結果才為true;
||:有一個值為true，結果就位true;
!: !true=false; !false=true;
JavaScript 語法結構：
-->順序結構
從上到下 按順序執行
-->分支結構
If 語句
只有當指定條件為 true 時，該語句才會執行代碼。
注意：請使用小寫的 if。使用大寫字母（IF）會生成 JavaScript 錯誤！
If...else 語句
請使用 if....else 語句在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。
If...else if...else 語句
使用 if....else if...else 語句來選擇多個代碼塊之一來執行。
switch語句用於基於不同的條件來執行不同的動作。
JavaScript Switch 語句
請使用 switch 語句來選擇要執行的多個代碼塊之一。
工作原理：首先設置表達式 n（通常是一個變量）。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。
-->循環結構
不同類型的循環
JavaScript 支持不同類型的循環：
for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
jQuery 框架:
官網下載：http://jquery.com
下載歷史版本：
例子：
初入IT世界的小白，歡迎大神留言交流，你的互動，是我成長的動力；
如果覺得分享內容還不錯，就推薦到你的朋友圈吧，讓更多人一起交流和分享;
文章某公眾號同步更新！ --->名字同頭條號
轉載聯繫筆者！