JavaScript: (Ps:參考 W3school)

JS的組成:

ECMAScript : 核心部分 ,定義js的語法規範

DOM: document Object Model 文件物件模型 , 主要是用來管理頁面的

BOM : Browser Object Model 瀏覽器物件模型, 前進,後退,頁面重新整理, 位址列, 歷史記錄, 螢幕寬高

JS的語法:

變數弱型別: var i = true

區分大小寫

語句結束之後的分號 ,可以有,也可以沒有

寫在script標籤

JS的資料型別:

• 基本型別
  • string
  • number
  • boolean
  • undefine
  • null
• 引用型別
  • 物件, 內建物件
• 型別轉換
  • js內部自動轉換

JS的運算子和語句:

• 運算子和java 一樣
  • “===” 全等號: 值和型別都必須相等
  • == 字串匹配, 值相等就可以了
• 語句和java 一樣

JS的輸出

• alert() 直接彈框

• document.write() 向頁面輸出

• console.log() 向控制檯輸出

• innerHTML: 向頁面輸出

• 獲取頁面元素: document.getElementById(“id的名稱”);

JS的開發步驟

1. 確定事件
   1.DOMEvent, onclick,onload,onfocus,onblur,onunload等
2. 通常事件都會出發一個函式
3. 函式裡面通常都會去操作頁面元素,
做一些互動動作
    var a = document.getElementById("ID").value;
a.innerHTML= "<><>";
a.innerText="ohhh";
 

DOM:

什麼是DOM:

     Document Object Model : 管理我們的文件   增刪改查規則 

HTML中的DOM操作：

一些常用的 HTML DOM 方法：
  getElementById(id) - 獲取帶有指定 id 的節點（元素） 
  appendChild(node) - 插入新的子節點（元素） 
  removeChild(node) - 刪除子節點（元素） 

  一些常用的 HTML DOM 屬性：
  innerHTML - 節點（元素）的文字值 
  parentNode - 節點（元素）的父節點 
  childNodes - 節點（元素）的子節點 
  attributes - 節點（元素）的屬性節點 


查詢節點：
getElementById() 返回帶有指定 ID 的元素。 
getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點陣列）。 
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。 

增加節點：
createAttribute() 建立屬性節點。 
createElement() 建立元素節點。 
createTextNode() 建立文字節點。 
insertBefore() 在指定的子節點前面插入新的子節點。 
appendChild() 把新的子節點新增到指定節點。 

刪除節點：
removeChild() 刪除子節點。 
replaceChild() 替換子節點。 

修改節點：
setAttribute()  修改屬性
setAttributeNode()  修改屬性節點
 

JQuery：

JQuery的作用:

1. 寫更少的程式碼,做更多的事情: write Less ,Do more
2. 將我們頁面的JS程式碼和HTML頁面程式碼進行分離

JQ中根據ID查詢元素

全都是根據選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")

JQ和JS之間的轉換

                 1. JQ物件,只能呼叫JQ的屬性和方法
                  2.JS物件 只能呼叫JS的屬性和方法

function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS成功修改了內容"
				//將JS物件轉成JQ物件
				$(div).html("轉成JQ物件來修改內容")
			}
			
			$(function(){
				//給按鈕繫結事件
				$("#btn2").click(function(){
					//找到div1
//					$("#div1").html("JQ方式成功修改了內容");
					//將JQ物件轉成JS物件來呼叫
					var $div = $("#div1");
//					var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq轉成JS物件成功";
				});
			});

JQ的開發步驟:

(將我們頁面的JS程式碼和HTML頁面程式碼進行分離)

//1. 匯入JQ相關的檔案
//2.  文件載入完成事件: $(function)  : 頁面初始化的操作: 繫結事件, 啟動頁面定時器
//3. 確定相關操作的事件
//4. 事件觸發函式
//5. 函式裡面再去操作相關的元素

$ 的意義

• $就是jQuery的別稱，而jQuery就是jQuery庫提供的一個函式.
• • 這個函式的作用是根據 () 裡的引數進行查詢和選擇html文件中的元素， 函式作用之一就是GetElementByID的代替，但()內不僅可以是ID，還可以是各類選擇器
  • $就是jquery物件，$()就是jQuery()，在裡面可以傳引數，作用就是獲取元素

