天四學會JavaScript~Day3

昨天學習的內容

前言

今天是國慶假期的第四天,也是我學習JavaScript的第三天，為了能夠熟練語法,今天就打算用JavaScript實作一遍二叉樹資料結構，然后今天還打算把Ajax和Json復習一下,再把Jquery的一些常用操作復習一下，明天就開始寫前端專案,還有bootstrap和Vue框架，

今天學習的內容

二叉樹資料結構(面向物件語法復習)

Ajax和Json

jQuery的使用

表單驗證案例

增刪查改的購物車

錯誤處理和除錯

二叉樹資料結構

二叉樹資料結構如果僅僅只是說我要遍歷的話,那還是比較簡單的，二叉樹的遍歷方法呢,我們可以使用遞回來遍歷,但是遞回的話如果真正實踐的時候還是不建議使用的，因為一旦資料量大了,采用遞回容易堆疊溢位，當然我們還有其他遍歷的方式，比如說我用堆疊輔助回圈來遍歷,比如說我可以將二叉樹線索化來遍歷都可以，那么今天呢,為了更好的鞏固JavaScript面向物件的語法,我就想先序遍歷和后序遍歷使用堆疊輔助回圈,然后中序遍歷我就使用遞回，兩種遍歷的方式都用上,更好鞏固語法，

在過去呢,我也曾寫過一些資料結構的博客,這里可以列出來分享，

樹與二叉樹

二叉樹遍歷的四個應用案例

二叉樹層次遍歷

堆疊輔助回圈遍歷二叉樹

資料結構的實作

  //二叉樹類
  function BinaryTree(){
	  //懶得寫get set 就直接把結點放這了
	  this.root = null;
	  this.left = null;
	  this.right = null;
	  
	  //構造葉子結點
	  this.getTree = function(root){
		  var tree = new BinaryTree();
		  tree.left = null;
		  tree.right = null;
		  tree.root = root;
		  return tree;
	  }
	  /**
	   * 先序遍歷
	   * 這里采用堆疊輔助回圈
	   * @param {Object} tree
	   */
	  this.preOrder = function(tree){
		  //定義一個堆疊
		  var stack = new Array();
		  //初始化堆疊
		  var top = -1;
		  var p = new BinaryTree();
		  //根節點入堆疊
		  stack[++top] = tree;
		  //堆疊慷訓圈退出,遍歷結束
		  while(top != -1){
			  //出堆疊并輸出堆疊頂結點
			  p = stack[top--];
			  //使用document輸出
			  document.write(p.root + " ");
			  //堆疊是先進后出的,所以先讓右孩子進去,再進左孩子
			  //等下出來的時候.就是左孩子先出來,右孩子后出來
			  //堆疊頂結點的右孩子存在,則右孩子入堆疊
			  if(p.right != null){
				  stack[++top] = p.right;
			  }
			  //堆疊頂結點左孩子存在就讓左孩子入堆疊
			  if(p.left != null){
				  stack[++top] = p.left;
			  }
		  }
	  }
	  /**
	   * 中序遍歷
	   * 這里就采用遞回了
	   * @param {Object} tree
	   */
	  function minOrder(tree) {
	      if(tree){
	          if(tree.left){
				  minOrder(tree.left);
			  }
			  document.write(tree.root + " ");
	          if(tree.right){
				  minOrder(tree.right);
			  }
	      }
	  }
	  
	  this.inOrderTraversal = function(tree){
			minOrder(tree);
	  }
	  /**
	   * 后序遍歷
	   * 這里則又是采用堆疊輔助回圈
	   * 具體的原理在(使用自定義的堆疊優化二叉樹的遍歷那篇文章有說過)
	   * @param {Object} tree
	   */
	  this.postOrder = function(tree){
		  if(tree != null){
			  //定義兩個堆疊
			  var stack1 = new Array();
			  var stack2 = new Array();
			  var top1 = -1, top2 = -1;
			  var p = new BinaryTree();
			  stack1[++top1] = tree;
			  while(top1 != -1){
				  p = stack1[top1--];
				  stack2[++top2] = p;
				  if(p.left != null){
					 stack1[++top1] = p.left;
				  }
				  if(p.right != null){
					  stack1[++top1] = p.right;
				  }
			  }
			  while(top2 != -1){
				  p = stack2[top2--];
				  document.write(p.root + " ");
			  }
		  }
	  }
  }
  //main 函式
  function main(){
	  var binary = new BinaryTree();
	  //規劃二叉樹
	  var tree = binary.getTree('A');
	  tree.left = binary.getTree('B');
	  tree.right = binary.getTree('C');
	  tree.left.left = binary.getTree('D');
	  tree.left.right = binary.getTree('E');
	  //先序遍歷
	  binary.preOrder(tree); 
	  //換行
	  document.writeln("<br/>");
	  //中序遍歷
	  binary.inOrderTraversal(tree);
	  //換行
	  document.writeln("<br/>");
	  //后序遍歷
	  binary.postOrder(tree);
  }
  main();

