JavaScript基本知识

最新推荐文章于 2023-10-24 22:05:07 发布

lxn11140

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量413

点赞数

分类专栏： javaScript 文章标签： JavaScript 函数 className 函数传参 window.onload

本文链接：https://blog.csdn.net/lxn11140/article/details/52169745

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 <pre class="javascript" name="code">一、	javaScript
简单地说，javaScript就是修改样式
编写JS的流程：
1、布局:html+css
2、属性：确定要修改哪些属性
3、事件：确定用户做哪些操作（产品设计）
4、编写JS：在事件中，用JS修改页面元素的样式


二、函数
1、直接在事件内些代码会很乱
	1》、引入function（）函数的基本形式
	2》、把JS从标签里放入到函数里，类似css的class
	3》、变量的使用——别名

2、定义和调用
	1》、函数定义：只是告诉系统有这个函数不会执行
	2》、函数调用：执行函数里的代码
	3》、函数先定义、后执行
举例：div的颜色、大小的变化
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>div颜色、大小</title>
	<style>
	    #div1{width:100px;height:100px;background-color:red }
	</style>
	<script>
		function toGreen(){
			var oDiv = document.getElementById("div1");
			
			oDiv.style.width = '200px';
			oDiv.style.height = '200px';
			oDiv.style.background = 'green';
		}
		function toRed(){
			var oDiv = document.getElementById("div1");
			
			oDiv.style.width = '100px';
			oDiv.style.height = '100px';
			oDiv.style.background = 'red';
		}
	</script>
</head>
<body>
	<div id = "div1" οnmοuseοver="toGreen()" οnmοuseοut="toRed()"></div>
 </body>
</html>



在标签中直接调用toGreen()、toRed()函数，而不直接把toGreen()、toRed()的内容放入标签里


三、getElementById
JS兼容性问题：在FF下直接使用ID存在问题
	1、引入document.getElementById()
	2、document.getElementById()在任何浏览器下均可使用
举例：网页换肤
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link id = "link1" rel = "stylesheet" type = "text/css" href = "skin1.css">
	<script>
		function skin1(){
			var oL = document.getElementById("link1");
 			oL.href = "skin1.css";
		}
		function skin2(){
			var oL = document.getElementById("link1");
 			oL.href = "skin2.css";
		}
	</script>
</head>
<body>
	<input type = "button" value = "Skin1" οnclick="skin1()"/>
	<input type = "button" value = "Skin2" οnclick="skin2()"/>
</body>
</html>

	1、任何标签都可以加ID，包括link
	2、任何标签的任何属性也都可修改
	3、 HTML里怎么写，JS里就怎么写（除class外：class是保留字，要使用className）

className的使用举例：
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style>
	  #div1{width:100px;height:100px;border:1px solid black}
	  .box{background: red}
	</style>
	<script>
	  function toBlue() {
		var oDiv = document.getElementById("div1");
		//oDiv.style.background = "red";
		//alert(oDiv.style.background);
		oDiv.style.background = "blue";
	}
	  function toGreen() {
			var oDiv = document.getElementById("div1");
			//oDiv.style.background = "red";
			//alert(oDiv.style.background);
			oDiv.className = "box";
		}
	</script>
</head>
<body>
	<input type = "button" οnclick="toBlue()"/>
	<input type = "button" οnclick="toGreen()"/>
 	<div id = "div1"></div>
</body>
</html>
说到className，顺便就扯一下style
通过style加样式  样式是加在行间
通过style取样式  样式是在行间取出
注意观察下面两图片的区别：
如下图：通过style和className加样式，在运行时样式是加在行间的，标签中多了background属性，弹出的提醒框的background是blue，style取样式时，样式是在行间取出 
<img src="https://img-blog.csdn.net/20160810112443898?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 

再如下图：如果background是在内联样式中声明，运行时background不会添加到标签，弹出的提醒框的background无内容，因为style取样式时，样式是在行间取出
 <img src="https://img-blog.csdn.net/20160810112454164?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
