js基础

变量的作用域

函数声明语法：

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

全局变量:
- a.声明在函数外部的变量（从声明开始到文件结束都可以使用）
- b.直接声明在函数内的变量（不加var）

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

    a100 = 10
    var a200 = 100

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

    function func2(){
        //b100是全局变量
        b100 = 20
        //b200是局部变量
        var b200 = 200
        console.log(b200)
    }
    func2()
    
    console.log(b100)
    
    
    function func1(){
        console.log(a100)
        console.log(a200)
        console.log(b100)
    }
    func1()
    
    b = 1
    while(b < 5){
        console.log(a100)
        console.log(a200)
        console.log(b100)
        b++
    }

字符串

字符串运算
- 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

b.比较运算: >, <, >=, <=,==, ===, !=, !==
1)比较相等

    console.log('abc'=='abc')   //true
    console.log('abc'=='bac')   //false
    console.log(100=='100')   //true
    console.log(100==='100')  //false

2)比较大小: 和python字符串比较大小的方式一样

    console.log('abc' > 'bd')  //false
    console.log('z' > 'shjsjhsjasss')   //true

c.字符串长度

    //字符串.length
    console.log(str2.length)

相关方法

    //创建字符串对象
    str3 = new String('abc')
    console.log(str3)

1).big方法

产生一个big标签，并且标签中的内容就是字符串的值

    newStr = str3.big()
    console.log(str3, newStr)

2).字符串.charAt(下标)

获取指定下标对应的字符; 相当于: 字符串[下标]

    console.log('hello'.charAt(0))   //h
    console.log('hello'[1])    //e

3).字符串.charCodeAt(下标)

获取指定下标对应的字符的编码(js中的字符采用的也是unicode编码)

    console.log('hello'.charCodeAt(0))   //104

4)字符串.concat(数据1,数据2,....)

将字符串和多个数据依次连接在在一起产生一个新的字符串(相当于+的功能)

    console.log('abc'.concat(123, 'aaa'))   //abc123aaa

5)字符串1.endsWith(字符串2)

判断字符串1是否以字符串2结尾

    console.log('hello'.endsWith('llo'))   //true

6)字符串1.indexOf(字符串2)

获取字符串2在字符串1中第一次出现的位置

    console.log('abcbaab'.indexOf('b'))

7)字符串1.lastIndexOf(字符串2)

获取字符串2在字符串1中最后一次出现的位置

    console.log('abcbaab'.lastIndexOf('b'))

8)字符串.match(正则表达式)

相当于python中re模块的match; 匹配成功返回
注意:js中正则写在两个//之间

    re = /\d{3}/
    result = '237abc'.match(re)
    console.log(result, result[0], result.index)

9)字符串.repeat(数字)

指定的字符串重复出现指定次数产生一个新的字符串(相当于python中的*)

    console.log('abc'.repeat(2))

10)字符串1.replace(正则表达式,字符串2)

将字符串1中第一个面子正则表达式的子串替换成字符串2

    console.log('aaa34bbb992nnn92nkkj8==22jkk'.replace(/\d+/, 'A'))

11)字符串.slice(开始下标, 结束下标)

从开始下标获取到结束下标前为止，步长是1
注意: 这儿的下标可以是负数，代表倒数第几个

    console.log('hello'.slice(0, 2))    //he
    console.log('hello'.slice(1, -2))   //el

12)字符串1.split(字符串2)

将字符串1按照字符串2进行切割，返回一个数组

    console.log('hello'.split('e'))

数组

数组.sort(函数) - 按指定规则对数组中的元素进行排序
函数的要求：两个参数(代表的是数组中的两个元素)，一个返回值(两个元素或者两个元素的属性的差)

字面量

对象字面量

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

    obj1 = {
        'name':'余婷',
        'age': 18,
        sex: '女'
    }
    p1 = {
        'name':'小明',
        'age': 20,
        sex: '男'
    }
    console.log(obj1)

获取对象属性对应的值

对象[属性名]

    console.log(obj1['name'], obj1['sex'])
    
    proName = 'age'
    console.log(obj1[proName])

对象.属性

    console.log(obj1.name, obj1.sex)

增/改: 添加/修改属性
1)对象.属性 = 值
2)对象[属性名] = 值

属性存在是修改

    obj1.name = '小明'
    obj1['name'] = '小花'
    console.log(obj1)

属性不存在是添加

    obj1.height = 180
    obj1['weight'] = 70
    console.log(obj1)

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

语法:

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

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

    function Person(name='张三', age=18, sex='男'){
        //这儿的this相当于python中的self
        //对象属性
        this.name = name
        this.age = age
        this.sex = sex
        //对象方法
        this.eat = function(food){
            console.log(this.name+'吃'+food)
        }
        console.log('=====:',this)
    }

创建对象

对象 = new 构造方法()

    //创建对象
    p1 = new Person()
    console.log(p1)
    //获取对象属性
    console.log(p1.name, p1.age, p1.sex)
    //调用对象方法
    p1.eat('包子')
    
    p2 = new Person('小明', 20, '女')
    console.log(p2)
    p2.eat('面条')
    
    
    //注意： js中声明全局变量实质都是添加给window对象的属性
    p3 = Person()
    p3 = window.Person()
    console.log(p3)
    
