JS创建对象和事件绑定

最新推荐文章于 2023-01-06 14:01:53 发布

罗密欧与猪一夜

最新推荐文章于 2023-01-06 14:01:53 发布

阅读量3.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/jerry_wzj_/article/details/107046262

版权

JS对象

1、对象的创建

1.使用原始的方式创建对象

   var obj = new Object();
   obj.name = "zhangsan"; //为obj对象添加属性
   obj.age = 20;
   obj.say = function(){ //添加功能（函数/方法）
 console.log(this.name,":",this.age);
   }
    //测试
   console.log(obj.name);
   console.log(obj.age);
    obj.say()

2.使用工厂模式创建对象

    function createObject(name,age){
      var obj = new Object();
      obj.name = name; //为obj对象添加属性
      obj.age = age;
      obj.say = function(){ //添加功能（函数/方法）
        console.log(this.name,":",this.age);
      }
      return obj;
    }
    //测试
    var ob1 = createObject("lisi",20);
    console.log(ob1.name);
    ob1.say();
    var ob2 = createObject("wangwu",25);
    console.log(ob2.name);
    ob2.say();

3.使用自定义构造函数创建对象

    function Stu(name,age){
      this.name = name;
      this.age = age;
      this.say = function(){
        console.log(this.name,":",this.age);
      }
    }
    //测试
    var s1 = new Stu("zhaoliu",28);
    var s2 = new Stu("xiaoli",21);
    s1.say()
    s2.say()

4.直接创建自定义对象

    var ob = {name:"qq",age:26};
    console.log(ob.name);
    console.log(ob.age);

    var obj={};
    obj.name="小白";
    obj.say=function () {
    console.log("我叫: "+this.name);
    };
    obj.say();

    var obj2={
      name:"小明",
      age:20,
      say:function () {
        console.log("我叫: "+this.name+"; 年龄: "+this.age);
     },
    };
    obj2.say();

    var a = [10,20,30];
    console.log(a.constructor == Array);    //获取对象的构造方式
    console.log(s1 instanceof Stu);

2、创建数组对象

        var a1 = new Array(); //定义一个空数组
        var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
        var a3 = new Array(10,20,30); //定义一个指定数值的数组

        console.log(a1.length);
        console.log(a2.length);
        console.log(a3.length);

        var a4 = [10,20,30,40,50]; //快捷定义数组

        //数组的遍历
        for(var i=0; i<a4.length;i++){
            console.log(i,"=>",a4[i]);
        }

        for(var i=a4.length-1; i>=0;i--){
            console.log(i,"=>",a4[i]);
        }

        for(var i in a4){
            console.log(i,"=>",a4[i]);
        }

        a4.forEach(function(v){
            console.log(v);
        });

        //数组的方法：
        console.log(a4.toString());             //返回以,隔开的字符串
        console.log(a4.join(":"));
        var aa = [1,2,3];
        console.log(aa.concat(4,5));

        var b = [10,50,30,20,70,40];
        console.log(b.join(":"));                 //返回以：隔开的字符串
        console.log(b.sort().join(":"));           //排序
        console.log(b.reverse().join(":"));       //颠倒数组

        var aa = new Array(10,20,30); 
        console.log(aa.join(":"));
        aa.push(50);                   //从后面加入
        aa.push(40);
        console.log(aa.join(":"));
        aa.pop();                     //从后面删除一个
        console.log(aa.join(":"));

        //清空
        console.log(b.join(":"));
        b.length = 3;
        console.log(b.join(":"));
        b = [];
        console.log(b.join(":"));

3、Date对象

     function formatDate(dd){
        if(!dd instanceof Date){
            return;
        }
        var y = dd.getFullYear(),
            m = dd.getMonth()+1,
            d = dd.getDate(),
            hh = dd.getHours(),
            mm = dd.getMinutes(),
            ss = dd.getSeconds();
        //判断单位数字前补零操作
        hh = hh<10?'0'+hh:hh;
        mm = mm<10?'0'+mm:mm;
        ss = ss<10?'0'+ss:ss;
        return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
    }

    var dd = new Date();
    //从1970年1月1日零时零分0秒至今的毫秒数
    document.write("时间戳："+dd.valueOf());
    
    document.write("<h2>"+formatDate(dd)+"</h2>");

4、单击事件和获取html元素

添加单击事件：

1.任何标签都可以添加

2.在标签内加：οnclick=“响应操作”

<body>
    <h1 id="hid">JavaScript语言实例--单击事件</h1>
    <button onclick="fun()">点击我</button>
    <ul id="uid">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
    </ul>
    <ol>
        <li>1111111</li>
        <li>2222222</li>
    </ol>
</body>

2.获取元素和改变元素样式：

    function fun(){
        console.log('hello js');
        //获取id属性值为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        //修改标签之间的内容
        hid.innerHTML = "JavaScript语言实例--元素操作";
        //改变 HTML 元素的样式
        hid.style.color = "red";
        hid.style.backgroundColor = "#ddd";
   }

   //获取当前网页中的所有li元素标签
   //var mlist = document.getElementsByTagName("li");
   var mlist = document.getElementById("uid").getElementsByTagName("li");
   
   //遍历输出
   for(var i in mlist){
       if(!isNaN(i)){      //mlist中包含length等属性，用if判断去掉
          console.log(mlist[i].innerHTML);
          mlist[i].style.color="red";
       }
   }

5.Timing定时事件

setTimeout(function, milliseconds）

setInterval(function,milliseconds)

clearInterval(mytime) 参数为上面两个定时对象

    //定义时3秒后执行参数中的函数
    setTimeout(function(){
        console.log("Hello JS!");
    },3000);

    //定时每隔1秒执行参数回调函数一次
    var m = 0;
    setInterval(function(){
        m++;
        console.log("Hello "+m);
    },1000)

6.事件绑定

1.事件源：所有html标签

2.事件：onclick、dblclick …

3.事件处理程序

事件绑定方式：

1.主动绑定

2.被动绑定

<body>
    <h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
    <button onclick="fun()">按钮1</button>       //方式1
   
    <button id="bid">按钮2</button>
</body>
<script>
     function fun(){
         console.log("按钮1被点击了");
     } 

     document.getElementById("bid").onclick = function(){  //方式2
        console.log("按钮2被点击了");
     }
</script>

事件源对象的获取:

<body>
    <h1>JavaScript语言实例--获取事件源对象</h1>
    <h2 onclick="fun(this)">2级标题1</h2>
    <h2 id="hid">2级标题2</h2>
</body>
<script>
    function fun(ob){
        console.log("aaaaaaaaaa");
        //console.log(ob);
        ob.style.color = "green";
    }

    document.getElementById("hid").onclick = function(){
        console.log("bbbbbbbbbbb");
        //此种事件绑定方式，this就表示当前事件源对象
        //console.log(this);
        this.style.color = "red";
    }

罗密欧与猪一夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS创建对象和事件绑定

JS对象1、对象的创建1.使用原始的方式创建对象 var obj = new Object(); obj.name = "zhangsan"; //为obj对象添加属性 obj.age = 20; obj.say = function(){ //添加功能（函数/方法） console.log(this.name,":",this.age); } //测试 console.log(obj.name); console.log(obj.age);
复制链接

扫一扫