«

JavaScript是一个基于对象累计起来的语言

时间:2023-3-1 22:17     作者:wen     分类: F2E


<script type="text/javascript">
//javaScript 是一个轻量级,弱类型的编程语言,
//在javaScirpt中单引号,和双引号是没有区别的
    /*字符串
    数值类型
    数组
    函数*/
//作用域链
    /*当函数内部存在局部变量,就不再按照作用域链,去上一级作用查找,如果没有局部变量,就去上一级查找*/
//作用域
    /*1.在函数外部定义的变量,就是全局变量,能做脚本的任何地方使用
    2.在函数内部定义的变量是局部变量,只能在函数内部使用
    注意:没有使用var关键字声明,表示全局变量*/
//参数传递
    /*可以通过arguments数组管理参数*/
    function test(){
        console.log(arguments[0]);
        console.log(arguments[1]);
        console.log(arguments[2]);
        console.log(arguments[3]);
        console.log(arguments[4]);
    }
    test(1,3,5,7,9);
//函数闭包特性
    /*1.当一个函数里面,嵌套定义函数时,就会产生闭包
    2.闭包导致的结果:嵌套定义的函数(里面的函数),会把外部函数里面的变量最终值包含起来(持久保存在内存中)
    3.解决闭包:不要在函数里定义函数*/
//对象
    /*定义*/
    //1.
    function Snake(){
        this.color = 'red';
        this.eat = function(){
            console.log('吃东西');
        }
    }
    //2.
    var Snake = {
        color:"golden",
        direction:"right";
        eat:function(){
            console.log('吃东西');
        }
    }
    //3.
    var obj = new Object();
    obj.color = 'red';
    obj.eat = function(){

    }
    /*NaN 表示输出的内容不是一个数值
    布尔 '0',空数组会转换成true   Boolean类型转换*/

//数据类型的转换
    /*1.自动类型转换
    2.强制类型转换*/
        typeof()//输出变量类型
        Boolean() //布尔类型转换
        isNaN() //用来判断是否是个非数值
        parseInt() //强制转换成整数
        Number() //强制转换成数值
        parseFloat()//强制转换成浮点数
        parseBool()//强制转换成布尔类型
        String()//强制转换成字符串类型
