0
点赞
收藏
分享

微信扫一扫

网页前端第七次

小a草 2022-02-12 阅读 72

一、内置对象

 String
             1.charAt( idx)     返回指定位置处的字符
             2.indexOf(Chr)       返回指定子字符串的位置,从左到右。找不到返回-1
             3.substr(m, n)      返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。
             4.substring(m,n)   返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾。
             5.toLowerCase()   将字符串中的字符全部转化成小写。
             6.toUppercase()   将字符串中的字符全部转化成大写。
             7.length         属性,不是方法,返回字符串的长度。

  Math
            1.Math.random()      随机数
            2.Math.ceil()        向上取整,大于最大整数
            3.Math.floor()       向小取整,小于最小整数string
            
  Date
            获取日期
            getFullYear()     年
            getMonth()        月
            getDate()         日
            getHours()        时
            getMinutes()      分
            getSeconds( )     秒
            设置日期
            setYear()setMonth()setDate()setHours()setMinutes()setSeconds()
            toLoacaleString()转换成本地时间字符串
 

<script type="text/javascript">
            var str = "Hello world";
            console.log(str);
            console.log(str.substring(3));//从下标3开始,截取到最后
            console.log(str.substring(3,5));从下标3开始,到下标5结束
            
            console.log( str.toLowerCase());//转小写
            console.log(str.toUpperCase());//·转大写
            
            // 1.Math.random()      随机数
            console.log(Math.random());
            // 2.Math.ceil()        向上取整,大于最大整数
            console.log(Math.ceil(1,2));
            // 3.Math.floor()       向小取整,小于最小整数string
            console.log(Math.floor(1,2));
            
            //得到日期对象
            var date = new Date();
            console.log(date);
            //。getFullYear()     年
            console.log(date.getFullYear( ));
            //。getMonth()       月
            console.log(date.getMonth() +1);
            // 0~11l/。getDate()
            console.log(date.getDate( ) );
            // 。 getHours()     时
            console.log(date.getHours( ));
            //  getMinutes()  分 
            console.log(date.getMinutes());
            //  getSeconds()     秒
            console.log(date.getSeconds()); 
            var mstr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes();
            var dateStr = date.getFullYear()+"-"+(date.getMonth() +1)+"-"+date.getDate( ) +"  "+date.getHours( )+":"+date.getMinutes()+":"+date.getSeconds()
            console.log(dateStr);
            // 时间本地化
            console.log(date.toLocaleString());
            
         </script>
二、对象
            1.对象的创建
                1.字面量形式创建对象
                var 对象名 = {};//空对象
                var 对象名={
                键:值,
                键:值,
                ......
                };
                2.通过new 0bject创建
                    var对象名= new object();//空对象
                3.通过0bject对象的create方法创建
                    var 对象名 = 0bject.create(null);//空对象
                    var 对象名 = 0bject.create(对象);
        
          2.对象的操作
                获取对象的属性  (如果属性不存在,则获取undefined)
                    对象名.属性名;
                设置对象的属性  (如果属性存在,则修改属性值;如果属性不存在,则添加新的属性值)
                    对象名.属性名=值;

           3.对象的序列化和反序列化
                序列化:将]S对象(SON对象)转换成JSON字符串
                    var 变量名 = JSON.stringify(对象);
                反序列化:将JSON字符串转换成]S对象(JSON对象)
                    var 对象名 = JSON.parse(JSON字符串);

           4. this
                谁调用函数,this指代谁。
                1.直接调用函数, this代表的全局的window对象
                2.调用对象中的函数, this代表的是对象本身

 <script type="text/javascript">
             /*对象的创建*/
             //字面量形式创建对象
             var obj1 = {};//空对象
             console.log(obj1);
             var obj2 = {
             name : "zhangsan",age: 18
             };
             console.log(obj2);
             //通过new 0bject创建
             var obj3 = new Object();//空对象
             console.log(obj3);
    
            //通过object对象的create方法创建
            var obj4 = Object.create(null); //空对象
            console.log(obj4);
                            
            var obj5 = Object.create(obj2);
            console.log(obj5);
            /*对象的操作*/
            //获取对象的属性
            //获取不存在的属性
            console.log(obj1.name);//zhangsan
            //获取存在的属性
            console.log(obj2.name) ;
 
            console.log(obj3.name); // undefined
            console.log(obj4.name); // undefined
            console.log(obj5.name); // zhangsan
 
            //设置对象的属性
            //存在的属性,修改属性值obj2.age = 20;
            console.log(obj2);
            //不存在的属性,添加属性值
            obj2.upwd = "123456";
            console.log(obj2);
            
            
            console.log( " -----------------" );
            /*对象的序列化和反序列化*/
            //序列化
            // JSON对象
            var obj = {
            name : "zhangsan",pwd : "123456",age: 18
            };
            obj.name = "lisi" ;
            console.log(obj);
            //将JSON对象转换为JSON字符串
            var objToStr = JSON.stringify(obj);
            console . log(objToStr);
            console.log( "======");
            //JSON字符串
            var jsonStr = '{ name : "zhangsan" , pwd : "123456" , age:18} ';
            jsonStr.name="lisi";
            console.log(jsonStr);
            
            //将JSON字符串转换为JSON对象
            /* var strToObj = JSON.parse(obj);
            console.log(strToObj); */
 
            console.log("=================");
            /* this */
            // 1.直接调用函数,this代表的全局的window对象
            function test() {
            console.log("这是一个测试方法...");
            console.log(this); // window对象
            }
            test();
            // 2.调用对象中的函数,this代表的是对象本身
            var o = {
            name : "zhangsan",
            age: 18,
            sayHello:function(){
            console.log("你好呀~");
            console.log(this);//当前  o  对象
            }
            }
            //调用对象中的方法
            o.sayHello();
 
 
            </script>