Ajax和Json

在今年六月份時候,我曾寫過一篇【大話Ajax】的文章，那篇文章主要就是使用Servlet和JSP發送和接收Json格式字符串，當然SpringMVC的Responsebody注解發給后臺的也是JSON格式字串，那今天呢，就再學一遍吧~

XMLHttpRequest物件

XMLHttpRequest 是瀏覽器介面物件，該物件的 API 可被JavaScript、VBScript 以及其它web 瀏覽器內嵌的腳本語言呼叫，通過 HTTP 協議在瀏覽器和 web 服務器之間收發 XML 或其它資料，XMLHttpRequest 可以與服務器實作異步互動，而無需讓整個頁面重繪，因此成為Ajax編程的核心物件，

Ajax的使用步驟

創建 XMLHttpRequest 物件

var xhr = new XMLHttpRequest();

給定請求方式以及請求地址

xhr.open("get","http://www.baidu.com");

發送請求

xhr.send();

獲取服務器端給客戶端的回應資料

xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("span").innerHTML = xhr.readyState;
                    alert(xhr.readyState);
                }
            }

JSON

語法

Json的語法可以表示三種型別的值

簡單值 : 使用JavaScript相同的語法,可以在Json中表示字串、數值、布林值和Null，

物件: 物件作為一種復雜資料型別,表示的是一組無序的鍵值對，而每個鍵值對的值可以是簡單值,也可以是復雜資料型別的值，

陣列: 陣列也是一種復雜資料型別,表示一組有序的值的串列,可以通過數值索引來訪問其中的值，數值的值也可以是任意型別——簡單值,物件或者陣列

在 JSON 未出現之前在 Ajax 中對于資料傳遞方式，會使用 XML 作為主要資料格式來傳輸資料，直到 JSON 出現后逐漸放棄使用 XML 作為資料傳輸格式，JSON 比 XML 更小、更快，更易決議，

Josn六種資料型別

string：字串，必須要用雙引號引起來，

number：數值，與JavaScript的number 一致，

object：JavaScript的物件形式，{key:value}表示方式，可嵌套，

array：陣列，JavaScript的Array表示方式[value]，可嵌套，

true/false：布爾型別，JavaScript 的boolean 型別，

null：空值，JavaScript的null，

使用JSON接收資料的案例

    @GetMapping("/test")
    @ResponseBody
    public User testController(){
        return new User("alvin","123456");
    }

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello</title>
        <script type="text/javascript">
            var xhr = new XMLHttpRequest();
            //請求方式和地址
            xhr.open("get","test");
            //發送
            xhr.send();
            xhr.onreadystatechange = function () {
                var parse = JSON.parse(xhr.responseText);
                alert(parse.username + " " + parse.password);
                document.getElementById("data").innerHTML
                = parse.username + "<br/>" + parse.password;
            }
        </script>
    </head>
    <body>
        <span id="data"></span>
    </body>
</html>

jQuery

jQuery是JavaScript的一個函式庫,對JavaScript進行了一個封裝，jQuery將常用的、復雜的操作進行函式化封裝，直接呼叫，大大降低了使用JavaScript的難度，改變了使用JavaScript的習慣， jQuery能做的JavaScript也能做，但使用jQuery能大幅提高開發效率，

JavaScript中獲取元素內容的方式

