笔记-js篇

最新推荐文章于 2023-12-07 17:09:41 发布

置顶

拾荒者cg

最新推荐文章于 2023-12-07 17:09:41 发布

阅读量518

点赞数 6

分类专栏： js 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_38748506/article/details/103128158

版权

JavaScript引用：行内，内嵌，外部引入 </head><body>  <div onclick="this.style.background='yellow'">我是div2</div>  &l...

摘要由CSDN通过智能技术生成

JavaScript引用：行内，内嵌，外部引入

</head>
<body>
	   <!--行内-->
                 <div onclick="this.style.background='yellow'">我是div2</div>
           <!--内嵌-->
		<script type="text/javascript">
			/* var a = document.getElementById('box');
			a.style.background = 'red';
			a.style.color = '#fff';
			
			function fn() {
				a.style.background = 'green';
			}
			 */

		</script>
          <!--外部引入-->
          <script type="text/javascript" src="js/index.js"></script>

js的三大部分：1、ecmascript（规范，标准）简称es
2、DOM（对标签的操作）document object model文档对象模型
dom时关于增删改查页面元素的标准，通过document文档对页面元素的操作
3、BOM （对浏览器的操作）

console.log();控制台输出信息,在console查看

console.log('控制台输出信息');

alert();向窗口弹出消息

alert('弹窗');

debugger：断点查询，调用任何可用的调试功能，在sources查看

debugger;

document.write();往文档里写东西

document.write("你好");

writeln() 方法与 write() 方法作用相同，外加可在每个表达式后写一个换行符。

document.writeln("你好");
document.writeln("你好");

<script type="text/javascript" src="js/index.js" defer="defer"></script>

 <script type="text/javascript" src="js/index.js" async="async"></script>

//单行注释，不能超过一行

/**/多行注释,可以折行

//单行

/*

多行

/**/

变量：var 变量名=变量值；（声明存储数据的容器）
变量名规则：1、字母、美元符号、下划线、数字
2、不能以数字开头
3、语义化变量名
4、驼峰命名法：大驼峰，小驼峰
5、不能使用关键字、保留字
注：在js中区分变量名大小写
关键字：ecma规定一些单词，拥有特殊含义
保留字：即将成为关键字的单词

var username;
var userName;
var pass;

运算符：
1、算数运算符:+ - * / %
//加法

var x = 7;
var y = 8;
var z = x + y;

//减法

var x = 7;
var y = 8;
var z = x - y;

//乘法

var x = 7;
var y = 8;
var z = x * y;

//除法

var x = 7;
var y = 8;
var z = x / y;

//取模

