自學者需要用到的js
作為一個剛步入javaWeb的新手，不知道要用到哪些知識點，更不知從何下手，于是就跑去找有關js的資料，把js從頭到尾地學，這篇博文就來談談第一次做Javaweb專案需要用到哪些js技術，
js內容廣泛、太多太雜，你從頭到尾都要學完，要猴年馬月才能學完呀，專案什么時候才可以動手啊，在js這方面，我是自學過來的，有著這方面的經驗，這里我給大家闡述一下：
- 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中多是靠這個來獲取元素的
var thing = document.getElementById("thing");
/*將thing元素裝到thing變數里面，后面要使用當前元素時，可以直接拿thing來使用，省去再次撰寫document.getElementById("thing")*/
結合上面所述展示一個實際操作：
<!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//該元素里面的內容，當前元素里面所有的東西
<!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里面的值
<!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值
<!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時，手足無措，不知道該怎么做，就想著把需要的東西都學會才開始，學不完的，知識是永遠學不玩得，掌握所需的內容才是重中之中，其他時間再來補充沒有用到的知識，自學的時候，先思考要實作成什么樣子，再來思考如何去實作，不會的知識就上網搜索，走一步看一步，一步一步得走才是自學的最好方式——因為你懂得了如何使用和所需知識，
差不多就是這些了，可能還有一些我沒記住寫出來的，也有一些我不知道的，可以在評論里面寫出來哦，我會加在這篇博文里面的，撰寫不易，如果本人的博文對你有所幫助的話，希望給我點個贊，這就是對我最好的認可，
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/163549.html
標籤：其他