三、事件
        事件中几个名词:
            事件源:给什么元素/标签绑定事件事件名:绑定什么事件
            事件监听:浏览器窗口
            执行函数:事件触发后需要执行什么代码
        常用的事件类型
            onload:          当页面或图像加载完后立即触发
            onblur:          元素失去焦点
            onfocus:        元素获得焦点
            onclick:        鼠标点击某个对象
            onchange:         用户改变域的内容
            onmouseover:    鼠标移动到某个元素上
            onmouseout:        鼠标从某个元素上离开
            onkeyup:        某个键盘的键被松开
            onkeydown:        某个键盘的键被按下

        事件流
            事件冒泡:事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(文档)
            事件捕获:事件开始时由文档节点接受,然后逐级向下传播到具体的元素节点
        
        事件处理程序(事件绑定方式)
            1.HTML事件处理程序
                直接在html元素上绑定事件
            2.DOM 0级事件   
                先获取事件源,再给事件源绑定事件
                不能同时给元素绑定相同事件多次

            3.DOM 2级事件
        
        注:通过id属性值获取节点对象
        document.getElementById( "id属性值");
 

<body οnlοad="loadWindow()">
        <!-- onclick事件:点击事件(单击事件) -->
        <button οnclick="test()" οnmοuseοut="outButton()">按钮</button>
        
        <!--常用事件类型-->
        <!-- 
        onblur事件:失焦事件
        onfocus事件:聚焦事件 
        -->
        姓名:<input type="text" οnblur="aa( )" οnfοcus="bb()"/>
        <!-- 
         -->
        城市:<select οnchange="changeCity()">
            <option> 北京</option>
            <option> 上海</option>
            <option> 深圳</option>
        </select>
        
        <hr>
        <!-- HTML事件处理程序 -->
        <button type="button" οnclick="alert('Hello')">按钮1</button>
        <!-- DOM 0级事件-->
        <button type="button" id="btn2">按钮2</button>
        <!-- DOM 2级事件-->
        <button type="button" id="btn3">按钮3</button>
 
 
    </body>
    <script type="text/javascript">
        function loadWindow() {
        console.log("文档加载完毕..." );
        }
        function test() {
            console. log("按钮被点击了..." );
    }
        function aa() {
        console.log("失去焦点了..." );
        }
        function bb() {
        console.log("聚焦了..." );
        }
        
        function changeCity(){
            console.log("值改变了");
        }
        
        function outButton(){
            console.log("鼠标离开了");
        }
        
         /*  DOM0级事件  */
         
         // 1.事件源:获取事件源((按钮)
         var btn2 = document.getElementById( "btn2" );
         console.log(btn2);
         // 2.事件类型:给事件源绑定指定事件 
         btn2.onclick = function(){
         console.log("按钮2被点击了...");
         
            }
        //3.执行函数:事件触发后要执行的代码btn
        
        
        /* DOM2级事件 */
        // 1.事件源:获取事件源(按钮)
        var btn3 = document.getElementById( "btn3");
        //添加事件监听
        btn3. addEventListener( "click", function( ){
        console.log("按钮3被点击了..." );
        }, false);
        btn3. addEventListener( "mouseout",btnFunction, false);
        function btnFunction(){
            console.log("鼠标离开按钮三了");
        }
        btn3. addEventListener( "click", function( ){
        console.log("按钮3被点击了2..." );
        }, false);

举报

相关推荐

0 条评论