day-03（js）
阿新 • • 發佈：2018-11-11
回顧: css: 層疊樣式表 作用: 渲染頁面 提供工作效率,將html和樣式分離 和html的整合 方式1:內聯樣式表 通過標籤的style屬性 <xxx style="..."/> 方式2:內部樣式表 通過head的子標籤Style子標籤 <style type="text/css"> 選擇器{ 屬性:值; 屬性1:值1; } </style> 方式3:外部樣式表 有一個獨立css檔案.字尾名:.css 在html中通過link標籤匯入 選擇器: id選擇器 html元素有id屬性且有值 <xx id="d1"> css中通過 # 匯入 #d1{...} 類選擇器 html元素有class屬性且有值 <xx class="c1"> css中通過 . 匯入 .c1{...} 元素選擇器 css中通過標籤名即可 xx{...} 屬性選擇器 html元素有一個屬性且有值 <xx att="val1"> css中通過元素名[屬性="值"]使用 xx[att="val1"]{...} 後代選擇器 選擇器 後代選擇器 錨偽類(瞭解) ////////////////// 字型 文字 背景 列表 分類(clear display:none block inline) 框模型: 一個元素外邊有內邊距 邊框 外邊距 順序:上右下左 ////////////////////////////////////// js javascript 指令碼語言 解釋性 基於物件 事件驅動函式 js的組成: ECMAScript(語法) BOM(瀏覽器物件模型) DOM(文件物件模型) html和js的整合 方式1:內部編寫js<script type="text/javascript">js程式碼</script> 方式2: 外部有一個獨立的js檔案 字尾名:.js 在html中通過script的src屬性匯入 <script src="js的路徑"></script> 注意: 一旦使用了src屬性,那麼script標籤體中的js程式碼將不再執行了. 變數: var 變數名=初始化值; 資料型別: 原始型別(5種) Undefined Null String 用引號引起來的內容 Number Boolean 通過typeof可以判斷一個值或者變數是否是原始型別,若是原始型別,還可以判斷屬於那種. typeof 變數|值 引用型別 運算子: 關係運算符: 兩邊值都是字串,比較ascii碼 兩邊都是數字,和java一樣 一邊是數字,一遍是字串形式的數字, 可以比較 一邊是數字,一遍是普通字串 可以比較 值永遠是false 等性運算子 "66"==66 true "666"===666 false js的語句 if while for 和java一樣 ////////////////// 獲取元素: var obj=document.getElementById("id值"); 獲取元素的value屬性 var val=document.getElementById("id值").value; 設定元素的value屬性 document.getElementById("id值").value="sdfsdf"; 獲取元素的標籤體 var ht=document.getElementById("id值").innerHTML; 設定元素的標籤體 document.getElementById("id值").innerHTML="ssss"; 定義函式: 方式1:function 函式名(引數列表){函式體} 方式2: var 函式名=function(引數列表){函式體} 注意: 函式宣告的時候不用宣告返回值型別 引數列表上不要寫引數型別 通過return結束方法和將值返回 事件: onclick 單擊 onsubmit 表單提交 onload 頁面載入成功或者元素載入成功 事件和函式繫結 方式1:通過元素的事件屬性 <xxx onxxx="函式名(引數列表)"> 方式2:派發事件 document.getElementById("id值").onxxx=function(){...}; document.getElementById("id值").onxxx=函式名; ///////////////////////////////// 案例1-定時彈出廣告 需求: 開啟頁面後4秒,展示廣告,2秒之後,該廣告隱藏.再停2秒,繼續展示. 技術分析: 定時器 定時器(BOM-window物件) setInterval(code,毫秒數):週期執行 setTimeout(code,毫秒數):延遲多長事件後 只執行一次. 清除定時器 clearInterval(id): clearTimeout(id): 步驟分析: 1.確定事件 2.編寫函式 a.獲取元素 b.操作元素 //////////////////////// 1.html頁面,先把廣告隱藏 2.頁面載入成功事件 onload 3.編寫函式 定時器: 操作元素: document.getElementById("") 操作css屬性 document.getElementById("id").style.屬性="值" 屬性:就是css中屬性 css屬性有"-" 例如:backgroud-color 若有"-" 只需要將"-"刪除,後面第一個字母變大寫即可 注意: 只要是window物件的屬性和方法,可以把window省略 window.onload 等價於 onload window.setInterval() 等價於 setInterval() //////////////////// bom(瀏覽器物件模型)總結 所有的瀏覽器都有5個物件 window:視窗 location:定位資訊 (位址列) history:歷史 window物件詳解: 如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件， 併為每個框架建立一個額外的 window 物件。 常用的屬性: 通過window可以獲取其他的四個物件 window.location 等價域 location window.history 等價於 history ... 常用的方法 訊息框 alert("...."):警告框 confirm("你確定要刪除嗎?"):確定框 返回值:boolean prompt("請輸入您的姓名"):輸入框 返回值:你輸入的內容 定時器 設定定時器 setInterval(code,毫秒數):週期執行 setTimeout(code,毫秒數):延遲多長事件後 只執行一次. 例如: setInterval(showAd,4000); serInterval("showAd()",4000); 清除定時器 clearInterval(id): clearTimeout(id): 開啟和關閉 open(url):開啟 close():關閉 ///////////////////////// location:定位資訊 常用屬性: href:獲取或者設定當前頁面的url(定位資訊) location.href; 獲取url location.href="...";設定url 相當於 a標籤 ////////////////////// history:歷史 back();後退 forward():向前 ★go(int) go(-1) 相當於 back() go(1) 相當於 forward() ////////////////////////////////////// 案例2-表單校驗plus 需求: 提示資訊不用彈出框,將資訊追加在文字框後面 技術分析: 確定事件 表單提交的時候 onsubmit 文字框失去焦點的時候 onblur 編寫函式 獲取元素 document.getElementById("id值"); 操作元素(獲取元素的值,操作標籤體,操作標籤value屬性) ///////////////// 步驟分析: 1.表單 2.表單提交的時候 確定事件 onsubmit() 3.校驗使用者名稱和密碼 4.獲取使用者名稱和密碼的物件及值 5.判斷內容,當為空的時候,獲取響應的span元素 往span元素中顯示錯誤資訊 //////////////////////// 注意: 在方法中(function()) this指代的是當前的元素(當前dom物件) 例如: <input type="text" name="username" id="username" onblur="loseFocus(this.value)"> 方法: function loseFocus(obj){ alert(obj); } ///////////////////////////// 事件總結: 常見的事件: 焦點事件:★ onfocus onblur 表單事件:★ onsubmit onchange 改變 頁面載入事件:★ onload 滑鼠事件(掌握) onclick 滑鼠事件(瞭解) ondblclick:雙擊 onmousedown:按下 onmouserup:彈起 onmousemove:移動 onmouserover:懸停 onmouserout:移出 鍵盤事件(理解) onkeydown:按下 onkeyup:彈起 onkeypress:按住 //////////// 繫結事件: 方式1: 元素的事件屬性 方式2: 派發事件 /////////////////// 瞭解 阻止預設事件的發生 阻止事件傳播 ///////////////// 案例3-隔行換色 需求: 一個表格,隔一行換一個色 技術分析: 事件:onload 獲取元素:dom操作 /////////////// 獲取元素: document.getElementById("id"):通過id獲取一個元素 document.getElementsByTagName("標籤名"):通過標籤名獲取一種元素(多個)返回一個數組 Array: 常用屬性: length:陣列的長度 //////////////////////// 步驟分析: 1.html表格一載入的時候 確定事件 onload 2.編寫函式 a.獲取元素(所有的tr元素) b.操作(若當前行是偶數的話加一個樣式,若是奇數的話,加另一個樣式) //////// //頁面載入成功 onload=function(){ //1.獲取所有的tr var arr=document.getElementsByTagName("tr"); //alert(arr); //alert(arr.length); //2.判斷奇偶數 新增不同的樣式 遍歷陣列 for(var i=1;i<arr.length;i++){ if(i%2==0){ arr[i].style.backgroundColor="#FFFFCC"; }else{ arr[i].style.backgroundColor="#BCD68D"; } } } ////////////////////////// 案例4:全選或者全不選 步驟分析: 1.確定事件 最上面那個複選框的單擊事件 onclick 2.編寫函式:讓所有的複選框和最上面的複選框狀態保持一致 a.獲取最上面這個複選框選中狀態 通過checkbox的checked屬性即可 b.獲取其他的複選框,設定他們的checked屬性即可 可以通過以下兩種方案獲取元素 document.getElementsByClassName():需要給下面所有的複選框新增class屬性 document.getElementsByName():需要給下面所有的複選框新增name屬性 ////////////////////////////////// dom(文件物件模型) 當瀏覽器接受到html程式碼的時候,瀏覽器會將所有的程式碼裝載到記憶體中,形成一棵樹(document樹) 節點(Node) 文件節點 document 元素節點 element 屬性節點 attribute 文字節點 text 獲取節點: 通過document可以獲取其他節點: 常用方法: document.getElementById("id值"):獲取一個特定的元素 document.getElementsByTagName("標籤名"):通過標籤名獲取一種元素(多個) document.getElementsByClassName("class屬性的值"):通過class屬性獲取一類元素(多個) document.getElementsByName("name屬性的值"):通過name屬性獲取一類元素(多個) 設定獲取獲取節點的value屬性 dom物件.value;獲取 dom物件.value="";設定 設定或者獲取節點的標籤體 dom物件.innerHTML;獲取 dom物件.innerHTML="";設定 獲取或者設定style屬性 dom物件.style.屬性;獲取 dom物件.style.屬性="";設定 獲取或者設定屬性 dom物件.屬性 ///////////////////////// 對於htmldom的操作若在js或者htmldom 查詢不到 去查詢xml dom 關於文件的操作 在 xml dom 的document中 關於元素的操作 在 xml dom 的element中 appendChild(dom物件):在一個元素下新增孩子 ////////////////////////////////////// 案例5-左右選中. 需求: 技術分析: 1.確定事件,按鈕的單擊事件 2.編寫函式: 點選移動單|多個的: a.獲取左邊選中的選項 select物件.options--陣列 遍歷陣列 判斷是否選中 option物件.selected b.將其追加到右邊的下拉選中 rightSelect物件.appendChild(option); 點選移動所有的 a.獲取左邊的所有的選項 b.一個個的追加過去 /////////////////////// 案例6-省市聯動 需求: 選中省的時候,動態的查詢當前省下的所有市,然後展示在市的下拉選中 技術分析: 陣列: //////////////////////// 陣列: 語法: new Array();//長度為0 new Array(size);//指定長度的 new Array(e1,e2..);//指定元素 非官方 var arr4=["aa","bb"]; 常用屬性: length 注意: 陣列是可變的 陣列可以存放任意值 常用方法:(瞭解) 存放值:對內容的操作 pop():彈 最後一個 push():插入 到最後 shift():刪除第一個 unshift():插入到首位 列印陣列: join(分隔符):將數組裡的元素按照指定的分隔符列印 拼接陣列: concat():連線兩個或更多的陣列，並返回結果。 對結構的操作: sort();排序 reverse();反轉 //////////////////////// 步驟分析: 1.省的下拉選 的選項中新增value屬性 當成陣列的索引 2.初始化市 3.選擇省的時候,onchange事件 4.編寫函式, 通過獲取的索引獲取物件的市的陣列 this.value 遍歷陣列,將數組裡面的每個值組裝option 新增到select中即可 ////////////////////////////// 引用型別總結: 原始型別中的String Number Boolean都是偽物件,可以呼叫相應的方法 Array:陣列 String: 語法: new String(值|變數);//返回一個物件 String(值|變數);//返回原始型別 常用方法: substring(start,end):[start,end) substr(start,size):從索引為指定的值開始向後擷取幾個 charAt(index):返回在指定位置的字元。 indexOf(""):返回字串所在索引 replace():替換 split():切割 常用屬性:length Boolean: 語法: new Boolean(值|變數); Boolean(值|變數); 非0數字 非空字串 非空物件 轉成true Number 語法: new Number(值|變數); Number(值|變數); 注意: null====>0 fale====>0 true====>1 字串的數字=====>對應的數字 其他的NaN Date: new Date(); 常用方法: toLocalString() RegExp:正則表示式 語法: 直接量語法 /正則表示式/引數 直接量語法 /正則表示式/ new RegExp("正則表示式") new RegExp("正則表示式","引數") 引數: i:忽略大小寫 g:全域性 常用方法: test() :返回值為boolean Math: Math.常量|方法 Math.PI Math.random() [0,1) 全域性: ★ decodeURI() 解碼某個編碼的 URI。 encodeURI() 把字串編碼為 URI。 Number():強制轉換成數字 String():轉成字串 parseInt():嘗試轉換成整數 parseFloat():嘗試轉換成小數 eval() 計算 JavaScript 字串，並把它作為指令碼程式碼來執行。 ////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// 上午回顧: BOM(瀏覽器物件模型) window物件:視窗 注意: 若是window物件的屬性和方法,呼叫的時候可以省略window 常用屬性: 通過window可以獲取其他的四個物件 window.location 等價於 location 常用方法: 訊息框 alert() 警告框 confirm() 確認框 返回值:boolean prompt() 輸入框 返回值:輸入的內容 定時器 設定 setInterval(code,毫秒數):迴圈 setTimeout(code,毫秒數):延遲 只執行一次 清除 clearInterval(id): clearTimeout(id): 開啟和關閉 open(url) close() location物件:定位資訊 位址列 常用屬性: href:獲取或者設定當前頁面的url location.href:獲取 location.href="url":設定 相當於超連結 history物件:操作歷史 常用方法: go() //////////////////////////// 事件: 焦點:★ onfocus:獲取焦點 onblur:失去焦點 表單事件:★ onsubmit: form表單裡的 onchange:改變(下拉選) 頁面或者物件載入:★ onload: 滑鼠:★ onclick:單擊 鍵盤: onkeyup: dom(★) 獲取元素的方法(4個) document 操作元素的屬性 dom物件.屬性; 引用型別: array string substring 全域性: 編碼2個 強制轉化 Number String 嘗試 parseXxx eval() 解析字串形式的js程式碼 Math random()