JavaScript（5）

最新推荐文章于 2024-09-18 15:54:57 发布

玉解

最新推荐文章于 2024-09-18 15:54:57 发布

阅读量142

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_56970433/article/details/124827928

版权

常用事件

BOM

Navigator（window对象属性）

常用事件

鼠标事件

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="UTF-8">  
        <title></title>  
<style type="text/css">  
    #box1{  
width: 100px;  
height: 100px;  
background-color: red;  
}  
    </style>  
<script type="text/javascript">  
    window.onload = function(){  
      //获取id为box1的div  
    var box1 = document.getElementById("box1");  
    //为box1绑定一个鼠标滚轮滚动的事件  
    /*  
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，  
				 * 	但是火狐不支持该属性  
				 *   
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件  
				 * 	注意该事件需要通过addEventListener()函数来绑定  
				 */  
  box1.onmousewheel = function(event){  
    event = event || window.event;  
   //event.wheelDelta 可以获取鼠标滚轮滚动的方向  
        //向上滚 120   向下滚 -120  
        //wheelDelta这个值我们不看大小，只看正负  
 //alert(event.wheelDelta);  
   //wheelDelta这个属性火狐中不支持  
        //在火狐中使用event.detail来获取滚动的方向  
        //向上滚 -3  向下滚 3  
        //alert(event.detail);  
  /*  
					 * 当鼠标滚轮向下滚动时，box1变长  
					 * 	当滚轮向上滚动时，box1变短  
					 */  
        //判断鼠标滚轮滚动的方向  
        if(event.wheelDelta > 0 || event.detail < 0){  
            //向上滚，box1变短  
            box1.style.height = box1.clientHeight - 10 + "px";  
  
        }else{  
            //向下滚，box1变长  
            box1.style.height = box1.clientHeight + 10 + "px";  
        }  
  
        /*  
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false  
					 * 需要使用event来取消默认行为event.preventDefault();  
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错  
					 */  
        event.preventDefault && event.preventDefault();  
   /*  
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，  
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为  
					 */  
        return false;  
 };  
  
    //为火狐绑定滚轮事件  
    bind(box1,"DOMMouseScroll",box1.onmousewheel);  
};  
function bind(obj , eventStr , callback){  
    if(obj.addEventListener){  
        //大部分浏览器兼容的方式  
        obj.addEventListener(eventStr , callback , false);  
    }else{  
        /*  
					 * this是谁由调用方式决定  
					 * callback.call(obj)  
					 */  
        //IE8及以下  
        obj.attachEvent("on"+eventStr , function(){  
            //在匿名函数中调用回调函数  
            callback.call(obj);  
        });  
    }  
}  
</script>  
</head>  
<body style="height: 2000px;">  
    <div id="box1"></div>  
</body>  
</html>

键盘事件：

onkeydown：按键被按下，对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
onkeyup：按键被松开，键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
keyCode：可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下；除了keyCode，事件对象中还提供了几个属性
altKey，ctrlKey，shiftKey：这个三个用来判断alt ctrl 和 shift是否被按下；如果按下则返回true，否则返回false
在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消了默认行为，则输入的内容不在出现文本框中。

