Day6 js和DOM操作

作者: ququququ | 来源:发表于2019-02-11 17:55 被阅读0次

一、作用域

函数声明语法：

function 函数名(参数列表){
函数体
}

匿名函数：

函数变量 = function (参数列表){
函数体
}

1.局部变量：

通过var关键字声明在函数里面的变量是局部变量（声明开始到函数结束可以使用）

2.全局变量

a.声明在函数外部的变量（从声明开始到文件结束都可以使用）

b.直接声明在函数内的变量（不加var）

注意：后面的其他script标签也可以使用

<script type="text/javascript">
    a100 = 10
    var a200 = 20
    function func2(){
        // b100还是全局变量，前面没有加var的都是全局变量
        b100 = 20
        var b200 = 200
    }
    func2()
    console.log(b100)
    // 下面代码报错，b200为局部变量
    // console.log(b200)
    function fuuc1(){
        console.log(a100)
        console.log(a200)
    }
    fuuc1()
</script>
<script type="text/javascript">
    console.log(a100)
    console.log(a200)
</script>

二、字符串

<script type="text/javascript">
    /*
        1.字符串运算
        a.加法运算
        注意：js中支持字符串和其他数字相加
    */
    str1 = 'abc'
    str2 = 'hello'
    console.log(str1+str2)  // abchello
    console.log(str1+100)   //abc100
    console.log(str1+[1,2,3])//abc1,2,3
    console.log(1+1+'a')    //2a
    /*
        b.比较运算符：>,<,==,===,!=,!==
        1)比较相等：
    */
    console.log('abc'=='bac')   //false
    console.log('111'==111)     //true
    console.log('111'===111)    //false
    // 2)比较大小
    console.log('a' > 'A')      //true
    console.log('abc' > 'bd')   //false

    // c.字符串长度
    console.log(str2.length)

    //2.相关方法
    //创建字符串对象
    str3 = new String('abc')
    console.log(str3)

    //字符串.charAt(下标) 获取指定下标对应的字符
    console.log('hello'.charAt(0))
    console.log('hello'[0])
    console.log('hello'[10])    //下标可以越界但是不会报错

    // 字符串.charCodeAt(下标) 获取指定下标对应的字符的编码（js中的字符采用的也是Unicode编码）
    console.log('hello'.charCodeAt(0))

    // 字符串.concat(数据1, 数据2,...)
    console.log('abc'.concat(123, 'aaa'))

    // 字符串1.endWith(字符串2)
    // 判断字符串1是否以字符串2结尾
    console.log('hello'.endsWith('o'))

    // 字符串1.indexOf(字符串2)
    // 获取字符串2在字符串1第一次出现的位置的下标
    console.log('hello'.indexOf('l'))
    console.log('hello'.lastIndexOf('l'))

    // 字符串.match(正则表达式)
    // 注意：js中正则写着两个//之间
    re = /\d{3}/
    result = '234aaa'.match(re)
    console.log(result)

    // 字符串.repeat(数字)s
    console.log('abc'.repeat(2))

    // 字符串1.replace(正则表达式, 字符串2)
    // 将字符串1中第一个满足要求替换
    console.log('aa12ds3'.replace(/\d/, 'A'))
    // 正则后面加g，则是全部满足要求替换
    console.log('aa12ds3'.replace(/\d/g, 'A'))

    // 字符串.slic(开始下标, 结束下标)
    // 开始下标可以取到，结束下标取不到
    console.log('abcde'.slice(0, 3)) //abc
    console.log('abcde'.slice(0, -1)) //abcd
    console.log('abcde'.slice(0, )) //abcde

    // 字符串1.split(字符串2)
    // 将字符串1按照字符串2切割
    console.log('hello'.split('e'))
</script>

三、数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