JQuery中的選擇器

讓我們能夠更加精確找到我們要操作的元素

基本選擇器

• ID選擇器 : #ID的名稱
• 類選擇器: 以 . 開頭 .類名
• 元素選擇器: 標籤的名稱
• 萬用字元選擇器: *
• 選擇器,選擇器: 選擇器1,選擇器2

層級選擇器

• 子元素選擇器: 選擇器1 > 選擇器2
• 後代選擇器: 選擇器1 兒孫
• 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨著的一個弟弟
• 找出所有弟弟: 選擇器1~ 選擇器2 : 找出所有的弟弟

屬性選擇器:

選擇器[href]  : 單個屬性

選擇器[href][title] : 多個屬性
選擇器[href][title='test'] : 多個屬性,包含值

表單選擇器:

:input   找出所有的輸入項 : 不單單找出input  textarea select 

:text  找出type型別為 text

:password

基本過濾器:

選擇器:first  : 找出的是第一個

:last  

:even   找出索引為偶數

:odd    找出奇數索引

:gt(index) :  大於索引

:lt(index)   小於

:eq(index)  等於

表單物件屬性:

找出select中被選中的那一項:

option:selected

表單校驗:

• trigger : 觸發事件,但是會執行類似瀏覽將游標移到輸入框內的這種瀏覽器預設行為

• triggerHandler : 僅僅只會觸發事件所對應的函式

• is() trigger : 觸發瀏覽器預設行為

  triggerHandler : 不會觸發
  
  is : 判斷
  
  find : 查詢
  

使用JQuery傳送請求區域性重新整理頁面

資料交換格式:

	json

	xml

• 什麼是JSON JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文字格式，但是也使用了類似於C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。

• JSON格式 JSON物件

  { key1:value}   
  {"username":"zhangsan","password":"123"}
  

  JSON陣列

  [{ key1:value},{ key1:value},{ key1:value}]
  

  $.get(url,function(data){})

JQuery 常用方法:

$(function)  : 文件載入完成的事件
css()  : 	修改css樣式
prop() :    修改屬性/ 獲取屬性 , true&& false 型別選擇
attr() :    修改屬性/ 獲取屬性  鍵值對處理, {"checked","false"}
html() :    修改innerHTML

append : 	給自己新增子節點 
appendTo :  將自己新增到別人家,給自己找一個爹
prepend :   在自己最前面新增子節點
after	:   在自己後面新增一個兄弟
empty	:   清空所有子節點

$(cities).each(function(i,n){
  	
})

$.each(arr,function(i,n){
  
});

Bootstrap:

BootStrap結構:

全域性CSS

• bootStrap中已經定義好了一套CSS的樣式表

元件

• BootStrap定義的一套按鈕,導航條等元件

JS外掛

• BootStrap定義了一套JS的外掛,這些外掛已經預設實現了很多種效果

引入相關的標頭檔案:

<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
	<link rel="stylesheet" href="../css/bootstrap.css" />
	
	<!--需要引入JQuery-->
	<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
	
	<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
	<script type="text/javascript" src="../js/bootstrap.js" ></script>
	
	<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap 柵格系統的工作原理：

• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
• 通過“行（row）”在水平方向建立一組“列（column）”。
• 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
• 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的佈局。
• 通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding

BootStrap的柵格系統

• 響應式設計: 這種設計依賴於CSS3中的媒體查詢
• 柵格樣式:
  • 裝置解析度大於1200 使用lg樣式
  • 裝置解析度大於992 < 1200 使用md樣式
  • 裝置解析度大於768 < 992 使用sm樣式
  • 裝置解析度小於768使用xs樣式

BootStrap 考慮以下幾個問題:

1.導航欄的生成 元件 -> navbar

2,輪播圖,以及時間控制 JS-> carousel (旋轉木馬)

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

註釋:

查詢文件有限選擇線上文件w3school,其次在選擇離線文件.