//JavaScript是一个基于对象累计起来的语言
    //数组对象
        length 获得数组元素的个数
        concat() 数组合并
        join()   将数组的元素链接成字符串
        push() 向数组的末尾添加元素
        pop()     把数组的最后一个元素删除,并把删除的元素返回
        shift()       删除数组开头的元素,并把删除的元素返回
        unshift()   向数组开头添加元素
        reverse() 颠倒数组的顺序
        slice(start[,end]) 截取数组,返回截取的截取的内容 参数1:开始的位置 参数2:结束的位置
        splice(start,[,deleteCount][,values]) 截取数组元素,并把删除的元素返回 参数1:开始的位置 参数2:删除数量 参数3:可以使用参数3代替删除的元素 还可用于向数组指定位置添加,删除,替换,数组内元素
        sort() 对数组元素进行排序
        toString() 将数组转换成字符串
        //字符串对象
        indexOf() 获得一个字符在字符串中第一次出现的位置
        lastIndexOf() 获得一个字符在字符串中最后一次出现的位置
        split() 把字符串分割为字符串数组。
        replace() 替换与正则表达式匹配的子串。
        charAt() 返回在指定位置的字符
        slice(start,end) 字符串截取 参数1:开始位置,参数2:结束的位置;
        substr(start,length) 字符串截取 参数1:开始位置 参数2:截取长度
        toLowerCase() 将数组转换成小写
        toUpperCase() 将数组转换成大写
    //数学对象
        Math.abs() 计算绝对值
        Math.floor() 向下取整
        Math.ceil() 向上取整
        Math.round() 四舍五入取整
        Math.max() 最大值
        Math.min() 最小值
        Math.pow(x,y) 返回 x 的 y 次幂。
        Math.random() 随机0-1之间的小数
    //日期对象
        var date = new Date();
    //正则表达式对象
        //表示中文范围不一样 PHP中[\x{4e00}-\x{9fa5}]
        //javaScript中 [\u4e00-\u9fa5]
        //在javaScirpt中不支持逆向预查
        text() //检查字符串是否符合规则
        exec() //检查字符串是否符合规则,但是会将符合规则的结果返回
    //DOM对象
        innerHTML() //是双向功能:获取对象的内容  或  向对象插入内容;  
        innerText() //是双向功能:获取对象的内容  或  向对象插入内容; 不解析HTML标签
        document 文档(html文档)
        Object 对象(JavaScript对象)
        Model  模型
    //DOM对象
        getAttribute() //获得节点属性的值
        setAttribute() //设置节点属性的值
        removeAttribute() //删除节点属性的值
        创建一个节点对象
        document.createElement('标签');
        再确定位置
        父节点.appendChild('子节点'); //追加一个元素
        父元素.insertBefore('新元素','原来的元素') //在某个元素的前面插入
        删除节点
        父元素.removeChild(删除的节点)
        节点对象
        childNodes //所有子节点
        nodeName //获得节点名
        nodeType //节点类型 1:标签节点 2,标签属性节点 3,标签文本节点
        attributes//获得标签所有属性 
        childNodes //找父节点的子节点
        parentNode //找子节点的父节点 
        previousSibling //找上一个兄弟节点
        nextSibling //找下一个兄弟节点
    //BOM对象
        //操作的是和浏览相关的
        History //子对象用来操作历史记录
        history.go(-1)  后退一步, 负数后退 正数前进 0刷新 
        history.forward()前进一步
        history.back() 后退一步
        location //子对象,用来操作url地址栏
        location.href 页面跳转
        screen //子对象,用来操作屏幕相关
        screen.width  屏幕宽度
        screen.height
        screen.availWidth
        screen.availHeight 可操作屏幕宽度
    //windows对象
        document
        alert() 
        confirm();确认框,该方法有返回值
        prompt();输入框
        setInterval() //计时器
        clearInterval()清除计时器
        setTimeout() 多少秒调用一次
        clearTimeout()清除计时器
    //事件
        单机事件 click
        双击事件 dblclick

        //监视鼠标按下左击还是右击 左击0 滑轮按下1 右击2
        鼠标按下 mousedown
        鼠标抬起 mouseup

        鼠标移入 mouseover
        鼠标离开 mouseout
        鼠标移动 mousemove
        鼠标滑轮滚动 scroll

        键盘按下 keydow
        键盘抬起 keyup

        提交事件 submit
        文本框的文本被选中 select
        获得焦点事件 focus
        失去焦点事件 blur
        内容改变事件 change

        页面加载事件
        window.onload = function(){

        }
    //添加事件
        //参数1:监视事件类型
        //参数2:事件发生时,执行的回调函数
        //参数3:是否捕获[false不捕获]
        addEventListener('','','') ie9以上,主流浏览器
        attachEvent() ie678以前
        事件添加,兼容ie6 7 8
        //参数1:监视的html对象
        //参数2:监视的事件类型
        //参数3:事件发生时执行的函数
        function bindEvent(obj,eventType,fun){
            if(window.addEventListener){
                obj.addEventListener(eventType,fun,false);
            }else{
                obj.attachEvent('on'+eventType,fun);
            }
        }
    //事件冒泡
        主流浏览器:事件对象的 stopPropogation()方法进行阻止
        非主流浏览器:事件对象的 cancelBubble = true;
      function stopMaoPao(e){
         var ev = e || window.event;
         if(ev.stopPropagation){
            ev.stopPropagation();
         }else{
            ev.cancelBubble = true;
         }
      }
      ev.clientX,ev.clientY //没出现滚动条是2个都没有区别,但出现滚动条时,他不计算滚动条卷曲的高度
      ev.pageX,ev.pageY  //它计算滚动条卷曲的高度
      function scrollTop(){
         scrollTop =  document.documentElement.scrollTop||document.body.scrollTop;//兼容性
         return scrollTop;
      }
    //阻止默认的行为
      ev.prevenDefault();
    //3个特殊键 ctrl shift alt (ctrlKey,shiftKey,altKey)

    //读取位置
        offsetLeft: 读取它父元素左边多少的像素
        offsetTop: 读取它父元素上边边多少的像素

        offsetWidth: 读取宽度(有边框)
        offsetHeight: 读取高度(有边框)
        clientWidth: 读取宽度
        clientHeight: 读取高度 
</script>

标签: javascript