天天看點
傳回

JavaScript-基本操作-操作元素-函數-運算

原生js

    • javascript的組成
    • 一、基本操作
      • 1.js的引入的三種方式
      • 2. 變量類型
      • 3.擷取元素的方法一
      • 4.擷取元素的方法二:
    • 二、操作元素屬性
      • 1. 點操作 “.”
      • 2. 中括号操作“[]”
      • 3.操作元素包裹的内容
      • 4. 擷取目前元素
    • 三、函數
      • 1. 函數的定義與執行
      • 2. 提取行間事件 讓html與js實作解耦
      • 3.匿名函數
      • 4. 變量和函數與解析
      • 5.函數傳參
      • 6.封閉函數
    • 四、運算符和條件語句
      • 1.條件語句
      • 2. 算術運算符
      • 3.指派運算符
      • 4. 條件運算符
    • 五、總結

javascript的組成

  1. ECMAscript javascript的文法（變量、函數、循環語句等文法）
  2. DOM 文檔對象模型 操作html和css的方法
  3. BOM 浏覽器對象模型 操作浏覽器的一些方法

一、基本操作

1.js的引入的三種方式

  1. 行間事件 
    <!-- 第一種引入js方式  行間事件 -->
	<input type="button" name="" value="點選" onclick="alert('hello word')">
  2. 内嵌式 
    <script type="text/javascript">
		alert("hello word 1")
	</script>
  3. 外聯式 
    <!-- 外聯式js -->
	<script type="text/javascript" src="js/hello.js"></script>

2. 變量類型

  1. number：數字類型
  2. string：字元串類型
  3. boolean：布爾值 true/false
  4. undefined：變量聲明後沒有指派
  5. null ： 表示為空對象
  6. object：符合類型
  7. 代碼示範： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js變量聲明和類型</title>
	<script type="text/javascript">
		// js中沒有嚴格的縮進


		/*
			// 整數的話變量名前加個i
			var iNum = 12;
			// 字元串變量名前加一個s
			var sTr = "abc"
			兩句合成一句
		*/
		// 1. number數字類型
		// 2. string 字元串類型
		// 3. boolean類型 true / false
		var iNum = 12, sTr = "abc";
		alert(iNum);
		alert(sTr);

		// 4. undefined 類型  變量聲明後沒有指派
		var iNum02;
		alert(iNum02);

		// 5. null 類型 表示空對象 定義的變量準備儲存對象，可以将變量值初始化為null,擷取不到傳回null
		// 6. 複合類型 object

	</script>
</head>
<body>
	
</body>
</html>

3.擷取元素的方法一

  1. document.getElementById(元素id) 來擷取
  2. 示範： 
    <script type="text/javascript">
    var oDiv = document.getElementById('div1'); 
 </script>
  .... 
  <div id="div1">這是一個div元素</div>
  3. 用2中延時的會出現問題，應為頁面從上往下加載執行時擷取不到div元素

  4. 更正 方法一：

    将script标簽放到最後

    <div id="div1"> 這是一個div元素</div>
	
	<!-- 	
		如果出現元素找不到的問題
		解決方法一：可以将js的插入放到後面
		-->
		<script type="text/javascript">
			// 可以解決元素找不到的錯誤
			// 擷取div元素
			document.getElementById("div1").style.color = "red"
		</script>

  5. 使用方法二：

    在擷取元素前加上window.onload =function（{擷取元素的東西

    }）如下：

    <script type="text/javascript">
			// 解決方法二:
			// 可以解決元素找不到的錯誤
			// 檔案加載完之後然後運作裡面的語句
			window.onload = function(){
				/*
					// 擷取div元素
					document.getElementById("div1").style.color = "red";
					// 中間由-的不能直接寫 如 font-size 要寫成 fontSize
					document.getElementById("div1").style.fontSize = "30px";
				*/
				// 合成一句 用變量簡化代碼
				var oDiv = document.getElementById("div1");
				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
				

			}
			
		</script>