getElementById( ) ：回傳一個節點物件，
getElementsByName( )：回傳多個（節點陣列），
getElementsByTagName( ) ：回傳多個（節點陣列）

jQuery選擇器

基本選擇器

標簽選擇器 $("a")

ID選擇器 $("#id") $("p#id")

類選擇器 $(".class") $("h2.class")

通配選擇器 $("*")

并集選擇器$("elem1,elem2,elem3")

后代選擇器$(ul li)

父子選擇器 $(ul>li)

屬性選擇器

[attribute] 匹配包含給定屬性的元素

[attribute1][attribute2] 復合屬性選擇器，需要同時滿足多個屬性

[attribute=value] 匹配給定的屬性是某個特定值的元素

[attribute!=value] 匹配所有屬性不等于特定值的元素

[attribute^=value] 匹配給定的屬性是以某些值開始的元素

[attribute$=value] 匹配給定的屬性是以某些值結尾的元素

[attribute*=value] 匹配給定的屬性是以包含某些值的元素

位置選擇器

針對整個頁面而言的位置選擇器

first 獲取第一個元素

:last 獲取最后一個元素

odd 匹配所有索引值為奇數的元素，從 0 開始計數

even匹配所有索引值為偶數的元素，從 0 開始計數

eq(n) 匹配一個給定索引值的元素

gt(n) 匹配所有大于給定索引值的元素

lt(n) 匹配所有小于給定索引值的元素

針對上級標簽而言的位置選擇器

first-child 匹配第一個子元素

last-child匹配最后一個子元素

only-child如果某個元素是父元素中唯一的子元素，將會被匹配

nth-child(n) :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第N個子或奇偶元素

表單選擇器

關于表單項的選擇器

text :password :radio :checkbox :hidden :file :submit

input 匹配所有 input, textarea, select 和 button 元素

關于表單項狀態的選擇器

selected :checked :enabled :disabled

hidden :visible :not

注意$("input")和$(":input")的區別

$("input")：標簽選擇器，只匹配input標簽

$(":input")：匹配所有 input, textarea, select 和 button 元素

jQuery操作Json案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type:"get",
                    url:"/test",
                    //傳遞引數
                    data:"username=alvin&password=12345",
                    success:function (result) {
                        $("#username").html(result.username);
                        $("#password").html(result.password);
                    }
                });
            })
        </script>
    </head>
    <body>
           <span id="username"></span>
           <span id="password"></span>
    </body>
</html>

表單驗證案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">

			function checkForm(){
				//判斷用戶名是否符合驗證規則
				var flag1 = checkUser();
				
				//判斷郵箱是否符合驗證規則
				var flag2 = checkEmail();
				
				//如果均符合驗證規則，驗證成功，否則驗證出錯
				if(flag1 && flag2){
					return true;
				}else{
					return false;
				}
			}
			
			function checkUser(){
				//清空上次檢查的提示資訊
				//$("#usererror").html("");
				$("#usererror").empty();
				//	用戶名不能為空
				var user = $("#user").val();
				if(user == ""){
					//alert("用戶名不能為空");
					$("#usererror").html("用戶名不能為空");
					return false;
				}
				//     用戶名長度大于6
				if(user.length <=6){
					//alert("用戶名長度需要大于6");
					$("#usererror").html("用戶名長度需要大于6");
					return  false;
				}
				//     用戶名中不能有數字  ad34adf
				for(var i=0;i<user.length;i++){
					var ch = user.charAt(i);
					if(ch>='0' && ch<='9' ){
						//alert("用戶名中不能有數字");
						$("#usererror").html("用戶名中不能有數字");
						 return false;
					}
				}
				return true;
				//return undefined
				
			}
			
			function checkEmail(){
				//清空上次驗證郵箱的提示資訊
				$("#emailerror").empty();
				
				var email = $("#email").val();
				if(email.indexOf('@')<0){
					//alert("郵箱中必須有@");
					$("#emailerror").html("郵箱中必須有@");					
					return false;
				}
				if(email.indexOf('.')<0){
					//alert("郵箱中必須有.");
					$("#emailerror").html("郵箱中必須有.");	
					return false;
				}		
				return true;				
			}
			
			function operUser(){
				$("#user").select();
				//$("#user").val("");
			}
		</script>
	</head>
	<body>
		<table  id="center" border="0" cellspacing="0" cellpadding="0">
          <form action="doRegister.jsp" method="post" name="myform" onsubmit="return checkForm()" >
           <tr>
              <td >您的姓名：</td>
              <td>
              	<input id="user" type="text" onfocus="operUser()" onblur="checkUser()"/>
              	<div id="usererror" style="display: inline;"></div>
              	
              </td>
            </tr>
            
            <tr>
              <td >輸入密碼：</td>
              <td><input id="pwd" name="pwd" type="password"/></td>
            </tr>
            <tr>
              <td >再輸入一遍密碼：</td>
              <td><input id="repwd" type="password"/></td>
            </tr>
           <tr>
              <td >您的Email：</td>
              <td>
              	<input id="email" type="text" onblur="checkEmail()"/>
              	<span id="emailerror"></span>
              </td>
            </tr>   
            <tr>
              <td>&nbsp;</td>
              <td ><input name="btn"  type="submit"   value="注冊" class="rb1" /></td>
            </tr>
          </form>
        </table>

	</body>
