自述:javaWeb剛學時所需要的用到的js
自學者需要用到的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時,手足無措,不知道該怎麼做,就想著把需要的東西都學會才開始,學不完的,知識是永遠學不玩得,掌握所需的內容才是重中之中,其他時間再來補充沒有用到的知識。自學的時候,先思考要實現成什麼樣子,再來思考如何去實現,不會的知識就上網搜尋,走一步看一步,一步一步得走才是自學的最好方式——因為你懂得了如何使用和所需知識。
差不多就是這些了,可能還有一些我沒記住寫出來的,也有一些我不知道的,可以在評論裡面寫出來哦,我會加在這篇博文裡面的,編寫不易,如果本人的博文對你有所幫助的話,希望給我點個贊,這就是對我最好的認可。
相關文章
- Javaweb都有哪些框架需要學習?JavaWeb框架
- 學Java需要用到的軟體快收藏!Java
- 剛開始學習nlp時遇到的問題
- 需要用到的Linux命令Linux
- 爬蟲需要用到的包爬蟲
- 己回憶當初開始學oracle時用到的Oracle
- java基礎學習:JavaWeb之JSPJavaWebJS
- 學習UI設計需要用到哪些工具UI
- #剛拿到阿里offer小夥的Java開發要求自述,你覺得你能去阿里嗎阿里Java
- 好用到哭!你需要立刻學會的20個Python程式碼段Python
- 初學javaweb遇到的問題JavaWeb
- **一些會用到的js方法JS
- js用到的一些工具方法JS
- 剛開始找工作所面臨的開發問題
- 工作學習生活有需要用到的手機APP,實用又方便。APP
- JavaWeb之JSPJavaWebJS
- 掌握一個事物時所需要學會的
- Node.js: 一個剛剛夠用的 HTTPS 伺服器Node.jsHTTP伺服器
- 剛剛學習java前幾天,自己的簡單概括Java
- Javaweb目前的未來學習方向JavaWeb
- Pbootcms將日期時間轉換成"剛剛、幾分鐘、幾小時前"的形式boot
- 你的專案剛剛啟動?是時候考慮Globalization了!
- 我所瞭解的RxJSJS
- 平時自己專案中用到的 CSSCSS
- JavaWEB開發03——JSJavaWebJS
- Javaweb開發為什麼需要分前後端,放棄原生JSPJavaWeb後端JS
- 搭建網路教學平臺時,所用到的體系結構(下)
- 學javascript需要用到哪些開發工具?分享這幾款JavaScript
- 對JAVAWEB相關知識的學些JavaWeb
- SQLServer中需要經常用到的幾個設定選項SQLServer
- javaweb學習4JavaWeb
- 配置JPETSTORE時的幾處錯誤,剛剛接觸JDON,無法處理
- iOS時間格式化“剛剛、幾分鐘前、幾小時前”等,[包括時間戳&格式化後的時間]...iOS時間戳
- 今天剛上手爬蟲,當然要從最簡單的開始啦,驗證一下所學的知識爬蟲
- 小程式出現的時機剛剛好!未來的實體店都必須站隊!
- 學員自述!自進老男孩linux運維培訓班的學習感悟Linux運維
- 迷茫時,學習Node.js最好的方法Node.js
- 有時臨時會用到的線上原始碼美化網站原始碼網站