美文网首页
Day22——js

Day22——js

作者: Devil灬 | 来源:发表于2019-02-11 20:32 被阅读0次

一、函数

语法:

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

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

局部变量:通过var关键字声明在函数里面的变量


二、字符串

1. 运算
  • 加法:做字符串拼接操作(支持字符串和其他数据相加)
  • 比较(>, <, >=, <=,==, ===, !=, !==)
2. 长度
  • 字符串.length
3. 方法
  • 创建对象
    对象 = new String(字符串)
语法 功能
对象.big() 产生一个big标签,内容为字符串的值
字符串.charAt(下标) 获取指定下标对应的字符; 相当于:字符串[下标]
字符串.charCodeAt(下标) 获取指定下标对应的字符的unicode编码
字符串.concat(数据1,数据2,...) 将字符串和多个数据依次连接在在一起产生一个新的字符串(相当于+)
字符串.repeat(数字) 指定的字符串重复出现指定次数产生一个新的字符串(相当于*)
字符串1.endsWith(字符串2) 判断字符串1是否以字符串2结尾
字符串1.indexOf(字符串2) 获取字符串2在字符串1中第一次出现的位置
字符串1.lastIndexOf(字符串2) 获取字符串2在字符串1中最后一次出现的位置
字符串.match(正则表达式) 相当于python中re模块的match; 匹配成功返回(js中正则写在两个//之间)
字符串1.replace(正则表达式,字符串2) 将字符串1中第一个满足正则表达式的子串替换成字符串2
字符串.slice(开始下标, 结束下标) 从开始下标获取到结束下标前为止,步长是1
字符串1.split(字符串2) 将字符串1按照字符串2进行切割,返回一个数组

三、数组

1. 基本操作
  • 加法运算:两个数组相加实质是将数组转换成字符串然后拼接
  • 比较运算:==、===判断相等是判断地址是否相等,相等于python中的is
  • 数组长度:length属性
2. 增删改查
  • 增:
    数组.push(元素) —— 在指定的数组的最后添加一个元素
  • 删:
    ①数组.pop() —— 删除最后一个元素
    ②数组.splice(下标,个数) —— 从指定下标开始删除指定个数的元素
  • 查:
    ①数组[下标] —— 获取下标对应的元素(负数的下标没有意义)
    ②数组.slice(开始下标,结束下标) —— 返回一个新的数组(下标可为负数,[))
    ③for in循环
for(index in fruits){
        console.log(fruits[index])
    }
  • 改:
    数组[下标] = 新值 —— 修改指定下标对应的值
3. 相关方法
语法 功能
数组.reverse() 倒序
数组.sort() 元素从小到大排序
数组.join(字符串) 将指定字符串插入数组每个元素之间产生一个新字符串

四、对象

注:属性名加不加括号没有区别

1. 增删查改
  • 增:
    (属性不存在时)
    对象.属性 = 值
    对象['属性名'] = 值
  • 删:
  • 查:
    对象.属性
    对象['属性名']
  • 改:
    (属性存在时)
    对象.属性 = 值
    对象['属性名'] = 值
2. 构造方法

语法:

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

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

3. 创建对象

对象 = new 构造方法()


五、Date

//创建当前时间对象
date1 = new Date()
//年
year = date1.getFullYear()
//月 - 从0开始的
month = date1.getMonth()
//日
day = date1.getDate()
//时
hours = date1.getHours()
//分
min = date1.getMinutes()
//秒
seconds = date1.getSeconds()
//星期
week = date1.getDay()

六、DOM操作

1. 文档对象模型:document object model
  • document对象:指的是指向整个网页内容的一个对象
  • 节点:Element类型对象,指向的是网页中的标签
2. 创建和添加节点
  • 创建节点:
    document.createElement(标签名)
  • 添加节点:
    节点1.appendChild(节点2) —— 在节点1的最后添加子标签节点2
    节点1.insertBefore(新的节点, 节点2) —— 在节点1中的节点2的前面添加一个新的节点
3. 删除节点

节点.remove() —— 删除指定的节点
节点1.removeChild(节点2) —— 删除节点1中的节点2

4. 获取节点
语法 功能
document.getElementById('id') 通过id返回节点对象
document.getElementsByClassName('class') 通过class返回节点数组
document.getElementsByTagName(标签名) 通过标签名获取节点
document.getElementsByName('name') 通过name属性值获取节点
节点对象.children 获取指定节点中所有子节点
节点对象.firstElementChild 获取第一个子节点
节点对象.lastElementChild 获取最后一个子节点
节点对象.parentElement 获取父节点
5. 替换节点

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

6. 拷贝/复制节点

节点.cloneNode()

7. 节点属性

  • (属性不存在时)
    ①. 节点.属性 = '新值'
    ②. 节点.setAttribute('属性名', '新值')

  • 节点.removeAttribute('属性名')

  • ①. 节点.属性
    (注:inner相关属性有效
    innerHTML —— 标签内容(包含双标签内容中的其他标签和文件)
    innerText —— 标签中的文本内容)
    ②. 节点.getAttributse(属性名)

  • (属性存在时)
    ①. 节点.属性 = '新值'
    ②. 节点.setAttribute('属性名', '新值')

七、BOM操作

1. 浏览器对象模型:browser object model
  • js提供了一个全局的对象window, 指向的是浏览器
  • js中声明的所有的全局变量其实都是添加给window的属性
2. 基本操作
  • 打开新的窗口 —— open
    (会返回被打开的窗口对应的对象)
语法 功能
open() 空白窗口
open(url) 在新窗口打开指定网页
open(url,'','width=1,height=1') 打开新的窗口并且设置窗口的宽度和高度
  • 移动窗口 —— moveTo
    语法:window窗口.moveTo(x,y)
  • 设置窗口的大小 —— resizeTo
    语法:window窗口.resizeTo(w,h)
  • 获取浏览器宽高
    inner是内容的宽度和高度(innerWidth,innerHeight)
    outer浏览器的宽度和高度(outerWidth,outerHeight)
3. 弹框
语法 显示 返回值
alert(提示信息) 提示信息、确定按钮
confirm(提示信息) 提示信息、确定和取消按钮 确定 ->true;取消 ->false
prompt(提示信息,输入框中默认值) 提示信息、输入框、确定和取消按钮 确定 ->输入框中的内容;取消 ->null

八、定时器

1. 开启定时
语法 功能
setInterval(函数,时间) 每隔指定时间调用一次指定函数;返回是定时器对象
setTimeout(函数,时间) 隔指定时间后调用一次指定函数(函数只会调用一次,相当于定时炸弹)

注:函数 —— 可以是函数名,也可以是匿名函数
  时间 —— 单位是毫秒

2. 停止定时
语法 功能
clearInterval(定时器对象) 停止指定定时器
clearTimeout(定时器对象) 停止指定定时器

九、事件绑定

1. 事件三要素:事件源、事件、事件驱动程序
2. 节点绑定事件
  • 语法:节点.addEventListener(事件名, 事件驱动程序)
  • 事件名:去掉事件名前面的on
  • this是事件源, evt是事件对象
3. 事件冒泡和事件

事件.stopPropagation()

相关文章

网友评论

      本文标题:Day22——js

      本文链接:https://www.haomeiwen.com/subject/ixxceqtx.html