前端之JavaScript

ps 有一些标签自带下面的一个或多个属性值
p标签自带margin上下16px
ul标签自带margin上下16px padding-left：40px
marging:用于调整标签与标签之间的距离（外边距）
border：用于调整边框的粗细
padding：用于调整标签内部文本与边框之间的距离（内边距）
content：标签内部文本
margin:10px,20px,30px,40px 上右下左（**）
margin：10px,20px,30px   上   左右
margin：10px,20px     上下    左右（**）
margin：10px       上下左右

ps:padding的规则亦是如此
border： solid 3px red;
border-left
border-right
border-top
border-bottom   调标签某一个样式

浮动   （先搭架子）
    用来做网页的布局  （先搭建网页骨架，再去调样式，最后调js代码）
    缺点：浮动的元素会脱离文档流，造成父标签塌陷（基于这个标签被谁套住了）
    如何解决浮动带来的负面影响：
        1.先手动再写一个div强行撑起来
        2.clear属性 限制
        3.clearfix
            .clearfix:after{
                content:‘‘;
                clear:bothl
                display:block  /*让这个内容独占一行*/
            }
            ps:应用场景  左右页面布局

溢出
    overflow：hidden/auto/scoll
    ps:应用场景   圆形头像（width=100% 是让头像全部显示，所以是100%）
定位
    标签默认是static（静态），不能调整top，left,right,bottom
    如果想要调整：
        相对定位：相对于标签自身的位置
        绝对定位：相对于已经定位过的父标签再做定位   购物车下面的大框
        固定定位：相对于浏览器固定在窗口的某个位置，不随文档的上下滑动而变动
    
        研究是否脱离文档流：
            脱离文档流：浮动，绝对定位，固定定位
            不脱离文档流的：相对定位

z-index
    调整页面与用户的距离
    示例：  模态框
透明度 opacity 调节的是所有标签的透明度
      rgba()  自能调节颜色的透明度

js:Javascript   和Java一点关系都没有，当初Java很火，这门是为了蹭Java的热度

//单行注释 

 /*

 多行注释
 */

变量声明的关键字：var 变量名=“值”
        js属于动态类型(同一个变量可以存不同数据类型的值)   var x="egon"; var x="18"; 

变量命名规则  js中$也可以用来作变量名 var $=‘女‘；console.log(‘$‘,$)
        一般是以驼峰体命名，首字母小写
        var userName="张全蛋";

声明变量：

　　　　var name=‘hello‘
　　　　let name=‘egon‘ let就用在局部环境,局部中使用var会影响全局

方式1：直接在script内部写js代码
方式2：在js内部书写js代码，然后在script中src属于引入外部js代码文件

        数字，字母，下划线，$
        不能以数字开头，并且不能与存在的关键字冲突
        python中建议：user_nmae
        javascript建议使用（驼峰体）：userName            

        1.数值类型
        2.字符串类型
        3.布尔类型
        4.underfined
        5.对象
            null
            数组 [1，2，3，4]
            自定义对象  {‘name‘:‘jason‘}
         6.数值类型
            NaN 表示当前转换的对象不是一个数值类型，但是NaN是一个数值类型
        7.symbol  新增的

数学运算符 + - * / % // 
比较运算符
    == 弱等于
    ===强等于 不仅比较值的大小还比较typeof
    ！=弱不等于
    ！==强不等于

     if -else    
    固定格式   
        if (条件1){
            逻辑体代码
        }
        else （条件2）{
            逻辑体代码
        };    **注意这里是英文状态下的分号;
    for 循环--类似与python中的while循环
    固定格式
        for (起始条件；结束条件；条件成立因素){
            逻辑体代码
        };

关键字function   函数名+（） 函数体   函数返回值return   函数的调用
    统一格式   function  函数名(){函数体代码 函数返回值}；
        function func(){           //无参函数，没有返回值
            console.log(‘hello‘)
        };
        function  bar(x,y){          //有参函数，没有返回值
            console.log(‘hello world‘)
        };
         function func(){           //无参函数，有返回值
            return 555
        };
        function  bar(x,y){          //有参函数，有返回值
               return x+y      
        };
        **注意在python中如果返回多个是以元组的形式返回，但是在JavaScript中，默认只返回最后一个，所以如果想要多个元素，就用数组将这个元素括起来
        **注意在python中传参的时候根据位置参数传参是必须保证实参和形参个数一致才可以，但是在JavaScript中，传多传少都不会报错，传多了只会取取能接受的前两个，传少了默认是0

json对象
        stringify loads
        parse  dumps

正则的两种定义方式
        1.new    reg1=new RegExp()
         2.       reg2=/^[A-Za-z][A-Za-z0-9]{5,9}$/
    坑点集锦：
        1.正则表达式中千万不要写空格
        2.全局匹配模式配置last index
        3.匹配的时候不传任何参数默认匹配underfined

BOM  location     window.location.href  //获取URL
                window.location.href="URL" //跳转到指定页面
                window.location.reload()  //重新加载页面
                alert警告框/confirm确认框/prompt输入框 可以拿到具体的输入内容

    Document Object Model
        直接查找（*****）
            id   
                var pEle=document.getElementById(‘id‘)  
                    pEle;
                    pEle.parentElement  //查看当前id的父亲
                    pEle.parentElement.parentElement   //查看当前id的父亲的父亲
            class（类）
                var pEle=document.getElementByClassName(‘class‘)
            tag(标签)
                var pEle=document.getElementsByTagName(‘p‘)
        间接查找