<script type='text/javascript'>
    // 加法运算：两个数组相加实质是将数组转换成字符串拼接
    console.log([1, 2, 3] + [2, 3, 'a'])
    console.log(String([1, 2, 3]))
    // 比较运算,判断相等是判断两个对象的地址是否相等，相当于python中的is
    arr1 = [1, 2]
    arr2 = [1, 2]
    console.log([1, 2] == [2, 1])   //false
    console.log([1, 2] == [1, 2])   //false
    console.log(arr1 == arr2)   //false
    console.log(arr1 === arr1)   //false


    // 3.数组长度:length属性
    console.log(arr1.length)

    /*2.元素的增删改查
     1）查：获取元素
     a.获取当元素
     数组[下标] - 获取下标对应的元素
     注意：负数下标没有意义
    */
    fruits = ['苹果', '栗子', '西瓜', '梨子']
    console.log(fruits[1])
    // b.切片
    // 数组.slice(开始下标, 结束下标) - 返回一个新的数组
    // 注意：结束下标取不到；下标可以是负数；开始下标要在结束下标前面
    console.log(fruits.slice(0, 3))

    /*
    c.遍历
    
    */
    for(index in fruits){
        console.log(fruits[index])
    }

    //2)增：添加元素
    // 数组.push(元素) - 在指定的数组的最后添加一个元素
    fruits.push('香蕉')
    console.log(fruits)

    // 3)删除：删除元素
    // 数组.pop()  -  删除最后一个元素
    fruits.pop()
    console.log(fruits)

    // 数组.splice(下标, 个数) - 从指定下标开始删除指定个数的元素
    fruits.splice(1, 1)
    console.log(fruits)

    // 4）改：修改元素
    // 数组[下标] = 新值  - 修改指定下标对应的值
    fruits[0] = '山竹'
    console.log(fruits)


    // 3.相关方法
    // 1)数组.reverse()
    // 倒序
    fruits.reverse()
    console.log(fruits)

    // 2)数组.sort()
    // 元素从小到大排序
    scores = [62, 33, 55, 26, 92]
    scores.sort()
    console.log(scores)

    // 数组.sort(函数)  - 按指定规则对数组中的元素进行排序
    // 函数要求：两个参数(代表的是数组中的两个元素),一个返回值(两个元素的差);
    students = [
        {'name':'小明', 'score':90, 'age':23},
        {'name':'大明', 'score':30, 'age':20},
        {'name':'小画', 'score':95, 'age':21},
        {'name':'小红', 'score':70, 'age':22}
    ]
    // 年龄从小到大排列
    students.sort(
        function(a, b){
            return a['age'] - b['age'] 
            // return Math.random - 0.5
        }
    )
    console.log(students)

    // 成绩从小到大排列
    students.sort(
        function(a, b){
            return a['score'] - b['score'] 
            // return Math.random - 0.5
        }
    )
    console.log(students)

    // 3) 数组.join(字符串)
    // 将指定的字符串插入到数组的每个元素之间产生一个新的字符串
    nums = [13, 23, 42]
    newData = nums.join('aa')
    console.log(newData)    //13aa23aa42

</script>

四、对象

1.对象字面量

用大括号括起来，里面是多个属性，属性名和属性值之间用冒号连接,多个属性之间用逗号隔开
注意：1）对象字面量需要保存 2）在对象字面量里面，属性名可以加引号也可以不加引号（没有区别）

2.构造方法 - 创建对象的方法

function 类名(参数列表){
对象属性
对象方法
}

说明：
a.对象属性： this.属性名 = 值
b.对象方法： this.方法名 = 匿名函数
c.类名：首字母大写

<script type = 'text/javascript'>
    obj1 = {
        'name': 'quuq',
        'age': 29
    }
    console.log(obj1)

    // 2.获取对象属性
    // 1)对象[属性名]
    console.log(obj1['name'], obj1['age'])
    // 2)对象.属性
    console.log(obj1.age, obj1.name)

    //3.增：添加属性
    //1) 对象.属性 = 值
    //2) 对象[属性名] = 值
    // 属性存在是修改，不存在就是添加
    obj1.name = '小明'
    console.log(obj1)

    obj1.height = 180
    console.log(obj1)

   
    function Person(name='张三', age=19, sex='男'){
        // 这儿的this相当于python中的self
        this.name = name
        this.age = age
        this.sex = sex
        this.eat = function(food){
            console.log(this.name + '吃'+ food)
        }
    }

    // 5.创建对象
    // 对象 = new 构造方法()
    p1 = new Person()
    console.log(p1)
    // 获取对象属性
    console.log(p1.name, p1.age, p1.sex)
    // 调用对象方法
    p1.eat('包子')

    // 注意：js中声明全局变量实质都是添加给window对象的属性
    p3 = Person()
    p2=window.Person()

    // 6.添加类的全局的属性
    p4 = new Person('老罗', 30, '男')
    p4.height = 180
    console.log(p4)

    // 类名.prototype.属性名 = 属性值 - 给指定的类的所有对象添加属性
    Person.prototype.height = 180
    p5 = new Person()
    console.log(p5)
    console.log(p5.height)


    // 练习：给数组添加方法，来统计数组中指定元素的个数
    Array.prototype.myCount = function(item){
        num = 0
        for (i in this){
            item1 = this[i]
            if (item1 == item){
                num++
            }
        }
        return num
    }


    console.log([1, 2, 3, 3, 5, 2, 2].myCount(1))
    // 练习1:声明一个创建学生的构造方法，有属性姓名、年龄、成绩、学号，
    // 必须赋值：姓名
    // 不能赋值：成绩，学号
    // 随意：年龄
    function Student(name, age=19){
        this.name = name
        this.age = age
        this.score = 90
        this.stuId = '001'
    }
    stu1 = new Student('小红', age = 18)
    console.log(stu1)

    // 练习2：给String添加方法，统计字符串中字母字符的个数
    String.prototype.letterCount = function(){
        num = 0
        i = 0
        while(i<this.length){
            ch = this[i]
            if ((ch >= 'a'&& ch <='z') || (ch >= 'A'&& ch <='Z')){
                num++
            }
            i++
        }
        return num
    }
    console.log('Aa1bc'.letterCount())

    //7.系统对象
    // document对象
    // window对象
    // Element类型的对象
    // Date类型对象
    date1 = new Date()
    console.log(date1)
    // 年
    year = date1.getFullYear()
    month = date1.getMonth()
    // 日
    day = date1.getDate()
    // 时
    hours = date1.getHours()
    // 分
    min = date1.getMinutes()
    // 秒
    seconds = date1.getSeconds()

    // 星期
    week = date1.getDay()
    console.log(''.concat(year,'年',month+1,'月',day,'日',hours,':',min,':',seconds))
    console.log('星期', week)
