前端（九）js介绍(2)

js介绍(2)

文章目录

js介绍(2)
一、函数
- 1.1函数的两种形式
- 1.2函数的作用域
- 1.3声明与提升
二、bom操作
三、dom操作

一、函数

1.1函数的两种形式

//有参函数
//js中的函数只能返回一个值，如果要返回多个需要放在数组或对象中
function func(a,b){
	return a+b
}
func(1,2)

//匿名函数
(function(a,b){return a+b})(1,2)

//arguments参数
//arguments存放传入的参数，arguments[0]为第一个参数以此类推，arguments.length表示传入的参数个数
(function(a,b){console.log(arguments[0],arguments[1],arguments.length)})(1,2)

1.2函数的作用域

js中变量的查询和python一样，先从局部找，找不到则会取上一层找以此类推直到全局为止。另外函数的作用域在函数定义阶段就已经确定了。

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret(); 
<<<"BeiJing"

另外如果函数内不使用var直接定义变量，变量会被视为全局变量。

a=1
function f1(){a=100}
f1()
console.log(a)
<<<100

let定义的变量作用域会被限定在{}内。

if(true){let a=10}
console.log(a)
<<<报找不到变量a的错误

另外js中和python一样由闭包函数

var a=[]
for(var i=0;i<5;i++){
	function outter(x){
		function inner(){
			console.log(x)
		}
		return inner
	}
	a.push(outter(i))
}
a.forEach(function(val){val()})
<<<0
<<<1
<<<2
<<<3
<<<4

上面的闭包函数中inner函数的变量x作用域在函数定义阶段就已经确定为outter函数的形参x，而由于inner函数中引用了变量x，因此原本在outter函数运行结束就应该释放的局部变量x会保持下来，这样闭包函数就完成了将外部参数保存至内部函数的功能。

1.3声明与提升

在js中代码是从上往下一次执行的，并且js中的变量的声明会被放到作用域的顶部位置，而函数的定义与声明都会放到作用域的顶部位置。

console.log(e)
var e=11;
console.log(e)
<<<undefined
<<<11

上方代码中var e=11;包含了声明和赋值两部操作，我们可以把这段代码拆为var e;e=11;其中var e;是变量声明会被放到顶部，所有上方的代码可以等价于

var e;
console.log(e)
e=11;
console.log(e)

同样的下方代码中，函数func的定义阶段存在对变量e的赋值，因此变量e为局部变量。而var e=1;中的变量声明部分会被提升到func局部作用域的顶部，因此第一个结果为undefined，第二个结果为1。

var e=99;
function func(){
	console.log(e)
	var e=1;
	console.log(e)
}
func()
<<<undefined
<<<1

函数的定义和声明都会被提升到顶部

func()
function func(){
	console.log(111)
}
func()
<<<111
<<<111

但是以下形式的函数定义应按照变量的规则来看待

console.log(func)
var func=function(){
	console.log(111)
}
console.log(func)
<<<undefined
<<<ƒ (){console.log(111)}

另外如果变量和函数名重复时，函数提升的优先级是高于变量提升的

console.log(f)
function f(){
	console.log(111)
}
var f=10;
console.log(f)
<<<ƒ f(){console.log(111)}
<<<10

二、bom操作

BOM(Browser Object Model)浏览器对象模型，主要操作的是窗口、滚动条、弹窗等一些与浏览器直接相关的功能。下面的图片是bom与dom操作的关系。
在这里插入图片描述

//bom操作中以window开头，但是window可以省略

//location相关
//跳转到某页面
window.location.href="url"
//获取当前页面url
location.href
//重新加载页面
location.reload()

//history相关
//后退一页
history.back()
//前进一页
history.forward()
//刷新
history.go(0)

//navigator相关
//获取Web浏览器全称
navigator.appName
//获取客户端绝大部分信息
navigator.userAgent
//获取浏览器运行所在的操作系统信息
navigator.platform

//screen相关
//获取可用屏幕宽度
screen.availWidth 
//获取可用屏幕高度
screen.availHeight

//弹窗相关
//弹窗
alert(1)
//确认型弹窗，确定返回true，取消返回false，但是兼容性不好
var x=confirm("你确定要这么做吗？")
console.log(x)
//输入型弹窗，兼容性不好
var username=prompt("用户名：")
console.log(username);

//打开页面，_blank表示在新的浏览器页面打开，self(默认)表示当前浏览器页面打开
//close表示关闭页面
var t=window.open("http://www.baidu.com","_blank", "width=400, height=400")
t.close()