</html>

購物車案例

需求:使用jQuery實作對購物車的增刪查改全選反選功能，單個選擇復選框的時候如果滿了,全選框也必須自動勾上，修改數量的時候數量變成文本格式,修改數量按鈕自身變成確定按鈕，修改的時候要檢查數量是否正確，

做這個的目的就和我寫資料結構一樣,主要是為了順順手，因為這些選擇器也好還是事件也好都太多了，我不可能一個一個去背,只能說下次要用的時候看看檔案可以上手，待會兒也會用到各種選擇器

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript">
			//全選操作
			$(function(){
				//全選操作
				$("#chks").click(function(){
					//獲取全選框的值,this就相當于是chks，
					//prop會根據是否選中回傳true和false,也可以在后面修改true和false
					var flag = $(this).prop("checked");
					//這句話的意思是將所有input name = chk 的值都根據flag改變
					//觸發chks單機事件勾選了的時候flag是true,沒勾選的時候就是false
					//所以當全選框是true的時候,下面全改成true，全選是false下面就全改成false就好了
					$("input[name=chk]").prop("checked",flag);
				});
				
				//為了防止復選框被一個一個點滿的時候全選框沒有被改變.所以這里要處理一下
				//使用了該選擇器后,用戶每次點擊復選框,都會在這里進行判斷一下
				$("input[name=chk]").click(judgeAll());
				
				//反選操作
				$("#fx").click(function(){
					//獲取所有復選框
					$("input[name=chk]").each(function(){
						//獲取原來的值
						var flag = $(this).prop("checked");
						//修改相反的值
						$(this).prop("checked",!flag);
					})
					//直接呼叫就可以了
					 judgeAll();
				});
				/**
				 * 新增
				 */
				$("#addRow").click(function(){
					//創建一個
					var newRow = $('<tr>'+
					'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
					'<td>《c primer plus》</td>'+
					'<td>Stephen Prata</td>'+
					'<td>10</td>'+
					'<td>'+
						'<input type="button" name="aa" id="" value="修改數量" οnclick="updateAmount(this)"/>'+
						'<input type="button" name="" id="" value="洗掉" οnclick="delRow(this)"/>'+
					'</td>'+
				'</tr>');
				//======================================
					//這里用到了位置選擇器,last是最后一個，如果要放在第一個就用first
					$("tr:last").after(newRow);
				});
				/**
				 * 多行洗掉
				 */
				//這個對應的是橫著那一排的洗掉id，不是單獨洗掉的那個單擊事件
				$("#delRow").click(function(){
					//獲取所有被選中的復選框
					var toDelArr = $("input[name=chk]:checked");
					//先判斷是否選擇,如果沒選就提示
					if(toDelArr.length == 0){
						alert("至少選中一行");
					}else{
						//toDelArr.remove();是反面教材,因為剛剛只是獲得復選框，直接刪自然也只會刪掉復選框
						//toDelArr.parent().remove();也不行,因為它只會刪掉當前的td，要想刪掉tr需要兩個parent
						//toDelArr.parent().parent().remove(); 這種寫法雖然可以但是也太麻煩了
						//最好的寫法還是這種，parents里面一定要寫東西，不然整個頁面都刪掉了，，，
						toDelArr.parents("tr").remove();
					}
				});
				/**
				 * 復制多行
				 */
				$("#copyRow").click(function(){
					//獲取所有被選中的復選框
					var toCopyArr = $("input[name=chk]:checked");
					//先判斷是否選擇,如果沒選就提示
					if(toCopyArr.length == 0){
						alert("至少選中一行");
					}else{
						//each是在回圈,所以回圈里面一個一個加就相當于多行增加
						toCopyArr.each(function(){
							//復制一份
							var cloneRow = $(this).parents("tr").clone();
							//粘貼一份
							$("#ta").append(cloneRow);
						});
					}
				});
			})
			/**
			 * 為了讓反選和普通選擇都進行判斷并且代碼不用重復寫
			 * 所以這里就封裝成一個函式讓它們呼叫
			 */
			function judgeAll(){
				//獲取所有的復選框
				var arr = $("input[name=chk]");
				//先默認全部選中
				var flag = true;
				//arr.each就相當于是在回圈遍歷
				arr.each(function(){
					//判斷所有復選框是否被選中
					var flagplus = $(this).prop("checked");		
					//假如有一個沒被選中,那么全選框就是false
					if(flagplus == false){
						flag = false;
						return;
					}
				});
				//決定全選框的值
				$("input[name=chks]").prop("checked",flag);
			}
			/**
			 * 修改當前數量
			 */
			function updateAmount(obj){
				//數量變成文本框的值,文本框變成數量的值
					//獲取原來的數量   prev是指修改數量的前面一個表格，不然就會把自己變成下面input的格式
					//如果要把input格式換成作者那個位置,可以用兩個prev()試試
					var amountCell = $(obj).parent().prev();
				    var amount =  amountCell.html();
					//將指定位置的td改成input文本格式
					amountCell.html('<input type="text" value = "'+ amount +'" οnblur="checkAmount(this)"/>');
				//把修改按鈕變成確定按鈕
					//獲得當前按鈕單元格
					var buttonCell = $(obj).parent();
					//準備新按鈕
					var newButton = $('<input type="button" name="" id="" value="確定" οnclick="confirmAmount(this)"/>'+
					'<input type="button" name="" id="" value="洗掉" οnclick="delRow(this)" />');
					//添加新按鈕
					buttonCell.html(newButton);
			}
			/**
			 * 確定數量
			 * @param {Object} obj
			 */
			function confirmAmount(obj){
				//文本框變成數量
					//獲取原來的數量 
					var amountInput = $(obj).parent().prev().find("input");
					var amount = amountInput.val();
					//修改文本框的數量
					$(obj).parent().prev().html(amount);
				//確定按鈕變成修改按鈕
					//獲得當前按鈕單元格
					var buttonCell = $(obj).parent();
					//準備新按鈕
					var newButton = $('<input type="button" name="" id="" value="修改數量" οnclick="updateAmount(this)"/>'+
					'<input type="button" name="" id="" value="洗掉" οnclick="delRow(this)" />');
					//添加新按鈕
					buttonCell.html(newButton);
			}
			//判斷數量是否正確
			function checkAmount(obj){
				//獲取值
				var amount = $(obj).val();
				//判斷是否正確
				if(isNaN(amount) || amount < 1 || parseInt(amount) != amount){
					alert("必須是大于0的整數!");
				}
			}
			/**
			 * 洗掉當前行
			 */
			function delRow(obj){
				//這里就是一句話解決了，，，
				$(obj).parents("tr").remove();
			}
		</script>
	</head>
	<body>
		<h3>購物車</h3>
		<hr />
		<input type="button" id="fx" value="反選" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="洗掉行"/>
		<input type="button" id="copyRow" value="復制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks"  value="1" /></td>
				<td width="200px">書名</td>
				<td width="200px">作者</td>
				<td width="200px">數量</td>
				<td width="200px">操作</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《計算機組成原理》</td>
				<td>Alan Clements</td>
				<td>10</td>
				<td>
					<input type="button" name="aa" id="" value="修改數量" onclick="updateAmount(this)"/>
					<input type="button" name="" id="" value="洗掉" onclick="delRow(this)"/>
				</td>
			</tr>			
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《深入理解計算機系統》</td>
				<td>布賴恩特</td>
				<td>10</td>
				<td>					
					<input type="button" name="" id="" value="修改數量" onclick="updateAmount(this)"/>
					<input type="button" name="" id="" value="洗掉" onclick="delRow(this)" />
				</td>
			</tr>
			
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《編譯原理》</td>
				<td>Alfred V．Aho</td>
				<td>30</td>
				<td>
					<input type="button" name="" id="" value="修改數量"οnclick="updateAmount(this)"/>
					<input type="button" name="" id="" value="洗掉" onclick="delRow(this)"/>
					
				</td>
			</tr>
			
		</table>

	</body>
