【学习日志】学习总结

新生代农民工12138

已于 2022-04-25 09:37:13 修改

阅读量1.2k

点赞数

文章标签： html5 javascript css

于 2022-04-24 21:02:18 首次发布

本文链接：https://blog.csdn.net/Hpplqq/article/details/124390553

版权

1.css的定位属性

position: relative : 是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位;
position: absolute :绝对定位, 针对该元素原来的位置而进行移动,给定相应的left和top值;
position: fixed : 固定定位,始终在当前页面的最前面,不会跟着滚动条的滚动而滚动;

2.Javascript的使用方法

内部方式 : 就是在head变迁中指定script标签书写,JavaScript代码;
函数: (1)向浏览器输出内容,(2)可以再浏览器的控制台输出日志,(3)使用控制台对象,弹出一个提示框来;
外部方式 : (1)单独在js文件夹中,单独创建后缀为.js的文件,(2)在某某.js文件中,书写js代码,(3)在当前某个html页面中,导入这个xxx.js文件必须有开始标签,有结束标签

3.Javascript中定义变量以及数据的划分

在js中,定义变量使用var来定义,var可以省略(因为js是弱类型语言),建议先带上弱类型语言:主要体现在语法结构非常不严谨;
因为js是弱类型语言,定义一个变量可以重复定义,后面的值会将前面的值覆盖掉;
var可以定义任何数据类型;

 var  a = 10 ;
 var  a = 25 ;
document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ; 
document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
document.write("c的值是:"+c+",c的数据类型时:"+typeof(c)+"<br/>") ;
document.write("d的值是:"+d+",d的数据类型时:"+typeof(d)+"<br/>") ;

4JavaScript的运算符

JavaScript是弱类型语言,true代表整数1
false代表整数0

算数运算符: +,-,*,/,%;
比较运算符: <,<=,>,>=,!=,==;
逻辑运算符: &与, |或, !非 ;一般情况下:开发中用的都是&&, || .逻辑双与&&:多个条件是并列关系,必须同时满足条件:有false,则false, 逻辑双或||:多个条件是或者的关系,有一个成立,就成立了!,有true,则true;
三元运算符:
语法格式:
表达式可以是简单的或者复杂,要么是true,要么false
(表达式?)执行true的结果:执行false的结果;
执行流程:
首先判断表达式是否成立,如果成立,则执行true的结果
如果不成立,则执行false的结果;

var a=3; 
var b=1;
var f=5;
document.write((a+b)+"<br/>");
document.write((a-b)+"<br/>");
document.write((a*b)+"<br/>");
document.write((a/b)+"<br/>");
document.write("<hr/>");
document.write((a%b)+"<br/>");
document.write("<hr/>");
document.write((a+b)==(a+f)+"<br/>");
document.write("<hr/>");
document.write((a>=b)+"<br/>");
document.write("<hr/>");
document.write((a==f)+"<br/>");
document.write("<hr/>");
document.write((a==b)&&(a+b)==7);
document.write("<hr/>");
document.write((b+f)==6||(a+b)==5);
document.write("<hr/>");
document.write(!(a!=f)+"<br/>");

5.JavaScript流程控制语句

if语句 :
三种格式
(1).if(表达式){
语句1;
}
(2).if(表达式){
语句2
}else{
}
(3).if(表达式1){
语句1;
}else if(表达式2){
语句2;
…
…
}else if(表达式n){
语句n
}
Switch语句:
Switch(变量){
case 值1:
//js中的case语句后面既可以是常量,也可以是变量!
//java中的case语句后面只能是常量!
语句1;
break; //结束中断的意思
case 值2:
语句2;
break;
…
…
default
语句n;
break;
}
switch语句结束条件:
(1)遇见break结束
(2)程序默认执行末尾
default语句可以在语句中的任何位置,但是如果在语句中,break最后别省略,否则如果case都不成立,执行default语句,会有case穿透现象;如果在语句的末尾,break可以省略;

6.事件编辑三要素

事件源–指的就是html标签;
编写事件监听器–就是写一个函数 function 函数名称(形式参数名1,形势参数名2);
绑定事件监听器–就是在标签中有一些onxx属性和函数名称进行绑定;
例:点击事件

<head>
<script>
	function myClik(){
	alert("点击事件触发了...") ;
	}
</script>
</head>
<body>
	<!-- 写一个普通的按钮 -->
	<!-- 1)input标签:事件源 -->
	<input type="button" value="点我试试" onclick="myClik()" /><!-- 3)绑定2)里面的函数名称 -->
</body>

7.JavaScript的流程控制语句以及事件练习

写一个区分身份证男女的控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			根据输入的值,判断男女
				1,3,5,7,9,为男性
				2,4,6,8,0,为女性
	 -->
			 <script>
			 //编写事件监听器
			 function getgender(){
				 
			 //1)通过dom操作,获取id="gender"的这个标签对象,获取它的value属性的值
			 var inputObj = document.getElementById("gender") ; 
			 //document.getElementById("id属性值") 固定js的dom操作语法
				 
			 //获取输入框的内容
			 content = inputObj.value ;
			// alert(content) ;
			//alert(typeof(content)) ;
				
			//完成判断
			//在js 字符串==整数,它会自动会将字符串---转换成整数
			if(content==1|| content==3 || content == 5 || content==7 || content == 9 ){
					alert("男性") ;
			}else if(content==2|| content==4 || content == 6 || content==8 || content == 0 ){
					alert("女性") ;
			}else{
					alert("输入不正确") ;
				}
			 }
		 </script>
		</head>
		<body>
			<input type="text" id="gender" placeholder="请输入身份证倒数第二位数字" />
			<!-- 1)事件源 -->
			<input type="button" value="点击查询" onclick="getgender()" />
		</body>
</html>

新生代农民工12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
【学习日志】学习总结

1.css的定位属性position: relative : 是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位;position: absolute : 相对定位, 针对该元素原来的位置而进行移动,给定相应的left和top值;position: fixed : 固定定位,始终在当前页面的最前面,不会跟着滚动条的滚动而滚动;2.Javascript的使用方法内部方式 : 就是在head变迁中指定
复制链接

扫一扫