//浏览器窗口内部高度
innerHeight
//浏览器窗口内部宽度
innerWidth

//定时器相关
//执行一次的定时器，3000单位是ms
var s1=setTimeout(function(){alert(1)},3000)
//清除定时器
clearTimeout(s1)
//循环执行的定时器，3000单位是ms
var s2=setInterval(function(){alert(1)},3000)
//清除定时器
clearInterval(s2)

三、dom操作

Dom(Document Object Model)，操作的是网页的文本内容。

//根据id获取标签，返回标签，常用
document.getElementById()
//根据类名获取标签，返回数组
document.getElementsByClassName()
//根据标签名获取标签，返回数组
document.getElementsByTagName()
//根据属性名获取标签，返回数组
document.getElementsByName()

childNodes：获取所有的子节点，标签+文本
children：获取所有元素子节点，不包含文本
parentNode：获取父标签
previousSibling：获取上一个相邻标签，标签+文本
previousElementSibling：获取上一个相邻标签，不包含文本
nextSibling：获取下一个相邻标签，标签+文本
nextElementSibling：获取下一个相邻标签，不包含文本
firstChild：获取第一个子标签，标签+文本
firstElementChild：获取第一个子标签，不包含文本
lastChild：获取最后一个子标签，标签+文本
lastElementChild：获取最后一个子标签，不包含文本

使用方法：

//获取div标签的最后一个子标签
var s1=document.getElementsByTagName('div')[0].lastChild
console.log(s1)

//创建标签
var s1 = document.createElement('div');
//在末尾插入标签
var s2=document.getElementsByTagName('div')[0].lastElementChild
s2.appendChild(s1)
//在某个标签前插入标签
var s1 = document.createElement('div');
var s2=document.getElementsByTagName('div')[0]
var s3=document.getElementsByTagName('div')[0].lastElementChild
s2.insertBefore(s1,s3)
//删除标签
var s2=document.getElementsByTagName('div')[0]
var s1=document.getElementsByTagName('div')[0].lastElementChild
s2.removeChild(s1)；
//替换标签
var s2=document.getElementsByTagName('div')[0]
var s1 = document.createElement('div');
var s3=document.getElementsByTagName('div')[0].lastElementChild
s2.replaceChild(s1, s3);

var s1 = document.getElementById("d1")
//获取文本内容，包括子标签内的文本，返回字符串
s1.innerText
//获取标签，返回字符串
s1.innerHTML
//添加文本，会覆盖原本内容
s1.innerText='111'
//添加标签，会覆盖原本内容
s1.innerHTML='<p>111</p>'

var s1 = document.getElementById("d1");
//设置标签属性
s1.setAttribute("age","18")
//获取标签属性
s1.getAttribute("age")
//删除标签属性
s1.removeAttribute("age")
//部分标签自带的属性可以直接赋值，例如img标签的src，input、select、textarea的value
var s1 = document.getElementsByTagName('img')[0];
s1.src=''
//获取标签值
var s1 = document.getElementsByTagName('input')[0];
s1.value

//class操作
var x=document.getElementById('div1')
//增加标签类
x.classList.add('col1')
//移除标签类
x.classList.remove('col1')
//判断标签是否包含类
x.classList.contains('col1')
//标签有类则删除，无类则添加
x.classList.toggle('col1')
//直接指定标签的css样式，但是css属性需要改为驼峰体
x.style.backgroundColor="red"
x.style.margin=...
x.style.marginTop=...

事件：

onclick：点击触发
ondblclick：双击触发
onfocus：聚焦触发(如鼠标点击输入框以后)
onblur：失焦触发
onchange：内容改变触发(如form表单内容变更时)
onkeydown：键盘按键按下时触发
onkeypress：键盘按键按下并松开以后触发
onkeyup：键盘按键松开时触发
onload：页面或图片完成加载后触发
onmousedown：鼠标按下时触发
onmousemove：鼠标移动时触发
onmouseout：鼠标移开某标签时触发
onmouseover：鼠标移到某标签触发
onselect：文本框中文本被选中时触发
onsubmit：确认按钮被点击时触发，form使用

使用方法：

//方式一
<div id="div1" onclick="change(this);">点我</div>
<script>
  function change(this) {
    this.style.backgroundColor="green";
  }
</script>

//方式二，常用
<div id="div1">点我</div>
<script>
    var s1 = document.getElementById('div1');
    s1.onclick = function() {
        this.style.backgroundColor = 'red';
    }
</script>