4.24 js简单学习笔记

css 定位属性: position

relative        相对定位:  针对该元素原来的位置移动

absolute      绝对定位:  针对父元素的位置进行定位

fixed            固定定位:  始终在页面的固定位置,不会随着滚动条的滚动而滚动

javascript 两种使用方式

1.内部方式:

        在head标签中指定script标签书写js代码

2.外部方式:        前端开发人员实际使用

        1>在js文件夹中,单独创建.js后缀的文件

        2>在.js文件中书写js代码

        3>在某个html页面中,导入.js文件

                <script src="xxx.js"></script>

        

        js常用的函数:

        ①documeng.write();        向浏览器输出内容

        ②console.log();               浏览器的输出日志,控制对象

        ③window.alert();              弹出一个提示框,可以简写为alert();

 js中定义变量及数据划分

js是一门弱类型语言,也就是结构非常不严谨的语言

1.使用var定义变量

2.可以多次重复定义一个变量,后值会覆盖掉前值

3.var可以定义任何数据类型

        注意:

                1>无论整数还是小数都是number        自动提升为Number (js内置对象)

                2>无论字符还是字符串都是string        自动提升为String(js内置对象)

                3>underfined 未定义类型,即未给变量赋值,没有实际意义

                4>object,对象类型                                自动提升为Object(所有js内置对象的模板)

js创建对象方式:

        var 对象名 = new Js内置对象();

js 运算符

1.算数运算符        +,-,*,/,%

2.比较运算符        <=,<,>=,>,!=,==

        =代表赋值,把等号右边的值赋予等号左边的变量

3.逻辑运算符        &  |  !        与  或  非

        开发一般使用        逻辑双与&&:     多个条件是并列关系,一个false,整体false   

                                      逻辑双或||:        多个条件是或者关系,一个true,整体true

4.三目运算符

        (表达式)?执行true的结果:执行false的结果

js 流程控制语句

1.顺序结构语句

        js是自上而下顺序执行

2.选择结构语句

        1> if 语句

①单if语句

if(表达式):{
    语句;
}

执行流程:表达式成立,那么执行语句

②if-else语句        开发中使用较多

if(表达式){
    语句1;
}else{
    语句2;
}

执行流程:表达式如果成立,执行语句1;如果不成立,执行语句2

③if-else if-else语句        针对多种结果判断

if(表达式1){
    语句1;
}else if(表达式2){
    语句2;
}else{
    语句3;
}

执行流程:表达式1如果成立,那么执行语句1,如果不成立,看表达式2是否成立

                表达式2如果成立,那么执行语句2,如果不成立,执行语句3

        2>switch 语句

switch(变量){
case 值1:
    语句1;
    break;
case 值2:
    语句2;
    break;
...
...
default:
    语句n;
    break;
}

执行流程:变量的值和值1是否匹配,如果匹配执行语句1

如果不匹配,看和值2是否匹配,如果匹配执行语句2

如果不匹配...

...

如果以上都不匹配,执行语句n,语句结束

注意:switch语句结束条件

        ①遇到break结束

        ②程序默认执行到末尾结束

事件编程三要素

1.事件源                        html标签

2.编写事件监听器          写一个函数(js代码),function 函数名()

3.绑定事件监听器          标签中有一些onxxx属性,和函数名进行绑定\

        事件:

                点击                click

                双击                dbclick

                失去焦点        blur

                获取焦点        focus

                选项卡发生变化的事件        change

var xx = document.getElementById(xx)