自述:javaWeb刚学时所需要的用到的js

   日期:2020-10-08     浏览:85    评论:0    
核心提示:自学者需要用到的js作为一个刚步入javaWeb的新手,不知道要用到哪些知识点,更不知从何下手,于是就跑去找有关js的资料,把js从头到尾地学,这篇博文就来谈谈第一次做Javaweb项目需要用到哪些js技术。js内容广泛、太多太杂,你从头到尾都要学完,要猴年马月才能学完呀,项目什么时候才可以动手啊。在js这方面,我是自学过来的,有着这方面的经验。这里我给大家阐述一下:var//定义变量,就靠这一个就可以了(不会吧不会吧,这年头变量还要定义的吗,说的就是java) var a = 1;//数字

自学者需要用到的js

作为一个刚步入javaWeb的新手,不知道要用到哪些知识点,更不知从何下手,于是就跑去找有关js的资料,把js从头到尾地学,这篇博文就来谈谈第一次做Javaweb项目需要用到哪些js技术。

js内容广泛、太多太杂,你从头到尾都要学完,要猴年马月才能学完呀,项目什么时候才可以动手啊。在js这方面,我是自学过来的,有着这方面的经验。这里我给大家阐述一下:

  1. var//定义变量,就靠这一个就可以了(不会吧不会吧,这年头变量还要定义的吗,说的就是java)
    var a = 1;//数字
    var b = '字符';//字符
    var c = 1.1;//数字
    var d = "字符";//字符
    //结论:自动识别类型,不用刻意去定义,什么都可以装

     

  2. alert//弹窗,可以用来在弹窗中显示信息,我一般都是用来显示成功、失败之类的信息,也常用来测试代码,跟java中的syso用法一样
    alert(123);
    alert("字符串");

     

  3. function//在项目中,js是用来提供函数和方法的,这些都是有一定规律性的,掌握这一个基本上都够用了,将函数什么的写在括号里面就可以了
    //定义一个方法
    function 方法名(){
        
    }

     

  4. js通过给h5设定的id名,进行识别元素
    <p id="thing"></p>

     

  5.  document.getElementById("id")//获取元素,*这个很重要

 在js中多是靠这个来获取元素的

var 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时,手足无措,不知道该怎么做,就想着把需要的东西都学会才开始,学不完的,知识是永远学不玩得,掌握所需的内容才是重中之中,其他时间再来补充没有用到的知识。自学的时候,先思考要实现成什么样子,再来思考如何去实现,不会的知识就上网搜索,走一步看一步,一步一步得走才是自学的最好方式——因为你懂得了如何使用和所需知识。

差不多就是这些了,可能还有一些我没记住写出来的,也有一些我不知道的,可以在评论里面写出来哦,我会加在这篇博文里面的,编写不易,如果本人的博文对你有所帮助的话,希望给我点个赞,这就是对我最好的认可。

 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服