4.擷取元素的方法二:

  1. 通過标簽名稱擷取元素
    如：擷取所有的li标簽
  2. 在使用這種方法擷取元素的時候，擷取到的是選擇集，不能直接給選擇集加樣式
  3. 執行個體： 隔行換色 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通過标簽擷取元素</title>
	<script type="text/javascript">
		window.onload = function(){
			// 擷取li  通過标簽名稱  --- 生成一個選擇集
			// 将頁面中的所有的li都選中
			var aLi = document.getElementsByTagName("li");

			// 擷取選擇集内元素的個數 
			alert(aLi.length);  //13
			// 不能給選擇集設定樣式屬性
			// aLi.style.backgroundColor = "gold";
			
			// 給單獨一個設定背景色
			// aLi[0].style.backgroundColor = "gold";
			
			// 同時給所有的li加背景色
			/*
				var aLen = aLi.length;
				for (var i=0;i<aLen; i++){
					aLi[i].style.backgroundColor = "gold";
				} 
			*/

			// 如果指向選id="list1"中的li這樣選  `
			var oUl = document.getElementById("list1");
			var aLi2 = oUl.getElementsByTagName("li");

			alert(aLi2.length);  // 8

			var aLen2 = aLi2.length;
			// 實作隔行換色   CSS3也可以做  用nth-child(2n)
			for (var i=0; i<aLen2; i++){
				if (i%2 == 0){
					aLi2[i].style.backgroundColor="gold";
				}
			}

		}
	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

效果：

JavaScript-基本操作-操作元素-函數-運算

二、操作元素屬性

1. 點操作 “.”

  1. 、html的屬性和js裡面屬性寫法一樣
  2. “class” 屬性寫成 “className”
  3. “style” 屬性裡面的屬性，有橫杠的改成 駝峰式，比如：“font-size”，改成”style.fontSize”
  4. 使用方法如下： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素屬性操作</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1")
			var oA = document.getElementById("link")
			var oDiv2 = document.getElementById("div2")


			// 讀取屬性
			var sId = oDiv.id;
			alert(sId);

			// 寫屬性
			oDiv.style.color = "red";

			oA.href = "https://www.baidu.com";

			oA.title = "這是去到百度網的連接配接";

			// 當js寫屬性 class 的時候要用className  原因是class是js終的一個保留字
			oDiv2.className = "box2";

		}

	</script>
	<style type="text/css">
		.box{
			font-size: 20px;
			color:gold;
		}

		.box2{
			font-size:30px;
			color:pink;
		}
	</style>
</head>
<body>
	<div id="div1">這是一個div标簽</div>
	<a href="#" id="link">這是一個連結</a>
	<div class="box" id="div2">這是第二個div</div>
 
	
</body>
</html>

2. 中括号操作“[]”

  1. 使用方法：

    oDiv.style[“color”] = “red”;

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素屬性操作</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1")

			// 如果要用變量操作屬性的話
			var sMystyle = "color";
			var sValue = "red";

			// oDiv.style.sMystyle = sValue;  -- 這種方式沒有作用 且不會報錯
			// oDiv.style.color =sValue;  --  這個可以操作顔色值
			
			// 如果屬性和值都是變量的話要用 [] 來操作
			
			oDiv.style[sMystyle] = sValue;


		}
	</script>
</head>
<body>
	<div id="div1">這是一個div</div>
	
</body>
</html>

3.操作元素包裹的内容

  1. 擷取： x.innerHTML
  2. 修改： x.innerHTML = “xxxx”
  3. 執行個體： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作元素包裹的内容</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1");

			// 讀取元素中的内容
			var sTr = oDiv.innerHTML;
			alert(sTr);

			// 改寫元素内的内容
			oDiv.innerHTML = "修改的文字";

			// 也可以往裡面增加标簽内容 往頁面上放資料
			oDiv.innerHTML = "<a href='https://www.baidu.com'>百度</a>"
		}
	</script>
</head>
<body>
	<!-- #div1 -->
	<div id="div1">這是一個div元素</div>
	
</body>
</html>

4. 擷取目前元素

  1. 用.this來擷取目前元素

三、函數

1. 函數的定義與執行

  1. 函數的定義: function a(){} 
<script type="text/javascript">
		// 函數的定義
		function fnMyalert(){
			alert("hello word");
		}
	</script>
  1. 函數的執行 ：

    在js中調用：a()

    在标簽内調用：onclick = a()

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函數定義個執行</title>
	<script type="text/javascript">
		// 函數的定義
		function fnMyalert(){
			alert("hello word");
		}

		function fnChange(){
			var oDiv = document.getElementById("div1");

			oDiv.style.color = "red";
			oDiv.style.fontSize = "30px";
		}

		// 函數的執行
		// fnMyalert()
		

	</script>

</head>
<body>
	<!-- 标簽内調用  當點選div的時候執行fnMyalert() -->
	<div id="div1" onclick="fnMyalert()">這是一個div元素</div>
	<input type="button" name="" value="改變div" onclick="fnChange()" />
	
</body>
</html>

