day25-Javascript-贰

day25-Javascript-2

一、js基础语法2

1.函数

• 1)函数的声明：function 函数名(形参列表){函数体}
• 2)函数的调用：和python一样
• 3)函数的参数：位置参数、参数默认值有效；关键字参数无效；
  • 不定长参数：声明的时候不需要形参，然后在函数体中通过arguments获取所有实参
• 4)匿名函数：function(形参列表){函数体}
• 5)自调用函数：(function(形参列表){函数体})()

2.对象

• 对象中主要包含对象属性和对象方法
• 1)创建对象：
  • a.通过声明对象字面量来创建对象：
    • 变量 = 对象字面量
    • 通过对象调用对象方法时，方法中的this指向当前对象，和python中self功能一样
  • b.通过不同的构造方法来创建不同的对象：
    • 变量 = new 构造函数()

3.prototype

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

二、DOM操作

1.DOM(Document Object Model，文档对象模型)

• js中有一个系统提供的对象叫document，指向整个网页的内容部分
• HTML中的每一个标签，在js中都是document下面的节点，类型是object

2.DOM操作

• 2.1-获取节点：指的是在js中获取html中的标签
  • 1)根据id获取标签对应的节点
    • document.getElementById(id值)：返回一个标签对象
  • 2)根据class值获取节点
    • document.getElementsByClassName(class属性值)：返回一个数组
  • 3)根据标签名获取节点
    • document.getElementsByTagName(标签名)：返回一个数组
  • 4)获取父节点
    • 子节点.parentElement()：返回一个节点
  • 5)获取子节点
    • 父节点.firstElementChild；获取第一个子节点
    • 父节点.lastElementChild；获取最后一个子节点
• 2.2-创建节点对象
  • document.createElement(标签名)；创建指定标签对应的节点
• 2.3-添加节点
  • 父标签.appendChild(新标签)；在指定的标签最后添加一个新的子标签
  • 父标签.insertBefore(新标签,标签2)；在父标签中标签2的前面插入新的标签
• 2.4-删除节点
  • 父节点.removeChild(子节点)；删除父节点中指定的子节点
  • 节点.remove()：删除指定节点
• 2.5-拷贝节点
  • 节点.cloneNode()；拷贝指定节点产生一个新的节点(新节点和原节点一样)，浅拷贝，不会复制子标签
  • 节点.cloneNode(true)；深拷贝(会复制子标签)
• 2.6-替换节点
  • innerText；双标签中的文本内容
  • innerHTML；双标签中的标签内容

三、BOM操作

1.BOM(Browser Object Model，浏览器对象模型)

• js中有一个默认的内置对象叫window用来表示浏览器
• 在js中声明的所有的全局变量都是绑定在window上的属性
• 1.1-window基本操作
  • 1)window.open(url)；返回一个新的窗口对象
  • 2)window.open(url,'_self')；在当前页面中刷新出新的窗口，默认值_blank
  • 3)window.open(url,'','width=,height=')
  • 4)窗口对象.close()；关闭指定的窗口
  • 5)窗口对象.moveTo(x坐标,y坐标)；移动窗口
  • 6)获取窗口的宽度和高度：
    • innerWidth/innerHeight；取浏览器内容可见部分的宽度和高度
    • outerWidth/outerHeight；取整个浏览器的宽度和高度

2.弹框

• window.alert(提示信息)；提示信息+确定按钮
• window.confirm(问题信息)；问题信息+确定按钮+取消按钮；返回值是true(确定)或false(取消)
• window.prompt(提示信息,输入框默认值)；提示信息+输入框+确定按钮+取消按钮；如果取消返回值是null，如果点确定，返回值是输入框输入的内容

3.定时操作

• window.setInterval(函数,时间)；每隔指定时间(毫秒)就调用一次指定的函数，返回一个定时器对象
• window.clearInterval(定时对象)；清除指定定时对象对应的定时任务
• window.setTimeout(函数,时间)；指定时间后就调用一次函数，返回一个定时对象
• window.clearTimeout(定时对象)；清除定时任务