满足低调之心基础十六

最新推荐文章于 2024-01-05 07:45:00 发布

骑着哈哥去旅行

最新推荐文章于 2024-01-05 07:45:00 发布

阅读量222

点赞数

分类专栏：基础文章标签： js

本文链接：https://blog.csdn.net/hpl980342791/article/details/113250838

版权

基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一些css基础内容补充👇👇👇

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		.left{
			float: left;
		}
		.right{
			float: right;
		}
		.header{
			height: 60px;
			background-color: #A3CFF3;
			min-width: 1100px;

		}
        .center_one{
        	position: absolute;
        	top: 61px;
        	left: 0;
        	bottom: 0;
        	width: 350px;
        	background-color: #C3BFBF;
        }
        .center_two{
        	position: absolute;
        	top: 61px;
        	left: 351px;
        	right: 0;
        	bottom: 0;
        	overflow: auto;
        	min-width: 749px;
        	z-index: 9;
        }
        .header_1{
        	width: 350px;
        	height: 60px;
        	background-color: #318FD9;
        	color: #FFFFFF;
        	line-height: 60px;
        	text-align: center;
        	font-family: STXingkai;
        	font-size: 40px;
        }
        .header_2{
        	/*background-color: #D0FF00;*/
        	margin-right: 260px;
        	height: 60px;
        	padding-right: 10px;
        	padding-left: 10px;
        	position: relative;
        }
        .header_2:hover{
        	background-color: #75B1E2;
        }
        .header_2 img{
             width: 60px;
             height: 60px;
             border-radius: 50%;
        }
        .header_3{
        	position: absolute;
        	background-color: #FFFFFF;
        	top: 60px;
        	left: -40px;
        	z-index: 10;
        	width: 150px;
        	height: 260px;
        	display: none;
        }
        .header_3 a{
        	text-align: center;
            font-family: STKaiti;
            font-size: 20px;
            color: #000000;
            text-decoration: none;
            display: block;
        }
        .header_3 a p:hover{
        	background-color: #A3CFF3;
        	height: 50px;
        	line-height: 50px;
        	font-size: 23px;
        	color: #CE0000;
        	font-weight: 600;

        }
        .header_2:hover .header_3{
        	display: block;
        }
        .header_4{
            text-align: center;
            width: 80px;
            height: 60px;
        }
        .header_4 i{
        	margin-top: 15px;
        }
        .header_4 span{
        	background-color: #C50F00;
        	display: inline-block;
            padding: 0 4px 0 4px;
            border-radius: 50%;
            position: fixed;
            top: 14px;
            font-size: 10px;
            color: #FFFFFF;
        }
        .center_one p{
        	font-size: 50px;
        	text-align: center;
        	font-family: STXingkai;
        }
	</style>
</head>
<body style="margin: 0;">
	<div class="header">
		<div class="header_1 left">hepengli</div>

		<div class="header_2 right">
			<a href="http://www.blog.csdn.net/hpl980342791">
				<img src="111.png">
			</a>

			<div class="header_3">
				<a href="#"><p>我的资料</p></a>
				<a href="#"><p>账号</p></a>
				<a href="#"><p>设置</p></a>
				<a href="#"><p>退出</p></a>
				<a href="#"><p>注销</p></a>
			</div>
		</div>
		<div  class="header_4 right">
			<i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i>
			<span>3</span>
		</div>
		<div class="header_4 right">
			<i class="fa fa-bell-o fa-2x" aria-hidden="true"></i>
			
		</div>
		
	</div>
	<div class="center_one">
	    <p>hello,酷狗！</p>
    </div>
	<div class="center_two">
		<div style="background-color: #F5FB7F;">
			<p style="margin: 0;">When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p>When they played I'd sing along</p>
			<p>When I was young</p><p>I'd listen to the radio</p><p>Waiting for my favorite songs</p><p style="margin: 0;">When they played I'd sing along</p>
		</div>
	</div>
	</div>
</body>
</html>

注：其中小铃铛和未读消息图像是由Font Awesome网导入的内容(若有不太了解的朋友，请猛戳这里，进行教学和下载使用！)

13,定义函数

前面已说过普通函数的定义方法，下面还有两种方法定义函数：

①匿名函数

setInterval(function(){
    console.log("hepengli");
},3000)

②自执行函数

(function(arg){
    console.log(arg);
})(1)

14，js序列化和转义

①序列化

JSON.stringify()--------->将对象转化为字符串

JSON.parse()---------->将字符串转化为对象类型

a = [1,2,3,4,5,6,7,8,9]
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
aa = JSON.stringify(a)
"[1,2,3,4,5,6,7,8,9]"
new_a = JSON.parse(aa)
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

②转义

