2021年1月份学习总结——JS入门
2021年1月学习总结——JS入门
JSON
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换成任意语言中的对象，JSON在开发中主要用来数据的交互。
JSON -javaScript object Notation
JSON和js对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和js语法一致。
JSON分类
1.对象 { }
2.数组 [ ]
JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
将JSON字符串转换为JS对象，在JS中为提供一个工具类JSON，可以帮助我们将JS和JSON相互转换
JSON.parse();//将JSON字符串转换为对象
JSON.stringify();//将JS对象转换为JSON字符串
JSON在IE7及以下浏览器不支持，可以通过引入一个外部的JS文件来处理IE7以下浏览器的兼容性
eval();//可以用来执行一段字符串形式的JS代码，并将执行结果返回。
如果其中执行的字符串中含有{ }，它将会将{}当成代码块，在字符串前后加()则不会当成代码块执行。在开发中尽量不要使用，具有安全隐患。
BOM浏览器对象模型
BOM对象：
window 代表整个浏览器的窗口
Screen 代表用户的屏幕的信息，可以获取用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，也可以通过window对象来使用，也可以直接使用
Navigator
代表当前浏览器的信息，来识别不同的浏览器。由于历史原因，navigator对象中大部分属性都已经不能帮助我们识别浏览器了。
一般我们只会使用userAgent（包含有用来描述浏览器信息的内容的字符串）来判断浏览器的信息。在IE11中已经将微软和IE相关的标识都已经去除，基本不能通过userAgent来识别一个浏览器是否是IE。
可以通过ActiveXObject来判断IE浏览器的信息
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("火狐");
}else if(/chrome/i.test(ua)){
alert("chrome");
}else if(ActiveXObject in window){
alert("IE浏览器")
}
Location
代表当前浏览器的地址栏信息，通过该对象可以获取地址栏信息或者操作浏览器跳转页面。
直接打印则可以获取地址栏的信息（当前页面完整路径）
如果直接将location属性修改为一个完整的路径，或者相对路径。则我们页面会自动跳转到该路径，并且会生成相应的历史记录。
方法：
assign() 用来跳转到其他页面，作用和直接修改location一样
reload() 用于重新加载当前页面，如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
replace() 可以使用一个新的页面替换当前页面，调用完毕会跳转页面且不能回退
History
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，该操作只在当次访问有效。
length 可以获取当前访问的链接数量
back() 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
forward() 可以跳转下一个页面，作用和浏览器的前进按钮一样
go() 可以用来跳转到指定的页面，需要一个整数作为参数
1表示向前跳转一个页面
-1表示向后跳转一个页面
键盘事件
键盘事件一般都会绑定给一些可以获取到焦点的对象。
onkeydown 按键被按下。如果一直按着某个事件不松手，则事件一直在触发。当onkeydown连续出发时，第一次和第二次之间间隔会较长，其他都较紧促，这种设计避免误操作。
onkeyup 按键被松开
事件对象中还提供了altKey、ctrlKey、shiftKey用来判断alt、ctrl、shift是否被按下。
可以通过keyCode来获取按键的编码，判断哪个键被按下：
if(event.keyCode==89){
console.log("y按键按下");
}
定时调用
setInterval()定时调用
可以将一个函数，每隔一段时间执行一次
参数：
1.回调函数，该函数每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值：返回一个number类型的数据，这个数字用来作为定时器的唯一标识
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
可以接受任意参数，如果不是一个有效的标识，则无效果
clearInterval(timer);
定时器应用-切换动画
function move(obj,attr,target,speed,callback){
/* 参数：obj：要执行动画的对象
attr：要执行动画的样式,eg:left top right
target：执行动画的目标位置
speed：移动的速度（正数）
callback:回调函数，将会在动画执行完毕以后执行*/
/* 开启定时器之前取消上一个定时器*/
clearInterval(obj.timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj,attr));
// 判断speed的正负值
/* 如果从0到800移动，speed为正值
如果从800到0移动，speed为负值*/
if(current>target){
speed = -speed;
}
/* 开启定时器来执行动画效果 */
obj.timer = setInterval(function(){
//获取box1原来left值
var oldValue = parseInt(getStyle(obj,attr));
// 在旧值的基础上增加
var newValue = oldValue +speed;
// 将新值设置给box1
obj.style[attr] = newValue +"px";
// 停止执行动画
if(speed<0 && newValue <target || speed >0 && newValue>target){
newValue = target;
}
if(newValue == target){
clearInterval(obj.timer);
// 动画执行完毕，调用回调函数
callback && callback();
}
},30);
};
function getStyle(obj,name){
if(window.getComputedStyle){
// 正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
// IE8的方式，没有该方法
return obj.currentStyle[name];
}
}
JS实例——轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/* 设置外部div */
#outer{
background-color: #00FFFF;
width: 750px;
height: 750px;
margin: 20px auto;
padding: 0px;
/* 开启相对定位 */
position: relative;
overflow: hidden;
}
/* 设置ul */
#imgList{
/* 除去li符号 */
list-style: none;
/* width: 3600px; */
/* 开启绝对定位 */
position: absolute;
/* 设置偏移量 */
/* 没向左移动750px，切换到一张 */
}
/* 设置li */
#imgList li{
/* 设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 20px;
}
/* 设置导航按钮 */
#navDiv{
/* 开启定位 */
position: absolute;
/* 设置位置 */
bottom: 10px;
/* left: 250px; */
}
#navDiv a{
float: left;
width: 30px;
height: 30px;
background-color: #B22222;
margin:0 10px;
/* 设置透明 */
opacity: 0.8;
/* 兼容IE8透明 */
filter: alpha(opacity = 50);
}
/* 设置鼠标移入的效果 */
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="./tools.js"></script>
<script type="text/javascript">
window.onload = function(){
/* 设置imgList的宽度 */
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 750*imgArr.length + "px";
/* 设置导航按钮居中 */
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outer
var outer = document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2 +"px";
/* */
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor ="black";
/* 点击超链接切换到指定的图片 */
// 为所有超链接绑定单击函数
for (var i=0;i<allA.length;i++){
// 为每个超链接添加一个num属性
allA[i].num = i;
allA[i].onclick = function(){
// 关闭自动切换图片的定时器
clearInterval(timer);
// 获取点击超链接的索引
index =this.num;
// 切换图片
// imgList.style.left = -740*index+"px";
// 设置选中的a
setA();
move(imgList,"left",-730*index,50,function(){
// 动画执行完毕开启自动切换
autoChange();
});
};
}
// 自动切换图片
autoChange();
// 修改正在选中的a
function setA(){
// 判断当前索引是否式最后一张
if(index >= imgArr.length-1){
// 将index设置为0
index = 0;
// 将最后一张切换成第一张
imgList.style.left = 0;
}
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor = "";
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor = "red";
};
var timer;
// 创建一个函数用来开启自动开启切换图片
function autoChange(){
// 开启一个定时器,用来定时开启切换图片
var timer = setInterval(function(){
// 索引自增
index++;
// 判断index的值
index %= imgArr.length;
// 执行动画
move(imgList,"left",-730*index,50,function(){
// 修改导航按钮
setA();
});
},3000);
}
};
</script>
</head>
<body>
<!-- 创建外部的div作为容器 -->
<div id="outer">
<!-- 创建ul来放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
<li><img src="img/5.jpg" ></li>
<li><img src="img/1.jpg" ></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
上一篇： js的基础一
下一篇： 人工智能与律师抢饭碗 机器人能办案？