</html>

錯誤處理和除錯

由于JavaScript本身是動態語言,而且這么多年來也沒有一個固定的開發工具，事實上,你就是新建一個記事本,也可以寫JavaScript代碼然后放瀏覽器上運行，不同的瀏覽器自然對JavaScript的編譯支持等都不太相同，今天就來學習一下前端的除錯問題，至于try catch的話,明天寫代碼的時候再用兩遍就熟了吧~

現在我就隨便打開一個SpringBoot的專案去運行，然后按F12打開瀏覽器的控制臺,這里是用谷歌瀏覽器，其實學Web開發是比較建議用谷歌或者火狐的，按F12之后進入除錯頁面就會看到很多選項

在這里插入圖片描述

Elements(元素)

這個頁面顯示的都是后臺html代碼,如果想要定位到某個位置可以右鍵檢查,就自然跳過來了，

在這里插入圖片描述

Console(控制臺)

這個界面會顯示控制臺的資訊,比如代碼報錯了...或者console.log()等可以把內容輸出到這里，就跟平時寫Java代碼IDEA或者eclipse下面的控制臺差不多，

Sources(資料來源)

點擊它可以看到后臺代碼的檔案資訊

Network

Network可以查看當前url的請求內容,請求狀態等資訊,還可以分析網路狀態

