week2day1 web前端

1.对象

1.什么是对象

和Python中的对象一样，有对象属性和对象方法

2.创建对象

a.创建对象字面量
对象字面量: {属性名1:属性值1, 属性名2:属性值1}
注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数这个属性就是对象方法

    p1 = {
            name:'余婷', 
            age:10, 
            eat:function(){
            console.log('吃饭!')
            }
        }
    p2 = {
            name:'小明', 
            age:18, 
            eat:function(){
            console.log('吃饭!')
            }
        }

b.通过构造方法创建对象
声明构造方法（类似python声明类）
声明一个函数，使用函数名来作为类名，在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名，首字母大写
this类似python中的self
通过构造方法创建对象
对象 = new 构造方法()

function Person(name1='张三', age1=18, sex1='男'){
        //添加对象属性
        this.name = name1
        this.age = age1
        this.sex = sex1
        //添加对象方法
        this.eat = function(food){
            console.log(this.name+'在吃'+food)
        }
        //返回对象
        return this
    }
    
    //创建Person的对象
    p3 = new Person()
    p4 = new Person('小明')
    //使用对象属性和方法
    console.log(p3, p4, p3===p4, p3.age, p4.name)
    p4.eat('苹果')
    
    
    //调用函数，获取返回值
    win1 = Person()
    console.log(win1)
    win1.alert('我是window')

c.函数中this关键字
当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象，函数中的this就是当前对象;
直接调用函数的时候，函数中的this是window对象
a. 对象.属性 - p5.name
b. 对象[属性名]

4.修改对象属性的值

属性存在的时候是修改，不存在的时候就是添加
对象.属性 = 值
对象[属性名] = 值

p5.name = '小红'
    console.log(p5)
    p5['age'] = 30
    console.log(p5)

5.添加属性

p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)
给对象添加属性只作用于一个对象,不影响其他对象

:注意：构造方法名(类名).prototype.属性 = 值 --- 给指定构造方法创建的所有的对象都添加指定的属性

    Person.prototype.aaa = '123'
    p6 = new Person()
    p6.aaa = 'abc'
    console.log(p6.aaa)
    console.log(p5.aaa)

练习：给String类型添加方法

    String.prototype.ytIndex = function(x){
        return this[x]
    }
    str1 = new String('abcdef')
    console.log(str1.ytIndex(0))
    console.log('hello'.ytIndex(3))

练习：练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序

    students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
    //sort方法排序后，原数组会改变，也会产生新的数组
    newStudents = students.sort(function(a,b){
        return a.score - b.score;
    });
    console.log(newStudents, students)

2.DOM获取节点

什么是DOM(文档对象模型)

DOM是document object mode的缩写
DOM模型就是一个树结构，里面是由各种节点组成
document对象 - js写好的一个对象,代码的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点

2.节点操作====获取节点

1.直接获取节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1" class="c1">我是段落1</p>
        <a href="" id="a1">百度一下</a>
        <a href="" class="c1">刷新</a>
        <input type="text" name="username"  value="" />
        <input type="password" name="username" value="" />
    </body>
</html>

a.通过标签的id值来获取指定的标签
document.getElementById(id值) - 返回节点对象
如果html中同样的id对应的标签有多个，只能取一个。所有一般在使用id的时候id要唯一

     var pNode = document.getElementById('p1')
     console.log(pNode)

b.通过标签名来获取指定的标签
document.getElementsByTagName(标签名) - 返回的是一个数组对象，数组中是节点

     var aNodeArray = document.getElementsByTagName('a')
     for(x in aNodeArray){
        // 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
        var aNode = aNodeArray[x]
        
        // 只对标签进行操作
        if(typeof(aNode) == 'object'){
            console.log(aNode, '是标签！')
        }
     }

c.通过类名来获取指定的标签
document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象

     var c1NodeArray = document.getElementsByClassName('c1')
     console.log(c1NodeArray)

d.通过name属性的值来获取指定的标签(了解)
返回的是数组对象

console.log(document.getElementsByName('username'))

2.间接获取节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box1">
            box1
            <div id="box11">
                div11
            </div>
            <div id="box12">
                div12
            </div>
            <div id="box13">
                div13
            </div>
        </div>
        
    </body>
</html>

1.获取父节点

子节点.parentElement - 获取子节点对应的父节点

    var box11Node = document.getElementById('box11');
    //1.获取父节点
    var box1Node = box11Node.parentElement;
    var box1Node2 = box11Node.parentNode;
    console.log(box1Node, box1Node2);

2.获取子节点

a.获取所有的子节点
父节点.children - 返回一个数组对象

    var allChildArray = box1Node.children
    console.log(allChildArray)

了解：父节点.childNodes - 获取父节点下所有的内容（包括子节点和文本）
var allChildArray2 = box1Node.childNodes
console.log(allChildArray2)

b.获取第一个子节点
//父节点.firstElementChild
var childNode = box1Node.firstElementChild
console.log(childNode)
c.获取最后一个子节点
var childNode2 = box1Node.lastElementChild
console.log(childNode2)

3.创建添加删除节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button onclick="addDiv()">添加</button>
        <p id="p1", class="cp1" style="color: darkseagreen;">我是段落</p>
        <div id="div1" style="height: 400px; background-color: lightgoldenrodyellow;">
            <div id="div11" style="height: 60px; width: 120px; background-color: yellowgreen;">
            </div>
        </div>
    </body>
</html>

1.获取标签内容

    var pNode = document.getElementById('p1');
    var content = pNode.innerHTML;

1.1修改标签内容

pNode.innerHTML = '我不是段落，哈哈~'

2.获取标签样式中的文字颜色

var pColor = pNode.style.color;

2.1修改标签样式

    pNode.style.color = 'salmon'
    pNode.style.fontSize = '30px'
    
    console.log(content, pColor)

3.创建节点

方法：document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)

a.节点属性：
标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建
标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值。
例如，a标签节点有：href属性, id属性, className属性, style属性等....
img标签节点有：src属性,id属性，style属性,alt属性, title属性等....
b.innerHTML和innerText属性
innerHTML - 双标签的标签内容(包含其他标签)
innerText - 双标签的标签内容(侧重只有文字)

3.1创建一个div标签对象

    var divNode =  document.createElement('div')
    divNode.innerText = '我是box1'

3.2创建一个img标签对象

    var imgNode = document.createElement('img')
    imgNode.src = 'img/thumb-1.jpg'

4.添加节点

a.在指定的标签中的最后添加一个节点
父节点.appendChild(需要添加的节点)

    var div1Node = document.getElementById('div1')
    function addDiv(){
        var divNode =  document.createElement('div')
        divNode.innerText = '我是box1'
        div1Node.appendChild(divNode)
    }

b.在指定的节点前插入一个节点
父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点

    div1Node.insertBefore(imgNode, div1Node.firstChild)

5.清楚节点

5.1父节点.removeChild(子节点) - 删除父节点中指定的子节点

div1Node.removeChild(imgNode)

5.2清空标签（删除所有的子标签）

div1Node.innerHTML = null

week2day1 web前端