window.onload = function(){
				document.onkeydown = function(event){
					event = event || window.event;
					//判断a和ctrl是否被同时按下
					if(event.keyCode === 65 && event.ctrlKey){
						console.log("a和ctrl同时被按下");
					}
					
				};
//				document.onkeyup = function(){
//					console.log("按键松开了");
//				};

                var input = document.getElementsByTagName("input")[0];
                input.onkeydown = function(event){
                	event = event || window.event;
                	//判断是否是数字，文本框中不能输入数字
                	if(event.keyCode >= 48 && event.keyCode <= 57){
                		return false;
                		//取消按键行为
                	}

BOM

BOM可以使我们通过JS来操作浏览器,在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象: Window Navigator Location History Screen
Window:代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator:代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location:代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History:代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录,由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效
Screen:代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

<script type="text/javascript">
			console.log(window.navigator);//"[object Navigator]"
			console.log(history);//"[object History]"
			console.log(location);//"http://127.0.0.1:8020/2/7BOM.html"
		</script>

Navigator（window对象属性）

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器;由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了;一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
火狐的userAgent
Mozilla5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko20100101 Firefox50.0
Chrome的userAgent
Mozilla5.0 (Windows NT 6.1; Win64; x64) AppleWebKit537.36 (KHTML, like Gecko) Chrome52.0.2743.82 Safari537.36
IE8
Mozilla4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE9
Mozilla5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE10
Mozilla5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE11
Mozilla5.0 (Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了;以下方法可以

<script type="text/javascript">
			var ua = navigator.userAgent;
			//console.log(ua);
			if(/firefox/i.test(ua)){
				alert("你是火狐");
			}else if(/chrome/i.test(ua)){
				alert("你是Chrome");
			}else if(/msie/i.test(ua)){
				alert("你是IE浏览器");
			}else if("ActiveXObject" in window){
				//判断window对象中是否有ActiveXObject属性
				alert("你是IE11 抓住你了")
			}
	</script>

History（window对象属性）

对象可以用来操作浏览器向前或向后翻页
length
属性，可以获取到当成访问的链接数量
back()
可以用来回退到上一个页面，作用和浏览器的回退按钮一样
forward()
可以跳转下一个页面，作用和浏览器的前进按钮一样
go()
可以用来跳转到指定的页面
它需要一个整数作为参数
1:表示向前跳转一个页面相当于forward()
2:表示向前跳转两个页面
-1:表示向后跳转一个页面
-2:表示向后跳转两个页面

<script type="text/javascript">
			//alert(history.length);
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//history.back();
					//history.forward();
					history.forward(1);
				}
			}
		</script>

Location（window对象属性）

该对象中封装了浏览器的地址栏的信息
如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
alert(location);如果直接将location属性修改为一个完整的路径，或相对路径
则我们页面会自动跳转到该路径，并且会生成相应的历史记录
location = “http:www.baidu.com";
location = “01.BOM.html”;
assign()：用来跳转到其他的页面，作用和直接修改location一样
reload()：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面 location.reload(true);
replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面不会生成历史记录，不能使用回退按钮回退

window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//location = "http://www.baidu.com";
					//location.assign("1事件冒泡.html");
					location.reload(true);
					//location.replace("1事件冒泡.html");
				}
			}

window对象方法

定时器
setInterval()：定时调用；可以将一个函数，每隔一段时间执行一次
参数：

回调函数，该函数会每隔一段时间被调用一次
每次调用间隔的时间，单位是毫秒

返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识，clearInterval()可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器。
clearInterval()可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器；如果参数不是一个有效的标识，则什么也不做

<script type="text/javascript">
			window.onload = function(){
				var count = document.getElementById("count");
				count.onclick = function(){
					var num = 1;
					var timer = setInterval(function(){
						count.innerHTML = num++;
						if(num == 11){
							clearInterval(timer);
							//关闭定时器
						}
					},100);
		}
			};
	</script>

延时调用
setTimeout：延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次。延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择。使用clearTimeout()来关闭一个延时调用：clearTimeout(timer);

<script type="text/javascript">
			var num = 1
			var timer = setTimeout(function(){
				console.log(num++);
			},3000);
			//关闭延时调用
			clearTimeout(timer);
		</script>

类的操作

直接修改元素的类css：通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便我希望一行代码，可以同时修改多个样式。
我们可以通过修改元素的class属性来间接的修改样式.这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离。

JSON

JS中的对象只有JS自己认识，其他的语言都不认识；JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。JavaScript Object Notation， JS对象表示法；JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号。其他的和JS语法一致
JSON分类：1.对象 {} 2.数组 []
JSON中允许的值：1.字符串2.数值3.布尔值4.null5.对象6.数组
在JSON字符串转换为JS中的对象，在JS中，为我们提供一个工具类——JSON。这个对象可以将JSON与JS对象互相转化。

var obj = '{"name":"孙悟空","age":18,"gender":"男"}';//JSON对象
			var arr = '[1,2,3,"hello",true]';//JSON数组
			var arr2 = '{"arr":[1,2,3]}';
			console.log(JSON);//"[object JSON]"

JSON 格式
复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。数组或对象最后一个成员的后面，不能加逗号。
JSON工具类
json ——> js对象
JSON.parse():可以将以JSON字符串转换为js对象;它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
JS对象 > JSON
JSON.stringify() -ify/fy，表示”使……化。可以将一个JS对象转换为JSON字符串；需要一个js对象作为参数，会返回一个JSON字符串

var json = '{"name":"孙悟空","age":18,"gender":"男"}';
			var arr = '[1,2,3,"hello",true]';
			var o = JSON.parse(json);
			var o2 = JSON.parse(arr);
			console.log(o.age);//18
			console.log(o2[2]);//3
			var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
			var str = JSON.stringify(obj3);
			console.log(str);//"{"name":"猪八戒","age":28,"gender":"男"}"

JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
解决方式：eval()
这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回;如果使用eval()执行的字符串中含有{},它会将{}当成是代码块;如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患。

var str = '({"name":"孙悟空","age":18,"gender":"男"})';
			var str2 = "alert('hello')";
		    var obj = eval("("+str+")");
		    console.log(obj);//"[object Object]"

如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理

<script type="text/javascript" src="json2.js">

玉解

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