</script>

五、DOM操作

1、访问节点/获取节点

方法	说明
document.getElementById(id);	返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);	返回带有指定名称的节点集合
document.getElementsByTagName(tagname);	返回带有指定标签名的对象集合
document.getElementsByClassName(classname);	返回带有指定class名称的对象集合

2.创建节点/属性

方法	说明
document.createElement(eName);	创建一个节点
document.createAttribute(attrName);	对某个节点创建属性
document.createTextNode(text);	创建文本节点

3.添加节点

方法	说明
document.createElement(eName);	创建一个节点
document.createAttribute(attrName);	对某个节点创建属性
document.createTextNode(text);	创建文本节点

4.复制节点

cloneNode(true | false);　　//复制某个节点参数：是否复制原节点的所有属性

5.删除节点

parentNode.removeChild(node);　　//删除某个节点的子节点 node是要删除的节点

6.获取父节点

childNode.parentNode;　　//得到已知节点的父节点

7.替换节点

replace(newNode,oldNode);

8.查找节点

方法	说明
parentObj.firstChild;	获取子节点的一个节点
parentObj.lastChild;	获得一个节点的最后一个节点
parentObj.childNodes;	获得节点的所有子节点，然后通过循环和索引找到目标节点

<script type="text/javascript">
    // 1.DOM(文档对象模型：document object mode)
    // 1)document对象：指定是指向整个网页内容的一个对象
    // 2)节点：Element类型对象，指向的是网页中的标签

    // 2.获取节点
    // 1)通过id获取节点：getElementById - 返回节点对象（实质就是指向指定标签的对象）
    p1Node = document.getElementById('p1')
    console.log(p1Node)
    // innerText是标签文本内容
    p1Node.innerText = 'hello js'


    // 2）通过class获取节点:getElementsByClassName(class值) - 返回节点数组
    c1Nodes = document.getElementsByClassName('c1')
    console.log(c1Nodes)

    // 注意：遍历的时候不用用for in
    for(i=0; i<c1Nodes.length; i++){
        c1Node = c1Nodes[i]
        // 修改样式中的文字颜色
        c1Node.style.color = 'red'
    }

    // 3)通过标签名获取节点：getElementsByName(标签名) - 返回数组
    h1Nodes = document.getElementsByTagName('h1')
    console.log(h1Nodes)

    // 4)通过name属性值获取节点：
    nameNodes= document.getElementsByName('userName')
    console.log(nameNodes)

    // 5)获取子标签
    div1Node = document.getElementById('div1')
    div1Children = div1Node.children
    console.log(div1Children)

    // 获取第一个字节点
    // 节点对象.firstElementChild
    firstNode = div1Node.firstElementChild
    console.log(firstNode)


    // 获取最后一个子节点
    // 节点对象.lastElementChild
    lastNode = div1Node.lastElementChild
    console.log(lastNode)

    // 6)获取父节点
    bodyNode = div1Node.parentElement
    console.log(bodyNode)

    // 3.创建和添加节点
    // 1)创建节点 
    // document.createElement(标签名)
    // 创建一个img标签
    imgNode = document.createElement('img')
    imgNode.src = 'windows.png'

    //2)添加节点
    // 节点1.appendChild(节点2) - 在节点1后面添加子标签节点2
    // bodyNode.appendChild(imgNode)

    // 节点1.insertBefore(新的节点, 节点2) - 在节点1中的节点2的前面添加新节点
    bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
    bodyNode.insertBefore(imgNode, c1Node[0])
    // 注意：一个节点不管添加几次，只有最后一次添加有效（因为节点只有一个）

    // 4.拷贝/赋值节点
    newImgNode = imgNode.cloneNode()
    newImgNode.style.width = '100px'
    div1Node.appendChild(newImgNode)

    // 5.删除节点
    // 节点.remove() - 删除自己的节点
    p1Node.remove()
    // 节点1.remove(节点2) - 删除节点1中的节点2
    div1Node.removeChild(div1Node.lastElementChild)

    // 6.替换节点
    bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])
</script>

Day6 js和DOM操作

一、作用域

1.局部变量：

2.全局变量

二、字符串

三、数组

四、对象

1.对象字面量

2.构造方法 - 创建对象的方法

五、DOM操作

1、访问节点/获取节点

4.复制节点

8.查找节点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读