js基础day06

js基础day06

一.动态创建节点

    
    
    



创建节点
删除节点

二.发微博

    
    
    




    发微博:
    发布
    

    

三.日期对象

1 获取日期对象

var myDate = new Date();

2 Date() 返回当日的时期和时间

console.log(myDate);

3 myDate.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

4 myDate.getDay()从 Date 对象返回一周中的某一天 (0 ~ 6), 0 代表周日, 6 代表周六

5 myDate.getMonth()从 Date 对象返回月份 (0 ~ 11)。 0（一月） 11（十二月）

6 myDate.getFullYear()从 Date 对象以四位数字返回年份。

7 myDate.getHours()返回 Date 对象的小时 (0 ~ 23)。

8 myDate.getMinutes()返回 Date 对象的分钟 (0 ~ 59)。

9 myDate.getSeconds()返回 Date 对象的秒数 (0 ~ 59)。

10 myDate.getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。

11 myDate.getTime()返回 1970 年 1 月 1 日至今的毫秒数。时间戳

12 myDate.valueOf()返回 Date 对象的原始值。

四.钟表案例

五.js对象认识

• js对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
• 在 JavaScript 中，对象是拥有属性和方法的数据。
• 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
• 注意: js对象格式 在其他语言中 为键值对 {key: value}, 这种格式也叫字典
• 注意: js对象是无序的数据集合, 对象根据属性名就能取到值

1.定义js对象

var person = {
        name:'张三',
        age:20,
        score:99
    }

2.获取js值方式

a.对象.属性名

person.name; // 输出为 张三

b.对象[属性名]

person['age']; //输出为 20

3. js属性赋值

person.name = '李四'
person['age']= 33;

4.json

• json 传输数据的格式, 本质是一个字符串
• js对象: 是以键值对的方式保存数据, 以大括号进行包括的, {key:value}
• JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
• json 中 ，[] 是一个数组 。 {} 是一个对象

5.js和json相互转换

• js对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'

• JSON 转换为js对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

六.js对象dom操作

根据js对象中数据，设置元素

八.自定义属性方法二

1.setAttribute() 设置值

• setAttribute(name,value)
• name: 要设置的属性, 字符串类型
• value: 属性值, 字符串类型
• 没有返回值
• 注意:如果当前元素里面有这个属性, 再次设置这个属性, 会覆盖前面属性

//获取box
var box = document.getElementById('box');
var item = box.setAttribute('name', '张三');
box.setAttribute('name', '李四');
console.log(item);

2.getAttribute() 给自定义属性赋值

• 参数: 属性名
• 返回值: 获取的值

var item2 = box.getAttribute('name');
console.log(item2);

九.event对象

1.事件也是对象

• 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

• Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

• 事件通常与函数结合使用，函数不会在事件发生前被执行！

• clientX返回当事件被触发时，鼠标指针的水平坐标。

• clientY返回当事件被触发时，鼠标指针的垂直坐标。

 //注意：哪个元素触发的点击事件， 获取的就是哪个元素上的点
    //event对象， 只要添加事件，系统就会传递一个event对象
   box.onclick = function (event) {
        //alert(111);
        //获取box鼠标点坐标
        //event.clientX 光标在网页可视区域的x坐标
        console.log(event.clientX);
        //event.clientY 光标在网页可视区域的y坐标
        console.log(event.clientY);
}

2.获取鼠标点坐标兼容写法

• event 兼容性 只支持 ie9+ 和 opera 火狐
• window.event 支持 ie全版本， 支持opera 谷歌 ,不支持火狐

document.onclick = function (event) {
 
//        console.log(event.clientX);
//        console.log(event.clientY);

//        console.log(window.event.clientX);
//        console.log(window.event.clientY);

        //兼容写法
        var eve = event || window.event;
        console.log(eve.clientX);
        console.log(eve.clientY);
    }

十.offset家族

• box.offsetWidth 获取元素自身宽度。offsetWidth = width + border*2 + padding * 2

• box.offsetHeight 获取元素自身高度。offsetHeight = height + border*2 + padding * 2

• 注意：使用 style.width 获取元素自身宽度，该元素必需通过行内式设置，否则获取不到

• box.offsetLeft 获取当前有定位父元素左边距离

• box.offsetTop 获取当前有定位父元素顶部距离

• 注意：先看当前父元素有没有定位, 如果当前父元素没有定位,就往上找, 直到找到有定位父元素为止

十一.天使案例