decodeURI( )--------->URl中未转义的字符
decodeURIComponent( )---------->URI组件中的未转义字符
encodeURI( )---------->URI中的转义字符
encodeURIComponent( )---------->转义URI组件中的字符
escape( )---------->对字符串转义
unescape( )---------->给转义字符串解码
URIError--------->由URl的编码和解码方法抛出

url = "https://www.sogou.com/web?query=哈士奇"
"https://www.sogou.com/web?query=哈士奇"
new_url = encodeURI(url)
"https://www.sogou.com/web?query=%E5%93%88%E5%A3%AB%E5%A5%87"
new_url2 = decodeURI(new_url)
"https://www.sogou.com/web?query=哈士奇"
new_url3 = encodeURIComponent(url)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E5%93%88%E5%A3%AB%E5%A5%87"

15,eval

js中的eval()函数既可以计算某个字符串，也可以执行其中的js代码。

a = eval(2+3*5)
document.write(a);

17

eval("x=10;y=20;document.write(x*y)")

200

16,Date

new Date()
Thu Jan 28 2021 09:28:37 GMT+0800 (中国标准时间)

更多时间操作猛戳这里！

17，作用域

①在js中是以函数作为作用域

function func(){
    if(1==1){
        var name = "hepengli";
    }
    console.log(name);
}
func();
hepengli

②函数的作用域在未被调用之前，就已经创建

③函数的作用域存在作用域链，并且在被调用之前就已创建

xo = "hepengli"
function func(){
    var xo = "liujie";
    function inner(){
        var xo = "liubangguo";
        console.log(xo);
    }
    inner();
}
func();


liubangguo

xo = "hepengli"
function func(){
    var xo = "liujie";
    function inner(){
        console.log(xo);
    }
   return inner;
}
var ret = func();
ret();

liujie

xo = "hepengli"
function func(){
    var xo = "liujie";
    function inner(){
        console.log(xo);
    }
   var xo = "laowang";
   return inner;
}
var ret = func();
ret();

laowang

④函数内局部变量提前声明

Function func(){
    console.log(name);
    name = "hepengli";
}
func();

Uncaught SyntaxError: Unexpected identifier


Function func(){
    console.log(name);
}
func();

Uncaught SyntaxError: Unexpected identifier

因为程序是从上到下一行行执行的，并非跳着执行，所以上面两段代码都未找到变量name，故报错！

18，js面向对象

function Foo(n){
    this.name = n;
    this.sayName = function(){
        console.log(this.name);
    }
}
var obj = new Foo("hepengli");
obj.name;
obj.sayName();

hepengli

其中的this代指对象；创建对象时，new 函数（）；

function Foo(n){
    this.name = n;
}
// Foo原型
Foo.prototype = {
    "sayName":function(){
        console.log(this.name);
    }
}
obj = new Foo("hepengli");
obj.sayName();

hepengli

19，续DOM

文本内容操作👇

innerText--------->仅文本

innerHTML--------->全内容

a = document.getElementById("i1");
<div id="i1">hepengli</div>
b = a.innerText
"hepengli"
a.innerText = "<a href='https:www.blog.csdn.net/hpl'>laowang</a>";
"<a href='https:www.blog.csdn.net/hpl'>laowang</a>"
a.innerHTML = "<a href='https:www.blog.csdn.net/hpl'>laowang</a>";
"<a href='https:www.blog.csdn.net/hpl'>laowang</a>"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		.c1{
			width: 300px;
			height: 40px;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<input class="c1" type="text" placeholder="请输入账号">
	<input class="c1" type="password" placeholder="请输入密码">
	<br /><br />
	<input class="c1" id="c2" type="text" onfocus="Foucs();" onblur="Blur();" value="请输入账号">
	<input class="c1" id="c3" type="text" onfocus="Foucs1();" onblur="Blur1();" value="请输入密码">
    
    <script type="text/javascript">
    	function Foucs(){
    		var tag = document.getElementById("c2");
    		var val = tag.value;
    		if(val == "请输入账号"){
    			tag.value = "";
    		}
    	}
    	function Blur(){
    		var tag = document.getElementById("c2");
    		var val = tag.value;
    		if(val == ""){
    			tag.value = "请输入账号";
    		}
    	}

    	function Foucs1(){
    		var tag = document.getElementById("c3");
    		var val = tag.value;
    		if(val == "请输入密码"){
    			tag.value = "";
    		}
    	}
    	function Blur1(){
    		var tag = document.getElementById("c3");
    		var val = tag.value;
    		if(val == ""){
    			tag.value = "请输入密码";
    		}
    	}
    </script>
</body>
</html>

样式操作👇

a = document.getElementById("i1");
<div id="i1">hepengli</div>
a.style.fontSize = "25px";
"25px"
a.style.color = "#FF1400";
"#FF1400"
a.style.fontFamily = "STXingkai";
"STXingkai"

创建标签，并添加到HTML中👇

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1px" cellpadding="10px" cellspacing="0">
		<thead>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody id="i1">
			<tr>
				<td>1001</td>
				<td>老王</td>
				<td>20</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>老徐</td>
				<td>21</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>小胖子</td>
				<td>19</td>
			</tr>
		</tbody>
	</table><br />
	<input type="button" onclick="Add1();" value="+">
	<input type="button" onclick="Add2();" value="+">
	<script type="text/javascript">
		function Add1() {
			var tag = "<tr><td></td><td></td><td></td></tr>";
			document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);
		}
        function Add2() {
			var tag = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            tag.appendChild(td1);
            tag.appendChild(td2);
            tag.appendChild(td3);
			document.getElementById("i1").appendChild(tag);
		}
	</script>