//  window.alert('弹框')
    alert('弹框')
    a = 10
    console.log(window.a)

添加类的全局的属性

类名.prototype.属性名 = 属性值 - 给指定的类的所有对象添加属性

    Person.prototype.height = 180
    Person.prototype.run = function(){
        console.log(this.name+'在跑步!')
    }
    p4 = new Person('老骆', 30, '男')
    
    console.log(p4.height, p1.height)
    p4.run()
    p1.run()
    p2.run()

练习: 给数组添加方法，来统计数组中指定元素的个数

    Array.prototype.ytCount = function(item){
        num = 0
        for(i in this){
            item1 = this[i]
            if(item1 == item){
                num++
            }
        }
        return num
    }
    console.log([1, 2, 4, 3, 5, 2, 1, 2].ytCount(1))

练习1: 声明一个创建学生的构造方法，有属性姓名、年龄、成绩、学号，要求创建学生对象的时候姓名必须赋值，年龄可以赋值也可以不赋值，成绩和学号不能赋值

    function Student(name, age=0){
        this.name = name
        this.age = age
        this.score = 0
        this.studyId = '001'
    }
    
    stu1 = new Student('小明')
    console.log(stu1)

练习2：给String添加方法，统计字符串中字母字符的个数

    str1 = new String('abc')
    console.log(str1)
    String.prototype.letterCount = function(){
        num = 0
        i = 0
        while(i<this.length){
            ch = this[i]
            console.log('++:',ch)
            if((ch>='a' && ch<='z')||(ch>='A' && ch<='Z')){
                console.log('====',ch,'=====')
                num++
            }
            i++
        }
        return num
    }
    console.log('A23adb33'.letterCount())

系统的对象和类

document对象
window对象
Element类型的对象
Date类型的对象
....

    //创建当前时间对象
    date1 = new Date()
    console.log(date1)
    //年
    year = date1.getFullYear()
    //月 - 从0开始的
    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)

DOM操作

DOM(文档对象模型: document object mode)

1)document对象: 指的是指向整个网页内容的一个对象
2)节点: Element类型对象,指向的是网页中的标签

获取节点

1)通过id获取节点: getElementById(id值) - 返回节点对象(实质就是指向指定标签的对象)

    p1Node = document.getElementById('p1')
    console.log(p1Node)
    //innerText是标签文本内容
    p1Node.innerText = 'hello js'

2)通过class获取节点: getElementsByClassName(class值) - 返回节点数组

    c1Nodes = document.getElementsByClassName('c1')
    c1Nodes[0].innerText = '百度一下'
    console.log(c1Nodes)
    //注意: 遍历的时候不要用for in
    for(i=0;i<c1Nodes.length;i++){
        c1Node = c1Nodes[i]
        //修改样式中的文字颜色
        c1Node.style.color = 'red'
    }

1. 通过标签名获取节点: getElementsByTagName(标签名)

    h1Nodes = document.getElementsByTagName('h1')
    console.log(h1Nodes)

1. 通过name属性值获取节点:getElementsByName(name值) （了解）

    nameNodes = document.getElementsByName('userName')
    console.log(nameNodes)

5）获取子节点
- 节点对象.children - 获取指定节点中所有的子节点

    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)

创建和添加节点

1)创建节点

    //document.createElement(标签名)
    //创建一个img标签
    imgNode = document.createElement('img')
    imgNode.src = 'img/luffy.jpg'

2)添加节点
- 节点1.appendChild(节点2) - 在节点1的最后添加子标签节点2
  bodyNode.appendChild(imgNode)
- 节点1.insertBefore(新的节点, 节点2) - 在节点1中的节点2的前面添加一个新的节点

    bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
    bodyNode.insertBefore(imgNode, c1Nodes[0])

注意：一个节点不管添加几次，只有最后一次添加有效(因为节点只有一个)

拷贝/复制节点
- 节点.cloneNode()

    newImgNode = imgNode.cloneNode()
    newImgNode.src = 'img/aaa.ico'
    div1Node.appendChild(newImgNode)

删除节点

    p1Node = document.getElementById('p1')
    //节点.remove()  - 删除指定的节点
    p1Node.remove()   
    
    //节点1.removeChild(节点2) - 删除节点1中的节点2
//  div1Node.removeChild(div1Node.lastElementChild)
//  div1Node.removeChild(div1Node.firstElementChild)

替换节点
- 节点1.replaceChild(新节点, 旧节点) - 用新节点替换节点1中的旧节点

    bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,423评论 6赞 491
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,147评论 2赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,019评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,443评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,535评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,798评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,941评论 3赞 407
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,704评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,152评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,494评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,629评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,295评论 4赞 329
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,901评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,742评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,978评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,333评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,499评论 2赞 348

js基础

变量的作用域

字符串

数组

字面量

DOM操作

推荐阅读更多精彩内容