var x = 7;
var y = 8;
var z = x % y;//分子%分母   
//分子大于分母，结果为余数。分子小于分母，结果为为分子。分子等于分母,结果为0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#bannel{
				width: 100%;
				height: 300px;
				margin: 0 auto;
			}
			img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">下一个</button>
		<button type="button" id="btn_prve">上一个</button>
		<div id="bannel">
			<img src="img/banner_01.jpg" id="img">
		</div>
		<script type="text/javascript">
			var btn=document.getElementById('btn');
			var btn_prve=document.getElementById('btn_prve');
			var img=document.getElementById('img');
			var num=0;
			
			btn.onclick=function(){
				num++;//单击一次num加1
				num%=4;//对num取模  1%4=1  2%4=2 3%4=3 4%4=0 5%4=1....
				console.log(num);
				img.src='img/banner_0'+num+'.jpg';//给img的src重新赋值 num为取模后的值
			}
			btn_prve.onclick=function(){
				num--;//单击一次num减1
				num%=4;//对num取模  -1%4=-1  -2%4=-2 -3%4=-3 -4%4=0 -5%4=-1....
				console.log(-num);
				img.src='img/banner_0'+-num+'.jpg';//给img的src重新赋值 num为取模后的相反值
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
				</tr>
			</thead>
			<tbody class="tbody">
				
			</tbody>
		</table>
		
		<script type="text/javascript">
			var tbodys=document.querySelector('.tbody');
			var str='';
			for(var i=1;i<21;i++){//for循环，从1开始，每次步长加1，循环21次
				
				if(i%2){//true  //对i取模  2%2=true  4%2=true (偶数行)
					str+='<tr style="background:red">'+
						'<td>'+(i>9?i:'0'+i)+'</td>'+
						'<td>存储</td>'+
						'<td>男</td>'+
						'<td>16</td>'+
					'</tr>';
				}else{//false //对i取模  1%2=false 3%2=false (奇数行)
					str+='<tr style="background:green;color:#fff">'+
						'<td>'+(i>9?i:'0'+i)+'</td>'+
						'<td>存储</td>'+
						'<td>男</td>'+
						'<td>16</td>'+
					'</tr>';
				}
				
				tbodys.innerHTML=str;//把str中的内容赋值到tody中
			}
		</script>
	</body>
</html>

2、赋值运算符：把右边值赋予左边的变量 = += -= *= /= ++ –

var username=document.getElementById('box');

//递加在自身基础上加1 +=1

var ble=8;
ble++;

//递减在自身基础上减1 -=1

var ble=8;
ble--;

//前置++（在自身基础上加1）先加后赋值

var num=5;
var box=null;
box=++num;
console.log(num,box)//结果为6 ，6

//后置++(在自身基础上加1)先赋值后加

var num=5;
var box=null;
box=num++;
console.log(num,box)//结果为6 ，5

3、关系运算符(判断运算符)：> < >= <= != == === !== 得到布尔值

var ble=2>1;
var ble=1>2;

//==只判断数值是否相等
//===判断数据类型和数值是否相等

4、逻辑运算符：
逻辑与（&&）若 expr1 可转换为 true，则返回 expr2；否则，返回 expr1。
逻辑或（||）若 expr1 可转换为 true，则返回 expr1；否则，返回 expr2。
逻辑非（!）若 expr 可转换为 true，则返回 false；否则，返回 true。

var ble=true&& true;//同时为true，整体才为true
var ble=false || true;//只要有一个为true，整体为true
var ble= !true  //先把要计算的数据隐式转换成布尔值，然后再把该布尔值取反

//注：等号两边一个个的判断布尔值

//if（）：可以把非布尔值类型转换成布尔值类型
//数字：非0数字都为true，0为false；
//字符串：非空字符串都为true，空字符串为false；
//空：空为false；
//未定义：未定义为false；
//对象：数组：数组为true
//对象：对象：对象为true

5、字符运算符：+ +=
//+左右两边只要不是数字，可用于连接字符串

var text1 = "Good ";
var text2 = "Morning";
var text3 = text1 + text2;

//字符串拼接轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#bannel{
				width: 100%;
				height: 300px;
				margin: 0 auto;
			}
			img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">下一个</button>
		<button type="button" id="btn_prve">上一个</button>
		<div id="bannel">
			<img src="img/banner_01.jpg" id="img">
		</div>
		<script type="text/javascript">
			var btn=document.getElementById('btn');
			var btn_prve=document.getElementById('btn_prve');
			var num=1;
			var img=document.getElementById('img');
			/* 上一个的点击事件 */
			btn_prve.onclick=function(){
				num=num-1;
				if(num<1){
					num=4;
				}
				img.src='img/banner_0'+num+'.jpg';
				console.log(num);
			}
			/* 下一个的点击事件 */
			btn.onclick=function(){
				num=num+1;
				if(num>4){
					num=1;
				}
				img.src='img/banner_0'+num+'.jpg';
				console.log(num);
			}
			
		</script>
	</body>
</html>

//+=左右两边只要不是数字，可用于连接字符串

var text1 = "Good ";
var text2 = "Morning";
text1 += text2

6、逗号运算符

var a=null,
    b=null,
    c=null;

运算符：
一元运算符：! typeof new delete (计算一个值)
二元运算符：+ - * / || && += = -=(计算两个值)
三元运算符/三目运算符：判断条件？真的值：假的值(计算两个值的)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" >
		<script type="text/javascript">
			var img=document.querySelector('img');
			var onoff=true;
			
			img.onclick=function(){
				onoff=!onoff;
				img.src=onoff?'img/1.jpg':'img/2.jpg';
			}
		</script>
	</body>
