自學者須要用到的js

做爲一個剛步入javaWeb的新手，不知道要用到哪些知識點，更不知從何下手，因而就跑去找有關js的資料，把js從頭至尾地學，這篇博文就來談談第一次作Javaweb項目須要用到哪些js技術。javascript

js內容普遍、太多太雜，你從頭至尾都要學完，要猴年馬月才能學完呀，項目何時才能夠動手啊。在js這方面，我是自學過來的，有着這方面的經驗。這裏我給你們闡述一下：css

var//定義變量，就靠這一個就能夠了（不會吧不會吧，這年頭變量還要定義的嗎，說的就是java）

var a = 1;//數字
var b = '字符';//字符
var c = 1.1;//數字
var d = "字符";//字符
//結論：自動識別類型，不用刻意去定義，什麼均可以裝

alert//彈窗，能夠用來在彈窗中顯示信息，我通常都是用來顯示成功、失敗之類的信息，也經常使用來測試代碼，跟java中的syso用法同樣
```
alert(123);
alert("字符串");
```
function//在項目中，js是用來提供函數和方法的，這些都是有必定規律性的，掌握這一個基本上都夠用了，將函數什麼的寫在括號裏面就能夠了
```
//定義一個方法
function 方法名(){
    
}
```
js經過給h5設定的id名，進行識別元素
```
<p id="thing"></p>
```
document.getElementById("id")//獲取元素，*這個很重要

在js中可能是靠這個來獲取元素的html

var thing = document.getElementById("thing");
/*將thing元素裝到thing變量裏面，後面要使用當前元素時，能夠直接拿thing來使用，省去再次編寫document.getElementById("thing")*/

結合上面所述展現一個實際操做：java

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				var thing = document.getElementById("thing");//獲取元素
				alert(thing);//輸出thing裏面裝的值
			}
		</script>
	</head>
	<body>
		<p id="thing" onclick="b1()">hello ,dscn</p>
	</body>
</html>

6.innerHTML//該元素裏面的內容，當前元素裏面全部的東西web

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				var thing = document.getElementById("thing").innerHTML;//獲取元素裏面的內容
				alert(thing);//輸出thing裏面裝的值
			}
		</script>
	</head>
	<body>
		<p id="thing" onclick="b1()"><span>hello ,dscn</span></p>
	</body>
</html>

經過該方法還能夠修改裏面的內容函數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				document.getElementById("thing").innerHTML="<input type='text' value='修改後' />";
			}
		</script>
	</head>
	<body>
		<div id="thing">
			<input type="button" value="修改" onclick="b1()"/>
		</div>
	</body>
</html>

調用前：測試

調用後：字體

7.value//跟innerHTML有着至關大的區別，這個是獲取當前元素value裏面的值spa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				var thing = document.getElementById("thing").value;//獲取元素
				alert(thing);//輸出thing裏面裝的值
			}
		</script>
	</head>
	<body>
		<input id="thing" type="button" value="hello,dscn" onclick="b1()"/>
	</body>
</html>

經過該方法能夠修改value值3d

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				document.getElementById("thing").value="修改後";
			}
		</script>
	</head>
	<body>
		<input id="thing" type="button" value="hello,dscn" onclick="b1()"/>
	</body>
</html>

調用前：

調用後：

8. 經過js修改當前元素的css樣式*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				document.getElementById("thing").style.color="red";
			}
		</script>
	</head>
	<body>
		<input id="thing" type="button" value="修改" onclick="b1()"/>
	</body>
</html>

調用前：

調用後：

這裏有個規律，修改css樣式時，都可這樣寫js

好比：

document.getElementById("thing").style.color="red";//字體顏色改成red
				document.getElementById("thing").style.display="none";//隱藏
				document.getElementById("thing").style.fontSize="18px";//字體大小改成18px
				document.getElementById("thing").style.backgroundColor="white";//背景顏色改成白色
				document.getElementById("thing").style.width="100%";//寬度改成100%
				document.getElementById("thing").style.height="100vh";//高度改成100vh

以上等等，還有不少，均可以這樣寫，用來修改當前元素的css樣式。

9.if//判斷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 下面是js代碼塊 -->
		<script>
			// 定義一個方法，當點擊p標籤的時候調用b1()該方法
			function b1(){
				var thing = document.getElementById("thing").value;
				if (thing=="修改") {
					thing="判斷成功";
					document.getElementById("thing").value=thing;
				} else{
					thing="判斷失敗";
					document.getElementById("thing").value=thing;
				}
			}
		</script>
	</head>
	<body>
		<input id="thing" type="button" value="修改" onclick="b1()"/>
	</body>
</html>

原來效果：

成功效果：

失敗效果：

這個跟java裏面的if是差很少的，常常用在非空判斷上，經常使用的符號有==（相等）、===（從各類意義上徹底相等）、&&（和）、||（或）、!=等；

10.鼠標事件

？？？鼠標事件不是經過h5識別的嗎，不關我js的事呀，事件想要什麼效果，我（js）給你一個方法就是咯。

結尾：

剛寫javaweb時，手足無措，不知道該怎麼作，就想着把須要的東西都學會纔開始，學不完的，知識是永遠學不玩得，掌握所需的內容纔是重中之中，其餘時間再來補充沒有用到的知識。自學的時候，先思考要實現成什麼樣子，再來思考如何去實現，不會的知識就上網搜索，走一步看一步，一步一步得走纔是自學的最好方式——由於你懂得了如何使用和所需知識。

差很少就是這些了，可能還有一些我沒記住寫出來的，也有一些我不知道的，能夠在評論裏面寫出來哦，我會加在這篇博文裏面的，編寫不易，若是本人的博文對你有所幫助的話，但願給我點個贊，這就是對我最好的承認。

自述：javaWeb剛學時所須要的用到的js

自學者須要用到的js