定位属性:是可以将元素按照定位的类型进行移动
position:
绝对定位(absolute)(如果是块标签设置,类似浮块)
相对使用根据该元素的祖先元素(父元素或父标签)进行移动,
如果当前元素没有父元素,就是针对body进行移动;
相对定位:relative
根据该元素原来的位置进行定位,(如果是块标签设置,还是占一行空间)
固定定位
fixed:根据父元素进行定位的一种方式
特点:不会随着滚动条的滚动而滚动
left:设置定位左边的距离
top:设置定位上边的距离
列：
< style>
#d1 {
border : 1px solid #000 ;
background-color : red;
width : 150px;
height : 150px;
position : absolute;
left : 100px;
top : 100px;
}
#d3 {
width : 150px;
height : 150px;
border : 1px solid #000 ;
background-color : green;
相对定位
position : relative;
left : 100px;
top : 50px;
}
#adv {
border : 1px solid #000;
width : 302px;
height : 300px;
固定定位
position : fixed;
left : 430px;
top : 130px;
}
</ style> < scriptsrc = " js/01.js" > </ script> < script> </ script> 变量:在程序的执行过程中,其值在不断发送改变的量!
js定义变量的注意事项
1)定义变量的三要素 :var 变量名 = 初始化值;
2)定义所有的变量都是var,而且var可以省略不写!
3)js中,变量可以重复定义的,后面的值将前面的值覆盖!
javavscript:是一个弱类型(语法结构非常不严谨)
java语言:后端语言的一种强类型语言(语法结构非常严谨)
查看一个变量的数据类型的行数:typeof(变量名)
基本数据类型划分:
1)无论是整数还是小数,数据类型number类型
2)布尔类型 :boolean :用于逻辑判断:要么true(真) false(假)
3)字符串类型:string :无论变量值"字符串"还是'字符':结果都是string
4)未定义类型:undefined(没有意义的)
引用数据类型:
4)object类型:对象类型
字符串拼接符号
任何数据+ 字符串= "新的字符串"
字符串+ 任何数据= "新的字符串"
"helloworld" + 'a' = "helloworlda"
"helloworlda" + 1 = "hellworlda1"
'a' : 是单引号括起来, 数据类型是string ( 字符串)
'a' + 1 = "a1"
"5+5=" + 5 = "5+5=5"
"5+5=5" + 5 = "5+5=55"
"双引号括起来的" 或者js中'' -- 都是string字符串
字符串就是常量
算术运算符
基本的算术运算符 : ( js中/ 不会默认取整, 而java语言默认取整! )
+ , - , * , / , % 模 ( 求余)
扩展的算术运算符
++ 或者--
单独使用 :
无论++ 或者-- 在数据的前面还是后面都是对当前这个值进行自增1 或者自减1
参与运算 :
1 ) ++ 或者-- 在数据的前面, 先自增或者自减, 然后运算
2 ) ++ 或者-- 在数据的后面, 先运算再自增或者自减
基本的赋值运算符 就是"="
var 变量名 = 值;
将值赋值给变量名
注意事项:
"="不写成==
扩展的赋值运算符:
+=,-=,*=,/=,%=
将扩展的赋值运算符左边的变量和右边数据值操作后,在赋值给左边的变量;
var a = 10 ;
a += 20 ;//拿a+20在赋值给a 等价于 a = a+20 ;
关系运算符:
无论这个符号的连接表达式在怎么复杂,结果都是true/false
<,>,<=,>=,==,!=
注意事项:==不能写成=
==,写成=,成赋值了(js不会把报错,var可以定义任何类型)
逻辑运算符的基本符号:
逻辑单与&:并列关系,多个条件同时满足
有0则0(有false则false,有一个满足不成立!)
逻辑单或|:多个条件只要满足一个即可成立
(有1则1;有true则true,有一个满足则成立)
逻辑异或^:
相同则为false(0)
不同则为true(1)
简单记:
男女关系
男女 女男 : true (1)
男男 女女 : false (0)
逻辑非! :非true则fasle,非fasle则true
偶数个非是它本身
逻辑双与&&和||属于逻辑运算符的扩展运算符
逻辑双与& (有false则false :和逻辑单与& 一样:共同点
逻辑双或||:有true则true
逻辑双与&&具有短路效果:左边的表达式如果false,则右边不执行!,可以提供运行效率!
这个运算符:带有一定逻辑判断
(表达式)?执行true的结果:执行false的结果;
表达式无论简单还是复杂,结果是boolean类型,true或者false
需求:有两个变量,比较两个变量的最大值?
定义两个变量
var a = 10 ;
var b = 25 ;
(表达式)?执行true的结果:执行false的结果;
var max = (a>b)?a:b ;
document.write("两个数据的最大值是:"+max) ;
需求:有三个变量,比较三个变量中的最大值?
var x = 10,y = 35,z =20 ;//一行定义多个变量
最常用的方式:采用中间变量的方式去操作
1)将x和y进行比较,将它的结果给中间变量 temp
var temp = (x>y)?x:y;
2)将1)步的结果和z进行比较
var max2 = (temp > z)?temp:z;
document.write("max2:"+max2) ;
console.log("max2:"+max2) ;
位运算符:计算机在对数据进行计算的时候,
需要将这些数据进行"补码"操作
(原码--反码---补码:有符号的数据表示法)
考虑进制的概念:
进制:就是数据进位一种的方式
位与& :有0则0
位或| :有1则1
位异或^:相同则为0,不同则为1
~:反码:全部按位取反,0变1,1变0
顺序结构语句: javascript:代码由上而下依次加载
选择结构语句:if/switch
循环结构语句:for/while/do-while
if语句格式1：
if(表达式){
语句;
}
执行流程:如果表达式成立,则执行语句;否则不执行!
if格式2:
场景:针对两种情况判断
if(表达式){
语句1;
}else{
语句2;
}
执行流程:
如果表达式成立,则执行语句1,否则,执行语句2;
if格式3:
应用场景:针对多种情况判断
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
}else{
//上面都不匹配,执行else中语句
语句n;
}
流程:
先判断表达式1是否成立,成立则执行语句1,
如果不成立,继续判断表达式2是否成立,成立,则执行语句2
如果都不成立,最终执行else中的语句;
程序写完测试 要考虑:
1)边界数据是否正常
2)范围内的数据是否可以
3)测试错误数据是满足
面试题
if和三元的区别
if格式2的范围大,它是流程控制 语句,它不仅里面可以使用
赋值的方式去接收变量,也可以去使用输出语句 document.write(xx);
而三元运算符,是运算符号,只能操作具体的数据值,要么 string/number...
不能在里面嵌套使用输出语句document.write(xx)
如果需求能够使用三元实现的,一定能够使用if格式2实现
if格式2能实现的,不一定能使用三元
javascript定义变量 (见名知意)
* 注意事项:
* 1)变量名不能以数字开头
* 2)变量名不能有空格出现,以及特殊符号
* 3)不能是关键字 var/true/false...
* 4)可以是26个英文大小字母(不区分大小写)或者数字
* 5)可以有_或者$符号,他们可以开头
switch格式
switch(表达式或者某个变量){
case 值1:
语句1;
break ;
case 值2:
语句2;
break ;
...
...
default:
语句n;
break ;
}
执行流程:
使用switch后面的变量值和case的值1进行匹配,
如果匹配,执行语句1,break语句结束;
如果值1不匹配,判断case后面的值2是否和switch后面的值进行匹配
如果匹配,则执行语句2,break语句结束;
如果也不匹配,...上面都不匹配,执行default的语句n,遇见break语句结束!
javascript中的switch
* 1)switch语句中case语句后面的值可以是常量,也可以是变量!
* 2)如果case语句中没有携带break语句,
* 就会造成一种现象"case穿透"(灵活运用)
* 3)switch语句的结束条件: (重点)
* 1)遇见break结束 (break:跳转控制语句 中断/结束!)
* 2)程序默认执行到末尾
*4)default语句可以在switch中的任何位置,不影响switch的执行流程
*如果default在语句中,break不要省略
*如果default在语句的末尾,break是可以省略的(建议不要省略!)
for循环的格式
for(初始化语句;条件判断语句;控制体语句){
循环体语句;
}
执行流程:
1)初始化语句对变量进行初始赋值(执行一次即可)
2)判断条件语句是否成立,如果成立,则执行循环体语句
3)执行控制体语句(步长语句)这个变量自增或者自减
4)判断条件是否成立,成立,继续执行循环体语句,
再次回到3)继续操作....
5)当条件表达式不成立,循环结束!
循环也称为"遍历"
嵌套
for(初始化语句1;条件表达式1;控制体语句1){
//循环体:for循环
for(初始化语句2;条件表达式2;控制体语句2){
循环体语句;
}
}
通用格式:
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;(步长语句)
}
执行流程:
1)初始化语句先执行,进行赋值
2)判断条件表达式是否成立,成立,执行循环体语句,执行控制体语句
3)继续回到2)过程...如果条件不成立,结束!
利用死循环可以完成一些事情
for的死循环
for(;;){
循环体语句
while(true){
完成逻辑
产生一个随机数
键盘录入数据,
判断数据大了,还是小了
如果相等,退出循环 break ;
}
}
for(;;){
console.log("for循环的死循环..") ;
}
while(true){
console.log("helloworld") ;
}
1)格式不同
for(初始化语句; 条件表达式;控制体语句){
循环体语句;
}
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;
}
2)内存角度考虑:优先使用for
for循环结束,里面的变量就会从内存中释放掉,节省内存资源
while循环结束,依然能访问这个变量,初始化语句在外面定义的
3)从应用场景:
明确循环次数使用for
不明确循环次数使用while
举例:
键盘录个字符串:给3次机会,判断用户是登录成功 开发中,优先使用for循环
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;
流程:
初始化语句赋值
执行循环体
控制体语句进行自增或者自减
判断条件是否成立,成立,继续执行循环体,不成立,结束!
它和for,while最大的区别:
循环体至少执行一次!
(开发中,用的很少)
底层源码使用多:js前端框架(Jqeury)
后端语言:java语言(面向对象)
集合/后面常用类的方法中见到源码:涉及到do-while
跳转控制语句之break
break:中断,结束的意思
不能单独使用
两个场景中使用:
1)switch语句,本身格式就携带break
2)循环语句中使用
break ; 不能单独使用
for循环嵌套:
break以前的语法:后面可以跟上标签语句
给循环语句的前面起一个名字 名称:for()
break 名称;
跳转控制语句之continue
continue:继续的意思(结束当前循环,立即进入下一次循环)
不能单独用
不能脱离循环语句(loop)中使用!
跳转控制语句值return
return 一般在函数(方法中使用)
return:结束一个函数(方法),或者程序
不能单独用!
在js中定义函数的格式
function 函数名(参数名1,参数名2,....){
完成的函数的逻辑
return 结果; //返回结果
}
调用函数:
赋值调用:
var 变量名= 函数名(实际参数1,实际参数2..)
完成函数定义的心里明确:
1)这个函数有没有返回结果;
2)考虑参数的数据类型以及参数个数
函数名以及变量名:遵循小驼峰命名法
单个单词:字母全部小写
多个单词:第一个单词全部小写,从第二个单词开始首字母大写,其余小写
1)定义函数的时候,形式参数上不能携带var
2)函数定义的格式不能省略{},否则不是一个函数,浏览器中js引擎是无法识别的
3)如果这个函数没有返回结果,那么赋值调用的是undefined(未定义)
4)无论任何语言中,有右括号的地方不能有分号,否则函数是没有"函数体",
没有函数体的方法是没有意义的
没有具体的返回结果,的函数定义的时候,
跟有返回结果的函数定义相同,在函数体中直接输出!
调用:
单独调用
函数名(实际参数1,...) ;
数组:
可以存储多个同一种类型元素的一个容器!在javascript语言中,数组可以存储不同类型的元素,但是开发中,数组存储的必须为同一类型的元素!
Js中本身就存在一个Array内置数组对象
固定格式:
(动态初始化:不给定元素)
var 数组名称 = new Array() ;//不指定长度
var 数组名称 = new Array(size); //指定数组长度
(静态初始化:给定具体元素)
var 数组名称 = new Array([元素1,元素2,...]) ;
可以简写为
var 数组名= [元素1,元素2,...] ;
数组的属性:length (长度)
数组名称.length
如何确定数组的元素
数组名称[角标值或者索引值]
索引值从0开始,数组的最大索引值=数组长度-1
js(弱类型语言:语法以及结构都不严谨)中的数组:没有角标越界一说,它可以不断的给数组中追加元素!
创建一个数组
var arr = new Array(5) ;//5个长度
键盘录入5个数据,将这个5个数据放在数组中,进行遍历(遍历数组使用函数改进)
for(var i =0; i <5 ; i++){
arr[i] = prompt("请输入数组元素:") ;
alert(arr[i]) ;
}
alert(arr.length) ;
document.write("调用函数进行遍历:") ;
//按照 输出 :[元素1, 元素2, 元素3 ....元素n]
//调用下面的函数
printArray(arr) ;
function printArray(arr){//数组传进去
document.write("[") ;
遍历数组:一一获取元素
for(var i = 0 ; i < arr.length; i++){//i是数组角标
如果角标取到了最大索引值(对应的最后一个元素)
if(i==arr.length-1){
document.write(arr[i]+"]"+"<br/>") ;
}else{
不是最后一个元素,中间角标对应的元素
document.write(arr[i]+", ") ;
}
}
}
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