</html>

获取元素：1、通过id获取 document.getElementById(‘id名’);

<div id="box"></div>
var username=document.getElementById('box');

2、通过class获取 document.getElementsByClassName(‘class名’);
结果为类数组,每个数据就是找到的元素,通过下标可以找到具体的元素

<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>
<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>
var boxs=document.getElementsByClassName('box');
console.log(boxs);
boxs[1].style.background='red';
boxs[1].onclick=function(){
	boxs[1].style.background='fuchsia';
}

3、通过标签名获取元素 document.getElementsByTagName(‘标签名’);
结果为类数组,每个数据就是找到的元素,通过下标可以找到具体的元素

<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>
<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>
var divs=document.getElementsByTagName('div');
console.log(divs);
divs[0].style.background='yellow';
divs[0].onclick=function(){
	divs[0].style.background='green';
}

//获取所有标签

var divAll=document.getElementsByTagName('*');
console.log(divAll);

4、通过选择器获取元素 document.querySelector(‘css选择器’);
结果只找到第一个元素就结束

<div class="box" id="box">
	<p>aaa</p>
	<p>aa</p>
</div>
<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>
var div1=document.querySelector('.box');
console.log(div1);
var div2=document.querySelector('#box');
console.log(div2);

5、通过选择器获取元素 document.querySelectorAll(‘css选择器’);
结果为类数组,每个数据就是找到的元素,通过下标可以找到具体的元素

<div class="box" id="box">
	<p>aaa</p>
	<p>aa</p>
</div>
<div class="box">
	<p>aaa</p>
	<p>aa</p>
</div>

var div2=document.querySelectorAll('.box');
console.log(div2);
div2[0].style.background='yellow';
div2[0].onclick=function(){
	div2[0].style.background='green';
}

//获取所有标签

var divAll=document.querySelectorAll('*');
console.log(divAll);

获取元素的组合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul class="list">
			<li>a</li>
			<li>b</li>
			<li class="lis"><a href="">c</a></li>
			<li class="lis"><a href="">d</a></li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<script type="text/javascript">
			var list=document.getElementsByClassName('list')[0];
			var list_li=list.getElementsByTagName('li');
			console.log(list_li);
			var lis=list.getElementsByClassName('lis');
			console.log(lis);
			
		</script>
	</body>
</html>

通过js操作只能操作行间样式
.：什么的
标签.属性.样式名=‘样式值’；

document.getElementById('box').style.color='red';

class关键字，不能用来找标签的类，通过.className找到；

document.getElementById('box').className='user';

事件：用户触发的JavaScript的处理程序
事件：onClick（单击），鼠标移入onmouseenter，鼠标移出onmouseleave，oninput 当value改变触发事件
标签.事件=function(){}

document.getElementById('box').onclick=function(){
    document.getElementById('box').style.color='red';
}
document.getElementById('box').onmouseenter=function(){
    document.getElementById('box').style.color='red';
}
document.getElementById('box').onmouseleave=function(){
    document.getElementById('box').style.color='red';
}

数据类型：
基本数据类型： 1、数值型(Number) 0-9
2、字符串(String) “被引号包裹的内容”,‘被引号包裹的内容’
3、布尔(Boolean) true,false
4、对空（Null）尚未存在的对象，常用来表示函数企图返回一个不存在的对象找不到
5、未定义（Undefined）声明变量，没给变量初始化赋值，系统会自动给予赋值Undefined
复杂数据类型，
引用数据类型：
6、对象类型可存储多个数据的数据类型

/* 数据类型 */

/* 数值型：*/ var num=12.33333; console.log("我是数值型:"+num);

/* 字符串: */ var str='字符串'; console.log("我是字符串型:"+str);

/* 布尔 */ var ble=true; console.log("我是布尔型:"+ble);

/* 未定义 */ var un; console.log("我是未定义:"+un);


/* 空 */ var box=document.getElementById('box'); console.log("我是空:"+box);

