小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

四.JavaScript(一) 2021-02-23_wtv@cu.

作者：小小林熬夜学编程 | 2024-02-27 20:33:50

踩

wtv@cu.

四.JavaScript(一)

1.JavaScript的基本使用

1.JavaScript 是什么

JavaScript原名liveScript, 是一门动态类型，弱类型基于原型的脚本语言

2.JavaScrpit 的作用

1. 页面特效

2. 前后交互

3. 后台开发（ node ）

3.JavaScript 写在哪里

1. Script 标签里

2. 外部的 js 文件内

例：

1.1JavaScript的注意事项

1.JavaScript是一种脚本语言，是一种动态类型、弱类型

2.JavaScript通常用来操作HTML页面的

html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

JS代码写在哪里：

script标签里面

写在外部.js后缀文件里面，通过script标签引入

写在标签里面

注意：在引入js文件的script里面，一定不能再写js代码

标签里面写js代码一般情况下不推荐(指行内的样式)

script标签的位置：

head或者body里面

要注意是否需要加上window.onload(如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上：window.onload)

如果说没有什么特别的要求，一般script标签放在body结束之前

例：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
	</style>
		
	<script>
		//alert(8);
		//如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上：window.onload
		window.onload=function(){
			alert(8);
			//这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码）
		}
		//一个页面中只能出现一次window.onload
	</script>
</head>
<body>
	<script src="index.js"></script>
	<script>
		/*
		1.JavaScript是一种脚本语言，是一种动态类型、弱类型
		2.JavaScript通常用来操作HTML页面的
			html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)
			
		JS代码写在哪里：
			script标签里面
			写在外部.js后缀文件里面，通过script标签引入
			写在标签里面
		注意：在引入js文件的script里面，一定不能再写js代码
			标签里面写js代码一般情况下不推荐(指行内的样式)
		
		script标签的位置：
			head或者body里面
			要注意是否需要加上window.onload
			如果说没有什么特别的要求，一般script标签放在body结束之前
		*/
		alert(55);//弹窗调试代码
		//Alert(5);
		console.log(888);//打印调试代码
	</script>
</body>
</html>

运行结果：

1.2 JavaScript 修改元素内容

1. 首先获取id为xxx的元素

document.getElementById(“”);

2. var 是 js 定义变量的关键字

3. innerHTML 和 innerText 可以修改/获取

1.3JavaScript获取元素

1. id ：

document.getElementById(“”); 通过id获取元素

2. class ：

document.getElementsByClassName(“”); 通过class名字获取元素

3.tagName :

document.getElementsByTagName(“”); 通过标签名获取元素

4. name :

document.getElementsByName(“”); 通过 name的属性获取元素，一般用于input

5. selector :

document.querySelector (“”); 通过CSS选择器获取一个

document.querySelectorAll(“”);通过CSS选择器获取所有

2.简单事件

onclick 单击事件

ondbclick 双击事件

onmouseenter 鼠标划入

onmouseleave 鼠标划出

onresize 窗口变化

onchange 改变下拉框

例：以cnsole打印的方式

所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应。

在事件函数里面，有一个关键字this，代表当前触发事件的这个元素

事件：用户的操作

元素.事件=函数；

鼠标事件：

左键单击onclick

左键双击ondblclick

鼠标移入onmouseover/onmouseenter***

鼠标移出onmouseout/onmouseleave***

例：以this的方式触发事件


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:300px;
			height:100px;
			line-height:100px;
			text-align:center;
			margin:50pxauto;
			background:#51cfff;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box1"></div>
	<div class="box1"></div>
	<script>
		/*
		所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应。
		在事件函数里面，有一个关键字this，代表当前触发事件的这个元素
		事件：用户的操作
		元素.事件=函数；
		鼠标事件：
		左键单击onclick
		左键双击ondblclick
		鼠标移入onmouseover/onmouseenter***
		鼠标移出onmouseout/onmouseleave***
		*/
 
		var aBox=document.querySelectorAll(".box1");
        
        /* aBox[i]代表了按顺序排列的第几号盒子 */ 
		aBox[0].onclick=function(){
			this.innerHTML="我被点击了";
		};
 
		aBox[1].onmouseenter=function(){
			aBox[0].innerHTML="下面被移入了";
			this.innerHTML="我被移入了";
		};
		aBox[2].onmouseleave=function(){
			this.innerHTML="我被移出了";
		};
	</script>
</body>
</html>

运行结果：

3.修改样式

3.1操作标签

例：

js操作元素的标签属性：

规范的标签属性：

.符号直接操作（可读可写）

不规范（自定义）的标签属性：

获取：.getAttribute()

设置：.setAttribute()

移除：.removeAttribute()

注意：

所有的路径、颜色获取的结果不一定是你写的内容

通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素

自定义标签属性的操作方式，同样可以操作符合规范的标签属性

例：


<!DOCTYPE  html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
	</style>