样式优先级：.<标签<class<id<行间
style与className
1、元素.style.属性=xxx    ：是修改行间样式
2、之后再修改className不会有效果
如刚才的例子：
 <img src="https://img-blog.csdn.net/20160810112434133?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

先按变绿按钮，div先变绿，再按变蓝按钮，div变蓝。这时没问题的。但是之后再按钮变绿按钮，div的颜色不会再改变，因为，行间里有style样式，它的优先级比class高！！！


四、函数传参 
通俗的说，参数就是占位符（定义时值不确定、调用时赋值）
   举例：改变背景颜色
   <html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<style>
			#div1{width:200px;height:200px;background: blue;margin: 10px}
		</style>
		<script>
		 	/*function toGreen()
		 	{
		 		var oDiv = document.getElementById("div1");
		 		oDiv.style.background = "green";
		 	}
		 	function toYellow()
		 	{
		 		var oDiv = document.getElementById("div1");
		 		oDiv.style.background = "yellow";
		 	}
		 	function toBlack()
		 	{
		 		var oDiv = document.getElementById("div1");
		 		oDiv.style.background = "black";
		 	}*/
		 function setColor(color)
		 {
		 	var oDiv = document.getElementById("div1");
		 	oDiv.style.background = color;
		 }
		</script>
</head>
<body>
   <input type = "button" value = "toGreen" οnclick="setColor('green')"/>
   <input type = "button" value = "toYellow" οnclick="setColor('yellow')"/>
   <input type = "button" value = "toBlack" οnclick="setColor('black')"/>
   <div id = "div1"></div>
</body>
</html>
如果三个按钮分别用toGreen()、toYellow()、toBlack()三个函数可以实现div变色功能，但是，我们发现这三个函数基本上一致，可以通过setColor()函数代替，只是要把它们不同的地方在调用时通过参数传递
什么时候用传参：函数里定不下来的东西（颜色）
 将属性名作为参数传递
举例：改变div的任意样式：
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style>
		#div1{width:100px;height:100px;background: red;margin: 5px}
	</style>
	<script>
		function setStyle(name,value)
		{
			var oDiv = document.getElementById("div1");
			//第一种操作属性的方法：obj.属性名 ：方便
			//oDiv.style['height'] = "50px";
			//第一种操作属性的方法：obj['属性名']：字符串，可用变量代替，用于传参
			//oDiv.style.width = "50px";
			
			//用点的地方都可以用[],用[]的地方不一定能用点代替

			oDiv.style[name] = value;
		}
	</script>
</head>
<body>
	 <input type = "button" value = "toBlue" οnclick="setStyle('background','blue')"/>
	 <input type = "button" value = "toWidth" οnclick="setStyle('width','300px')"/>
	 <input type = "button" value = "toHeight" οnclick="setStyle('height','200px')"/>
	 <div id = "div1"></div>
</body>
</html>
这个例子中将属性名作为参数传递，同时还发现一个有趣的事情。属性有两种操作方式
两种操作属性的方法：
obj.属性名 ：	优点：方便 
obj['属性名']：优点：属性是字符串，可用变量代替，传参
！！！注意：用.的地方都可以用[],用[]的地方不一定能用.代替

 
五、window.onload
window.onload是在加载页面完成之后再执行window.onload里面的内容。这点非常重要！！看下面的例子：
 
 <img src="https://img-blog.csdn.net/20160810112500961?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<img src="https://img-blog.csdn.net/20160810112508102?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<img src="https://img-blog.csdn.net/20160810112515164?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 
 

第一图片：script可以放在body中，此时没有window.onload,程序可以运行，因为函数是在定义button后在使用的
第二图片：oBtn.onclick报错，因为程序按顺序执行，此时页面还没加载出来，即还没有定义button，程序找不到它，所以报错。
第三图片：函数放在window.onload中，可以实现其功能。

！！！注意：次例子还有一点，主要观察，函数的写法：
	1 、定义：function 函数名（）{}   	调用：事件 = 函数名（）
	2 、事件 = function（）{}		即;定义与调用一起，可以省去我们想名字的时间