js基础第六天

01-js对象

• 1.对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

    var person={name:"coderYJ", age:18};
  

• 还可以这样声明

     var person={
    name : "coderYJ",
    age:18
    };
  

• 对象属性有两种寻址方式：

  • 如果用 . 来访问对象里面的值,这个名称必须是对象里面的属性,如果不是就访问不到

  • 如果用 [] 来访问,[]里面的可以是一个变值

      var name=person.name;
      var name=person["name"];
    

• 2.js对象的遍历

    var person = {name:"coderYJ", age:18};
    // 采用增强for循环来遍历js对象
    for(var k in person){
        console.log(k);
        console.log(person[k]);
    }
  

02-根据js对象动态设置属性

// 1.获取标签
var box = document.getElementById('box');

// 2.设置属性
//    box.style.width = '200px';
//    box.style.height = '200px';
//    box.style.background = 'red';
// 网络返回数据
var attr = {width:'200px',height:'200px',background:'yellow'};

// 动态设置
for(var k in attr){
    box.style[k] = attr[k];
}

03-json动态创建节点

• 1.JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

    // 1.json数据
    var data = {
        "box":[
            {"name":"张三","age":18,"sex":"男"},
            {"name":"李四","age":19,"sex":"女"},
            {"name":"王五","age":20,"sex":"男"},
            {"name":"王五","age":20,"sex":"女"}
        ]
    };
    // 2.去除数据
    var dataArray = data['box'];
  
    var obody = document.body;
  
    // 3.设置数据
    for(var i = 0; i<dataArray.length; i++){
        // 3.1创建元素
        var div = document.createElement('div');
        obody.appendChild(div);
        var ul = document.createElement('ul');
        div.appendChild(ul);
  
        // 3.2取出数据
        var json = dataArray[i];
        for(var k in json){
            var li = document.createElement('li');
            ul.appendChild(li);
            li.innerHTML = k + ":" +  json[k];
        }
    }
  

04-设置节点的第二种方法

<div id="box" title="123" abcd="456"></div>
var box = document.getElementById('box');
// 预先绑定的属性
//    box.setAttribute('title','123');

// 绑定类名
//    box.className = 'box';
/*
第一个参数是要绑定的属性名称
第二个参数是要绑定属性值
* setAttribute()
* */
box.setAttribute('class','box');

// 获取属性
console.log(box.getAttribute('title'));
console.log(box.getAttribute('abcd'));

05-常用的方法抽取

function $(id) {
    return document.getElementById(id);
}
function getEleTagName(dom,tagName) {
    return dom.getElementsByTagName(tagName);
}
// 遍历dom
function each(dom,fn) {
    for(var i = 0; i<dom.length; i++){
//            console.log(btns[i].innerHTML);
        // 要做的事情我们并不知道,所以需要外界决定
        fn(dom[i],i);
    }
}
// 使用函数
each(btns,function (obj,i) {
    console.log(obj.innerHTML);
    console.log(i);
});

• 抽取js工具类

    function $(id) {
        return document.getElementById(id);
    }
    function getEleTagName(dom,tagName) {
        return dom.getElementsByTagName(tagName);
    }
    // 遍历dom
    function each(dom,fn) {
        for(var i = 0; i<dom.length; i++){
    //            console.log(btns[i].innerHTML);
            // 要做的事情我们并不知道,所以需要外界决定
            fn(dom[i],i);
        }
    }
  

07-事件对象的认识

• 当触发事件的时候系统会在事件指令中传入事件对象,这个事件对象包含了所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。 普通浏览器支持 event IE 678 支持 window.event

  
  80501-106.jpg