对象类型：1、数组
2、对象

数组：
写法：1、var 变量名=[数据,数据]
2、var 变量名=new Array(数据,数据);
长度：变量名.length 数组里面包含数据的个数
取数据：变量名[索引/下标] 数组里每个数据都有序号，这个序号叫做索引/下标，也就是length-1

var arr=[1,2,3,4,5];
var arr1=new Array(1,2,3,4);
console.log("arr数组:"+arr);
console.log("arr1数组:"+arr1);
console.log("arr数组长度:"+arr.length);
console.log("arr数组下标为0:值为"+arr[0]);

简易切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#bannel{
				width: 100%;
				height: 300px;
				margin: 0 auto;
			}
			img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">下一个</button>
		<div id="bannel">
			<img src="img/banner_01.jpg" id="img">
		</div>
		<script type="text/javascript">
			var btn=document.getElementById('btn');
			var num=0;
			var arr=['img/banner_01.jpg','img/banner_02.jpg','img/banner_03.jpg','img/banner_04.jpg'];
			var img=document.getElementById('img');
			
			btn.onclick=function(){
				num=num+1;
				img.src=arr[num];
			}
		</script>
	</body>
</html>

对象：object
写法：变量={
//键值对
“属性”:‘属性值’, //标准写法
“属性”:属性值, //标准写法
属性:属性值
}

var obj={
	'0':222,
     1：222,
     "a":'鲍勃',
     "b":13,
    'name':'鲍勃'
}
console.log(obj);
console.log(obj['name']);
console.log(obj.name);
console.log(obj['0']);
console.log(obj[0]);
console.log(obj['1']);
console.log(obj[1]);

流程控制语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
写法：if(表达式){条件为真时允许执行的代码}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#bannel{
				width: 100%;
				height: 300px;
				margin: 0 auto;
			}
			img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">下一个</button>
		<button type="button" id="btn_prve">上一个</button>
		<div id="bannel">
			<img src="img/banner_01.jpg" id="img">
		</div>
		<script type="text/javascript">
			var btn=document.getElementById('btn');
			var btn_prve=document.getElementById('btn_prve');
			var num=0;
			var arr=['img/banner_01.jpg','img/banner_02.jpg','img/banner_03.jpg','img/banner_04.jpg'];
			var img=document.getElementById('img');
			/* 上一个的点击事件 */
			btn_prve.onclick=function(){
				num=num-1;
				if(num<0){
					num=arr.length-1;
				}
				
				img.src=arr[num];
			}
			/* 下一个的点击事件 */
			btn.onclick=function(){
				num=num+1;
				if(num>=arr.length){
					num=0;
				}

				img.src=arr[num];
			}
			
		</script>
	</body>
</html>

if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
写法：if(表达式){条件为真时允许执行的代码}else{条件为假时允许执行的代码}
//测试分数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			form{
				width: 50%;
				height: 50px;
				margin: 0 auto;
				border: 3px solid #000;
			}
			#age{
				float: left;
				width: 80%;
				height: 87%;
				outline: none;
				border: none;
			}
			#submit{
				float: left;
				width: 20%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" name="age" id="age" />
			<input type="submit" value="提交" id="submit"/>
		</form>
		<script type="text/javascript">
			var submit=document.getElementById('submit');
			var age=document.getElementById('age');
			
			submit.onclick=function(){
				var age_val=age.value;
				console.log(age.value);
				if(age_val>=90){
					alert("恭喜通过");
				}else{
					alert("加油哦");
				}
			}
		</script>
	</body>
</html>

//表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>登录界面</legend>
				&nbsp;&nbsp;&nbsp;&nbsp;用户名：<input type="text" name="user_name" id="user_name" value="" /><br>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<input type="password" name="pass" id="pass" value="" /><br>
				确认密码：<i

最低0.47元/天解锁文章

拾荒者cg

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
笔记-js篇

JavaScript引用：行内，内嵌，外部引入 </head><body>  <div onclick="this.style.background='yellow'">我是div2</div>  &l...
复制链接

扫一扫