Web前端 | JS-CSDN博客

本文链接：https://blog.csdn.net/weixin_44243926/article/details/102513799

函数

定义函数

function func1()
{
    console.log("hello")
    return "hello","hi"
}

调用函数

// func1()
//
// 打印函数id
// console.log(func1)
//
// 不能指定输出哪一个
// let result = func1()
// console.log(result)

匿名函数

let func2=function ()
{
    console.log("匿名函数")
}

// 变量名func2类型为function

console.log(typeof(func2))
//
function func3(pam)
{
    console.log(typeof(pam))
}
// func3(100)
// func3(func2)  function
// func3(function (){console.log("nhfakjf")})  匿名函数作为变量/function

内置函数

// console.log(isNaN(“hello”)) 是否非数字
//
// let a=1.5
// let re=parseInt(a)
// console.log(re,typeof(re)) 1/number
// let re2=parseFloat(a)
// console.log(re2,typeof(re2)) 1.5/number
//
// 延时函数和计时函数
// 延时函数
// function delay(){console.log("++")}
// setTimeout(delay,2000)
// setTimeout(function(){console.log("—")},2000) 延时2000后执行匿名函数
//
// let mydelay=setTimeout(function(){console.log("—")},2000)
// setTimeout(function(){clearTimeout(mydelay)},1000) 延时1000毫秒后,清除mydelay的延时效果
// 计时函数
// setInterval(function(){console.log("–")},1000) 每隔1000执行一次匿名函数
//
// let myinterval=setInterval(function(){console.log("–")},1000)
// setTimeout(function(){clearInterval(myinterval),5000})

Date函数
let time=new Date()
// Fri Oct 11 2019 10:19:32 GMT+0800 (中国标准时间)
// time.getFullYear() 2019 年
// time.getDay() 5 周五
// time.getDate() 11 11日
// time.getTime() 时间戳毫秒
new Date().getTime()

BOM

history：控制网页前进后退
location：href host name

DOM

获取文档对象

div1 = document.getElementById("")
div1.children
div1.children[0]
div1.firstElementChild
div1.parentElement
div1.nextElementSibling
div1.previousElementSibling

document.getElementsByTagName("")

document.getElementsByClassName("")

tag1 = <a href=""></a>

操作DOM对象内容

innerText 标签文字
获取 div1.children[0].innerText
更改 div1.children[0].innerText=""

innerHTML 标签及内文字

操作DOM对象的属性

DOM对象.属性名称
DOM对象[属性名称]
getAttribute(“属性名”)、setAttribute(“属性名”, “属性值”)、removeAttribute(“属性名”)

操作DOM对象样式

标签对象.style.样式名称
注意内部样式表和外部样式表中的样式获取需要使用到getComputedStyle(对象).width

tag1.style.color=“blue”
tag1.style.background-color=“red”

getComputedStyle(tag1).color

操作DOM节点

节点创建删除

创建元素节点
document.creatElement(“tag1”)

末尾追加方式插入节点
appendChild

在指定节点前插入新节点
document.insertBefore(new, tag1.parentElement)
document.body.appendChild(tag1)

删除指定节点
remove()

操作DOM对象事件

onclick
onmousedown
onmouseup
onmousemove
onmouseenter
onmouseleave
onmouseover
onload

onscroll
滚动条
window.scollY

onresize

几个例子

		<script type="text/javascript">
			
			// 找到html中的top元素
			let toTop = document.getElementsByClassName("top")[0]
			// console.log(toTop)
			
			// 设置window的滚动函数
			window.onscroll = function(e)
			{
				// console.log("滚动",window.scrollY)
			
				if(window.scrollY>500)
					{toTop.style.display="block"}
				else
					{toTop.style.display="none"}
			}
		</script>

在鼠标点击位置显示图片

		<script type="text/javascript">
			
			// 设置window的点击函数
			window.onclick=function(e){
				console.log(e.clientX,e.clientY)
				
				// 创建img元素<img>
				let qq=document.createElement("img")
				
				// 设置img的src属性
				qq.setAttribute("src","qq.png")
				
				// 设置img的大小
				let width = Math.random()*100+1
				qq.setAttribute("width",width)
				
				// 设置img的style
				qq.style.left=e.clientX-width/2+'px'
				qq.style.top=e.clientY-width/2+'px'
				
				
				// 添加到页面上
				document.body.appendChild(qq)
			}
			
		</script>

伸缩菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用js制作DOM交互之伸缩菜单</title>
		
		<style type="text/css">
			
			
			.navi{
				width: 90%;
				margin: 0 auto;
				background-color: whitesmoke;
				border: darkgray 1px solid;
			}
			
			.navi>div{
				width: 24%;
				display: inline-block;
				text-align: center;
				background-color: whitesmoke;
			}
			
			.navi>div:hover{
				background: darkgray;
				position: relative;
			}
			
			.navi>div>ul{
				position: absolute;
				list-style: none;
				display: none;
			}
			
			
		</style>
		
	</head>
	
	<body>
		
		<div class="navi">
			<div>
				<p>首页</p>
			</div>
			<div>
				<p>下载</p>
				<ul>
					<li>下载1</li>
					<li>下载2</li>
				</ul>
			</div>
			<div>
				<p>版本</p>
				<ul>
					<li>版本1</li>
					<li>版本2</li>
				</ul>
			</div>
			<div>
				<p>关于</p>
			</div>
		</div>
		
		
		<script type="text/javascript">
			
			// 找到document中的菜单及其分支列表
			let ps=document.getElementsByTagName("p")
			let uls=document.getElementsByTagName("ul")
			
			
			// 遍历每一个菜单
			for(let i=0;i<ps.length;i++)
			{
				// 设置该菜单的点击时间
				ps[i].onclick=function()
				{
					// 找到该菜单的分支列表
					let myul=this.nextElementSibling
					// 遍历所有的分支列表,对于当前菜单的分支列表设置点击事件,对于其他的分支列表设置其隐藏
					for(let j=0;j<uls.length;j++)
					{
						if(myul==uls[j])
						{
							if(getComputedStyle(myul).display=="none")
								{myul.style.display="block"}
							else{myul.style.display="none"}
						}
						else{uls[j].style.display="none"}
					}
				}
			}
			
		</script>
		
		
	</body>
</html>

页面点击计数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用DOM事件完成文档的点击计数</title>
	</head>
	<body>
		<span>0</span>
		<p></p>
		<span>开始</span>
		<p></p>
		<span>结束</span>
		
		<script type="text/javascript">
			let span=document.getElementsByTagName("span")
			console.log(span[0])
			
			// 设置'开始'的点击函数
			span[1].onclick=function(e){
				// 设置span[1]的点击不计入window的点击,即点击'开始'时不计数
				e.stopPropagation()
				
				// 设置window的点击函数
				window.onclick=function(){
					sum = parseInt(span[0].innerText)+1
					span[0].innerText=sum
				}
			}
			
			// 设置'结束'的点击函数
			span[2].onclick=function(){
				window.onclick=null
			}
			
		</script>
		
	</body>
</html>