</body>
</html>

里面包含了两种添加方法

提交表单👇(任何标签通过dom都可以提交表单)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <form id="a1" action="https://www.blog.csdn.net/hpl980342791">
    	<p><input type="text" name=""></p>
	    <p><input type="password" name=""></p>
	    <p><input type="submit" name="" value="提交"></p>
	    <a onclick="subForm();">提交</a>
    </form>
    <script type="text/javascript">
    	function subForm(){
    		document.getElementById("a1").submit();
    	}
    </script>
</body>
</html>

其他操作👇

console.log 输出框
alert 弹出框
confirm 确认框

// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载(刷新)

// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器

//定时器一直执行
var obj = setInterval(function(){
    console.log('hello!');
    clearInterval(obj);
},3000);

//定时器只执行一次
setTimeout(function(){
    console.log('word！');
    }，3000);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="i1">helloword!</div>
	<input type="button" value="删除" onclick="DeleteEle();">
	<script type="text/javascript">
		// var v = confirm("Do you want to delete it?")
		// console.log(v)
        function DeleteEle(){
        	document.getElementById("i1").innerText = "已删除";
        setTimeout(function(){
            document.getElementById("i1").innerText = "";
        },5000);
        }
	</script>
</body>
</html>

事件👇

a little practice

①写一个行为，样式，结构相分离的页面？

所谓的“行为”------->js，“样式”------->css，结构------->html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#i1{
			color: #44AC03;
			font-size: 40px;
			font-weight: 600;
			font-family: STXingkai;
		}
	</style>
</head>
<body>
	<div id="i1">hepengli</div>

	<script type="text/javascript">
		var mydiv = document.getElementById("i1");
        mydiv.onclick = function(){
        	console.log('已分离');
        }
	</script>
</body>
</html>

②

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table  border="1px" cellspacing="0" width="300px">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
	</table>
	<script type="text/javascript">
		var myTrs = document.getElementsByTagName("tr");
		var len = myTrs.length;
		for(var i=0;i<len;i++){
			myTrs[i].onmouseover = function(){
				this.style.backgroundColor = "#FF1400";
			}
			myTrs[i].onmouseout = function(){
				this.style.backgroundColor = '';
			}
		}
	</script>
</body>
</html>

当然这个用js的hover也能实现。

更多的事件

如何给一个onclick绑定两个不同的事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#i1{
			width: 100px;
			height: 30px;
			background-color: #B0F584;
		}
	</style>
</head>
<body>
    <div id="i1">hepengli</div>
    <script type="text/javascript">
    	var mydiv = document.getElementById("i1");
    	mydiv.addEventListener('click',function(){console.log('hello!')},false)
    	mydiv.addEventListener('click',function(){console.log('word!')},false)
    </script>
</body>
</html>

捕捉与冒泡

事件分为捕捉和冒泡addEventListener( , ,true/false);当第三个参数为true时表示捕捉，为false或者不填表示冒泡。

红色的箭头表示捕捉，绿色的箭头表示冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#i1{
			background-color: #000000;
			width: 150px;
			height: 150px;
		}
		#i2{
			background-color: #F5FB33;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="i1">
		<div id="i2"></div>
	</div>
	<script type="text/javascript">
		var myi1 = document.getElementById("i1");
		var myi2 = document.getElementById("i2");
		myi1.addEventListener("click",function(){console.log('i1')},false);
		myi2.addEventListener("click",function(){console.log('i2')},false);
	</script>
</body>
</html>

假如把两个false改成true。

myi1.addEventListener("click",function(){console.log('i1')},true);
myi2.addEventListener("click",function(){console.log('i2')},true);

这就是捕捉和冒泡的区别

20，An interesting one

function t1(age){
    console.log(age);
    var age = 27;
    console.log(age);
    function age(){}
    console.log(age);
}
t1(3);

ƒ age(){}
27
27

这个真的耐人寻味！！！

好了，本周的学习内容就到此为止，望各位看客大佬发现有不足或错误能留言相告，臣不胜感激！！！

骑着哈哥去旅行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录