工具打開之后,點擊network,就可以查看當前網路錄制情況,默認是開啟網路錄制的,查看圖中圈中的部分,判斷是否開啟了網路錄制,紅色代表正在錄制,點擊之后關閉,變為灰色,那就是停止錄制

在這里插入圖片描述

選擇XHR更是可以直接找到后臺介面甚至查看Json，Preview就可以看到Json

在這里插入圖片描述

好了,今天差不多先學到這，明天是計劃先用HTML+CSS+JavaScript做個純底層的案例，接著再學習bootstrap和vue，好好加油!

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/159889.html

標籤：AI

上一篇：四天學會JavaScript~Day4

下一篇：MIUI12國際版、歐版、波蘭版、國內開發板刷機排雷現場

四天學會JavaScript~Day3

天四學會JavaScript~Day3

昨天學習的內容

前言

今天學習的內容

二叉樹資料結構(面向物件語法復習)

Ajax和Json

jQuery的使用

表單驗證案例

增刪查改的購物車

錯誤處理和除錯

二叉樹資料結構

樹與二叉樹

二叉樹遍歷的四個應用案例

二叉樹層次遍歷

堆疊輔助回圈遍歷二叉樹

資料結構的實作

Ajax和Json

XMLHttpRequest物件

Ajax的使用步驟

創建 XMLHttpRequest 物件

給定請求方式以及請求地址

發送請求

獲取服務器端給客戶端的回應資料

JSON

語法

Josn六種資料型別

使用JSON接收資料的案例

jQuery

JavaScript中獲取元素內容的方式

jQuery選擇器

基本選擇器

屬性選擇器

位置選擇器

表單選擇器

jQuery操作Json案例

表單驗證案例

購物車案例

錯誤處理和除錯

Elements(元素)

Console(控制臺)

Sources(資料來源)

Network

選擇XHR更是可以直接找到后臺介面甚至查看Json，Preview就可以看到Json