javascript
JavaScript学习知识点归纳
JavaScript學習包括幾大方面：
1、基礎語法
2、JavaScript核心對象
3、DOM操作
4、BOM操作
5、正則表達式
6、AJAX
7、面向對象編程
?
以下依次為各版塊相關內容==>
?
一、基礎語法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
1、變量：var a = 1,b = 2, c = 3;
?
?
?
?
?、js的數據類型：number、string、boolean、function、object、undefined(占空間)、null(不占空間); //typeof()獲取變量的數據類型
?、函數：
(1) 定義函數
(2) 函數執行
i、主動執行 函數名();
ii、被動執行 對象.事件 = 函數名(或者匿名函數);
(3)?
?
?
?
二、JavaScript核心對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?此處先不撰寫，若有忘記查閱課本相關筆記~~~
?
?
?
?
三、DOM操作?(兼容性問題很多)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? 1、DOM獲取頁面的標簽：
(1) document.getElementById('id'); //根據id返回文檔的第一個對象的引用
(2) document.getElementsByClassName('class'); //根據class返回文檔的對象集合
(3) document.getElementsByTagName('h1'); //根據標簽名返回文檔的對象集合
(4) document.getElementsByName('name'); //根據name返回文檔的集合 <==(適用于表單內)
拓展：對于id，隨著程序的執行將永遠不變，而其余的都會動態改變
?
?
2、JavaScript的輸出方式：
(1) 對象.innerHTML = 'hello world!'; //單引號內為寫入的內容 <== 可讀可寫
? ? ?(2) alert()、confirm()、prompt(); //confirm提供OK及cancel的按鈕，prompt為提示輸入框；
? ? (3) console.log(); //F12中的調試窗口的輸出函數
3、動態操作結點：
結點類型有12種，根據.nodeType的值(1~12)從小到大排序：
1、元素結點；2、屬性結點；3、文本節點；4、CDATA結點；5、實體引用名結點；6、實體名稱結點；
7、處理指令結點；8、注釋結點；9、文檔結點；10、文檔類型結點；11、文檔片段結點；12、DTD聲明結點；
(1) 創建結點
i、document.createElement('div'); <==常用
ii、document.createTextNode();
(2) 刪除結點：
oDiv.parentNode.removeChild(oDiv); <==?因原生js中不能直接刪除結點，故需要先找到父節點，再刪除子結點
removeChild(); //移除當前結點的指定子結點 <== 沒用過
removeNode(); //移除當前結點 <== 沒用過
(3) 查找結點
offsetParent // 相對于定位過的父結點，沒有定位則父結點為body <==常用
offsetLeft / offsetTop //得到該元素在被定位后的父結點的left、top值 <==為了解決不產生默認的auto值，而得到具體的值
parentNode(); ? ?//獲取當前結點的父結點
childNodes(); //獲取當前結點的子結點集合，IE6、7、8只包含元素結點，其余的包含文本和元素結點
children(); ? //獲取當前結點的子結點集合，但只包含元素結點，推薦使用
firstChild(); //第一個子結點，IE6、7、8只會是元素結點，其他的可能是文本或元素結點
firstElementChild(); //IE6、7、8沒有這個屬性，其他的為第一個元素結點，若根本沒有子元素，得到的是null <==推薦使用
同上有：lastChild();/lastElementChild(); //最后一個孩子結點
nextSibling;/nextElementSibling; //下一個兄弟結點
previousSibling;/previousElementSibling; //上一個兄弟結點
(4) 修改結點
appendChild(); //在當前結點中追加一個子結點
replaceChild(index); //按照索引將當前結點的指定子結點替換成新的結點
replaceNode(); //將當前結點替換成新的結點
(5) 讀/寫結點的屬性內容的方法
getAttribute(); //獲取屬性
setAttribute(); //設置屬性
removerAttribute(); //移除屬性，當先被修改后再刪除，不會影響原標簽，會自動調到下一個對象
注意事項：獲取類及標簽是動態的，在每次通過屬性修改會發生響應改變
innerHTML //設置或修改當前結點的內容
(6) 拓展：DOM的寬 / 高問題
元素的寬高：clientWidth / clientHeight //width+padding
offsetWidth / offsetHeight //width+padding+border
scrollWidth / scrollHeight //實際內容的寬度/高度，有滾動條時會比client大
頁面可視區寬高：docuement.documentElement.clientWidth //也可用window.innerWidth,IE6、7、8沒有這個屬性
滾動條的寬度 / 高度：document.documentElement.srcollTop //或document.body.scrollTop,這個只適用于Chrome瀏覽器
?
四、BOM操作? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?本這應是寫完DOM后第二個需要撰寫的博客內容，明天比賽，不得分心， 緩幾天再補充，每天多學習一會，多進步一點，加油加油！
?
?
?
五、正則表達式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
?
?
?
?
六、AJAX(異步JavaScript和XML)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? AJAX并不是一項新技術，而是將JavaScript、XML、CSS等各種技術融合一起，
作用為：1、可只更新部分頁面的內容，而不需重新加載整個頁面；2、關鍵詞搜索
?
例1、AJAX與PHP的數據交換代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>被封裝的Ajax函數</title> 8 </head> 9 <body> 10 <script> 11 ajax({ 12 method:'post', 13 url:'post.php', 14 date:{ 15 user:'hyy', 16 pwd:'123456', 17 }, 18 aysn:true, 19 success:function(date){ 20 alert(date); 21 }, 22 error:function(status){ 23 alert('傳輸出錯，狀態碼為:'+status); 24 } 25 }); 26 function ajax(myJson){//傳入一個JSON，其中包括傳送方式、地址、數據包、是否異步狀態、成功執行的回調函數、失敗后執行的回調函數 27 var xhr = new XMLHttpRequest(); 28 var method = myJson.method || 'get';//傳送方式默認為'get' 29 var date = 'user='+myJson.date.user+'&'+'pwd='+myJson.date.pwd; 30 var date1 = 'user=hyy&pwd=123456';//判斷這兩種形式是否一模一樣，參數傳遞發生錯誤時檢查用 31 console.log(date === date1);//同上 32 switch(method){//傳送方式的選擇 33 case 'get': 34 xhr.open('get','get.php?'+date,myJson.aysn); 35 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 36 xhr.send(); 37 console.log('執行了GET'); 38 break; 39 case 'post': 40 xhr.open('post',myJson.url,myJson.aysn); 41 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 42 xhr.send(date); 43 console.log('執行了POST'); 44 break; 45 } 46 xhr.onreadystatechange = function(){ 47 if(xhr.readyState == 4){//響應確認 48 if(xhr.status >=200 && xhr.status <300){//響應執行 49 myJson.success(xhr.responseText);//執行成功后的回調函數 50 } 51 else{ 52 myJson.error(xhr.status);//執行失敗后的回調函數,返回狀態碼 53 } 54 } 55 } 56 } 57 </script> 58 </body> 59 </html> View Code?
1 <?php 2 3 header('content-type:text/html;charset="utf-8'); 4 $user = $_GET['user']; 5 $pwd = $_GET['pwd']; 6 echo "您的用戶名是：{$user},密碼是：{$pwd}"; 7 8 /* 9 $user = $_POST['user']; 10 $pwd = $_POST['pwd']; 11 echo "您的用戶名是：{$user},密碼是：{$pwd}"; 12 */ 13 14 ?> View Code?
? 例2、AJAX+JSP調用百度關鍵詞庫：
?
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>跨域調用百度搜索數據</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 #wrap { 14 width: 400px; 15 height: 43px; 16 margin: 100px auto; 17 font-family: 'Microsoft yahei'; 18 position: relative; 19 overflow: flex; 20 } 21 #search { 22 width: 400px; 23 height: 40px; 24 letter-spacing: 1px; 25 text-indent: 10px; 26 font-size: 18px; 27 font-family: 'Microsoft yahei'; 28 } 29 #list { 30 width: 402px; 31 border: 1px solid #999; 32 border-top: none; 33 position: absolute; 34 top: 43px; 35 display: none; 36 } 37 #list ul li { 38 width: 100%; 39 height: 25px; 40 line-height: 25px; 41 font-size: 16px; 42 list-style-type: none; 43 text-indent: 10px; 44 } 45 #list ul li a { 46 text-decoration: none; 47 display: block; 48 color: #333; 49 } 50 #list ul li a:hover { 51 background-color: #ddd; 52 } 53 </style> 54 </head> 55 <body> 56 <div id="wrap"> 57 <input type="text" id="search"> 58 <div id="list"> 59 <ul> 60 <!-- <li><a href="">聯想詞1</a></li> 61 <li><a href="">聯想詞2</a></li> 62 <li><a href="">聯想詞3</a></li> 63 <li><a href="">聯想詞4</a></li> 64 <li><a href="">聯想詞5</a></li> --> 65 </ul> 66 </div> 67 </div> 68 69 <script> 70 var oSearch = document.getElementById('search'); 71 var oList = document.getElementById('list'); 72 var oUl = oList.getElementsByTagName('ul')[0]; 73 oSearch.onkeydown = function(){//通過比較，down比up、press效果更好 74 var value = this.value; 75 // oSearch.style.borderColor = 'rgb(71,145,255)'; 76 if(value){//如果搜索框內有值 77 oList.style.display = 'block'; 78 var oS = document.createElement('script'); 79 oS.src = 'https://www.baidu.com/sugrec?&prod=pc&wd='+value+'&cb=fn'; 80 document.body.appendChild(oS); 81 } 82 else{ 83 oList.style.display = 'none'; 84 } 85 } 86 oSearch.onmouseleave = function(){ 87 oList.style.display = 'none'; 88 } 89 function fn(myJson){ 90 oUl.innerHTML = ''; 91 for (var i =0;i<myJson.g.length;i++){ 92 var oLi = document.createElement('li'); 93 oLi.innerHTML = '<a href='+'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+myJson.g[i].q+' target="_blank">'+myJson.g[i].q+'</a>'; 94 console.log(myJson.g[i].q); 95 oUl.appendChild(oLi); 96 } 97 }; 98 99 </script> 100 </body> 101 </html> View Code?
?
?
七、面向對象編程? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?
轉載于:https://www.cnblogs.com/carle/p/10789609.html
總結
以上是生活随笔為你收集整理的JavaScript学习知识点归纳的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： L1-Day15
- 下一篇： Ring3挂起进程,跟恢复进程.