2. 提取行間事件 讓html與js實作解耦

  1. 提取行間事件 在html行間調用的事件可以提取到javascript中調用，進而做到結構與行為分離。
  2. 實作
    在js中用onclick綁定函數名 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>提取行間事件</title>
	<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById("btn01");
			// 提取行間事件後 函數名後不能加小括号  加小括号是直接執行
			oBtn.onclick = fnChange;
			// 函數的定義
			function fnChange(){
				var oDiv = document.getElementById("div1");

				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			}

			// 函數的執行
			// fnMyalert()
		
		}
		

	</script>

</head>
<body>
	<!-- 提取行間事件 将标簽中的函數放到Js中 -->
	<div id="div1">這是一個div元素</div>
	<input type="button" name="" value="改變div" id="btn01" />
	
</body>
</html>

3.匿名函數

  1. 定義的函數可以不給名稱，這個叫做匿名函數，可以将匿名函數直接指派給元素綁定的事件來完成匿名函數的調用。
  2. 使用如下： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>匿名函數</title>
	<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById("btn01");
			// 匿名函數：将函數的定義直接指派到一個事件上 --- 注 function後要加括号
			oBtn.onclick = function(){
				var oDiv = document.getElementById("div1");

				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			};
		
		}
		

	</script>

</head>
<body>
	<!-- 提取行間事件 将标簽中的函數放到Js中 -->
	<div id="div1">這是一個div元素</div>
	<input type="button" name="" value="改變div" id="btn01" />
	
</body>
</html>

4. 變量和函數與解析

  1. 變量：

    預解析會将變量的定義提前，但是不會将指派提前

  2. 函數：

    預解析會将函數的聲明和定義整體提前 ，程式不會死掉

  3. 執行個體： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>變量和函數的預解析</title>
	<script type="text/javascript">

		// 預解析會将變量的定義提前，但是不會将指派提前
		alert(iNum);  // 會彈出一個undefined
		
		var iNum = 12;

		// alert 一個為定義的變量的話程式會崩掉
		// alert(a);  // 程式直接死掉 報錯 not defined
		

		// 預解析會将函數的聲明和定義整體提前 ，程式不會死掉
		fnMyalert();
		
		function fnMyalert(){
			alert("hello word!");
		}

	</script>
</head>
<body>
	
</body>
</html>

5.函數傳參

  1. 在函數定義的時候可以設定參數，友善傳遞參數的時候使用 
    <script type="text/javascript">

		window.onload = function(){
			// 定義的時候留參數位置
			function fnChange(Cstyle, val){
				var oDiv = document.getElementById("box");
				oDiv.style[Cstyle] = val;
			}
			// 函數調用傳遞參數
			fnChange("color","red");
		}
		
	</script>
  2. 如果一個函數有傳回值可以用return 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function fnAdd(a,b){
			var c = a+b;
			alert("内部c= "+ c);

			// return 的作用是将函數執行的結果傳回，并且而結束函數 還可以阻止預設行為 -- 阻止表單的送出
			return c;
			alert("return 後的 c=" + c);
		}

		var iNum = fnAdd(2,7);
		alert(iNum);
	</script>
</head>
<body>
	
</body>
</html>

6.封閉函數

  1. 封閉函數的作用

    建立一個封閉的空間，字啊這個空間中建立的變量不受外界影響，也不影響外界

  2. 封閉函數的寫法
    1. 給函數整體加括号
    2. 在函數定義前加感歎号
    3. 在函數定義前加波浪線
  3. 三種寫法如下： 
    <script type="text/javascript">

		// 封閉函數寫法一  整體加括号
		(function(){
			alert("hello word");
		})();

		// 封閉函數寫法二 加感歎号
		!function(){
			alert("hello word 2");
		}();

		// 封閉函數寫法三  加波浪線
		~function(){
			alert("hello word 3");
		}();
		
	</script>
  4. 注：為了防止程式出現錯誤 就在封閉函數前加一個";" 可以避免壓縮的時候出錯

四、運算符和條件語句

1.條件語句

  1. if else 和switch
  2. 執行個體 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>随着星期變換背景</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 4;
			var oBody = document.getElementById("body01");

			/*
				if (iWeek == 1){
					oBody.style.backgroundColor="gold";
				}
				else if (iWeek == 2){
					oBody.style.backgroundColor="blue";
				}
				else if (iWeek == 3){
					oBody.style.backgroundColor="green";
				}
				else if (iWeek == 4){
					oBody.style.backgroundColor="lightgreen";
				}
				else if (iWeek == 5){
					oBody.style.backgroundColor="pink";
				}
				else{
					oBody.style.backgroundColor="yellogreen";
				}
				簡寫：
			*/
			switch(iWeek){
				case 1: 
					oBody.style.backgroundColor="gold";
					break;  // 沒有break則會自動向下比對
				case 2:
					oBody.style.backgroundColor="blue";
					break;
				case 3:
					oBody.style.backgroundColor="green";
					break;
				case 4:
					oBody.style.backgroundColor="lightgreen";
					break;
				case 5:
					oBody.style.backgroundColor="pink";
					break;
				// 如果上面都不滿足執行下面那句
				default:
					oBody.style.backgroundColor="yellogreen";
			}
		}
		
	</script>