</head>
<body>
	<a href="01-作业.html"target="_blank"id="box"class="wrap"tz="xp">去百度</a>
	
	<script>
		/*
		js操作元素的标签属性：
		规范的标签属性：
			.符号直接操作（可读可写）
		不规范（自定义）的标签属性：
			获取：.getAttribute()
			设置：.setAttribute()
			移除：.removeAttribute()
			
		注意：
		所有的路径、颜色获取的结果不一定是你写的内容
		通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
		自定义标签属性的操作方式，同样可以操作符合规范的标签属性
		*/
		var oA=document.getElementById("box");
		//alert(oA.target);//可读性
		oA.target="_self";
		alert(oA.href);
		//oA.href="http://jd.com";//可写性
		//alert(oA.className);//class属性要用className
		oA.className="www";
		oA.className="";
		
		//alert(oA.getAttribute("tz"));
		//oA.setAttribute("tz","py");
		//oA.removeAttribute("tz");
		
		//alert(oA.getAttribute("href"));
		//oA.setAttribute("target","_black");
		
	</script>
</body>
</html>

运行结果：

3.2 JS 操作样式

例：

例：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:100px;
			height:50px;
			background:#51cfff;
		}
		.box{
			width:300px;
			height:300px;
			background:blue;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
	
		/*
		行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的
		*/
		var oBox=document.getElementById("box");
	
		oBox.onclick=function(){
			//oBox.style.width="300px";
			//oBox.style.height="300px";
			//oBox.style.backgroundColor="red";
			//oBox.style.cssText="width:300px;height:300px;background:red;"
		oBox.className="box";
		
			//操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
			//oBox.style.marginLeft="100px";
			//oBox.style["margin-left"]="150px";
		
		var a="margin-top";
		oBox.style[a]="50px";
		}
	</script>
</body>
</html

运行结果：点击后触发事件

4.JS数据类型

js六大数据类型

number——数字在js里面的小数和整数统一都是数字-2^53--2^53超出范围之后精度就会不准确

string——字符串

boolean——布尔值true false

null

undefined——未定义一个变量声明之后没有赋值就是undefined

object——对象

在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null

例：数据js类型打印

例：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
	</style>
</head>
<body>
	<script>
		/*
	js六大数据类型
	number——数字在js里面的小数和整数统一都是数字-2^53--2^53超出范围之后精度就会不准确
	
	string——字符串
	
	boolean——布尔值truefalse
	
	null
	
	undefined——未定义一个变量声明之后没有赋值就是undefined
	
	object——对象
	
	在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null
	*/
		//vara=8;//number
		//vara="5";//string
		//vara=true;//boolean
		//vara="false";//string
		//vara;//undefined
		
		//vara=[1,2,3,4];//object
		//vara={"name":"xiaopo","age":18};//object
		alert(typeof a);
	
	</script>
</body>
</html>

5.例：用JS 和表格实现属性转换

CSS文件：


 
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_922719_nb9px1crt1s.eot?t=1542488467316'); /* IE9*/
  src: url('//at.alicdn.com/t/font_922719_nb9px1crt1s.eot?t=1542488467316#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('//at.alicdn.com/t/font_922719_nb9px1crt1s.ttf?t=1542488467316') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_922719_nb9px1crt1s.svg?t=1542488467316#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-jiantouyou:before { content: "\e61f"; }
 
.icon-jiantouzuo:before { content: "\e620"; }
 
.icon-aixin:before { content: "\e7fa"; }
 
.icon-gouwuche:before { content: "\e606"; }
 
.icon-sousuo:before { content: "\e670"; }

HTML文件


 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=" http://at.alicdn.com/t/font_922719_nb9px1crt1s.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        input{
            width: 300px;
            height: 40px;
            margin:10px 10px;
        }
        .box{
            background-color: cornflowerblue;
            width: 200px;
            height: 50px;
            margin-left: 125px;
            text-align: center;
        }
        div{
            width:304px;
            height: 200px;
            background-color: #51cfff;
            margin-left: 75px;
            text-align: center;
            line-height: 200px;
            font-weight:bolder;
            font-size: 50px;
            color: indigo;
            position: relative;
            font-family: 华文彩云
        }
        div #box3{
            font-family:华文中宋;
            font-size: 25px;
            position: absolute;
            left: 115px;
            top:40px;
            height: 25px;
        }
    </style>
</head>
<body>
    &emsp;属&emsp;性<input type="text" placeholder="输入CSS属性" value=""><br>
    &emsp;属性值<input  type="text" placeholder="输入CSS属性值" value=""><br>
    <input class="box"  type="button" value="设置"><br>
    <div id="box2" style="">
        风雨同舟
        <p id="box3">明<i class="iconfont icon-aixin "></i>玥</p>
    </div>
     <script>
         var oBox2 =document.getElementById("box2");
         var oInput=document.getElementsByTagName("input");
         /*alert(oInput.length)*/
 
         oInput[2].onclick = function () {
             var a = oInput[0].value;
             var b = oInput[1].value;
             oBox2.style[a]=[b];
             oInput[0].value = "";
             oInput[1].value="";
 
         }
 
     </script>
</body>
</html>

运行结果：

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/155789