</head>
<body id="body01">
	
</body>
</html>

2. 算術運算符

  1. +(加)、 -(減)、 (乘)、 /(除)、 %(求餘）

  2. 執行個體：

    加法：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>電腦</title>
	<script type="text/javascript">
		window.onload = function(){
			var oInput01 = document.getElementById("input01");
			var oInput02 = document.getElementById("input02");
			var oBtn = document.getElementById("btn");

			oBtn.onclick = function(){
				var sVal01 = oInput01.value;
				var sVal02 = oInput02.value;
				// 字元串轉成數字 parseInt--去掉小數部分 / Number
				// iVal01 = Number(sVal01)
				// iVal02 = Number(sVal02)
				iVal01 = parseInt(sVal01);
				iVal02 = parseInt(sVal02);
				alert(iVal01+iVal02);
			}
		}
	</script>
</head>
<body>
	<input type="text" name="" id="input01"> +
	<input type="text" name="" id="input02">
	<input type="button" name="" value="相加" id="btn">
</body>
</html>

求餘數：

<script type="text/javascript">
		var iNum01 = 10;
		var iNum02 = 3;
		alert(iNum01%iNum02);

		var iNum03 = 0;
		var iNum04 = 10;
		alert(iNum03%iNum04);  //彈出一個0
	</script>

3.指派運算符

  1. =、 +=、 -=、 =、 /=、 %=
  2. 執行個體： 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>指派運算</title>
	<script type="text/javascript">
		var iNum01 = 12;

		// iNum01 = iNum01 + 2; 可以簡寫成下面的方法
		iNum01 += 2

		// iNum01 = iNum01 -2;
		iNum01 -= 2;

		// iNum01 = iNum01*2;
		iNum01 *= 2;

		// iNum01 = iNum01 / 2;
		iNum01 /= 2;

		// iNum01 = iNum01 % 2;
		iNum01 %= 2;
		alert(iNum01);

		iNum01++;  // 等同于 iNum01+=1
		alert(iNum01)

	</script>
</head>
<body>
	
</body>
</html>

4. 條件運算符 

== 、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
           
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>條件運算符</title>
	<script type="text/javascript">
		var iNum01 = 2;
		var sNum01 = "2";
		// == 判斷的話會是相等  --> 會将兩個變量的類型轉成同一類型
		// 解決這個問題要用 ===  : 先比較兩個變量的類型
		if (iNum01==sNum01){
			alert("相等");
		}
		else{
			alert("不相等");
		}


		// !=
		if (3!=4){
			alert(true);
		}


		// ! -- 否 取反  運算是true 取反後為false
		if (!3>4){
			alert("不大于");
		}
		else{
			alert("大于");
		}

		// && 而且   兩個都要成立 有一個不成立則為false
		if (4>3 && 5>2){
			alert("都是大于");
		}
		else{
			alert("不是都大于");
		}

		// || 或者 有一個是true則最終就是true
		if (4>3 || 4>5){
			alert("至少有一方成立");
		}
		else{
			alert("兩方都不成立")
		}
	</script>
</head>
<body>
	
</body>
</html>

五、總結

  1. return的作用：
    1. 傳回函數的執行結果
    2. 結束函數的運作
    3. 阻止預設行為
    4. 阻止事件冒泡
  2. == 和 ===的差別

    == :判斷的話會是相等 --> 會将兩個變量的類型轉成同一類型

    ===：會先比較兩個變量的類型

  3. 在原生js中如果擷取元素要注意一下幾點
    1. 使用要将擷取元素的過程寫在最後或者要寫在window.onload中 ，要補回出現找不到的情況
    2. 使用标簽擷取元素的方法擷取的時候，擷取的是一個選擇集，不能直接加樣式

  4. 封閉函數

    為了防止壓縮後js代碼出問題一般在函數結束後就一個分号";"

前端 js javascript html
上一篇: 計算機上無開根号功能 怎麼計算機,攻略：2019年中級會計師無紙化考試 電腦怎麼開根号？...
下一篇: 物種分歧時間、分子進化速率計算TimeTree、PAML mcmctree、codeml

繼續閱讀