js笔记02

Posted 黑土白云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js笔记02相关的知识,希望对你有一定的参考价值。

1.BOM的概述
    browser object modal :浏览器对象模型。
    浏览器对象:window对象。
    Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
	Window 顶级父类-->   子:history location  Navigator screen 

2. window的属性
     innerHeight: 文档显示区的高度,不包括工具栏 菜单栏等高度
     innerWidth:  IE不支持 不包括滚动条
		通用写法:var x =window.document.body.clientWidth //文档显示区的宽度
	              var y = document.body.clientHeight//文档显示区的高度
	
	outerheight: var x =window.document.body.outerheight;
	outerwidth:  var y =window.document.body.outerwidth;
	
	self :等同于window对象
	 parent:是打开窗口的父窗口对象,重要
	 opener:是打开窗口的父窗口对象,重要
			2种情况下使用opener:
				   1.使用winodw.open()方法打开的页面
				   2.超链(里面的target属性要设置成_blank)
			2种情况下使用parent:
				   1.iframe 框架
				   2.frame 框架
	 frames[]: 数组类型,代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
		示例:父子窗口相互传参.
     
    open方法,是打开一个页面.


    对话框:
         1)消息框 alert() ;
         2)确认框 confirm() ;
         3)输入框 prompt() ; (了解)

    定时器:
       setTimeout ,setInterval
	     定时器: 1.setTimeout() :只会调用1次
				  2.setInterval() :每隔一段时间调用1次
 
3. history对象
     a.  forward()前进
	 b.  back() 后退
	 c.  go(n) 正数是前进,负数是后退.

4. location对象。
        1.href 属性: 是指要连接到其他的URL
						写法一、window.location.href=‘demo_window对象的close方法.html‘ ;
						写法二、window.location=‘demo_window对象的close方法.html‘ ;

		2.reload方法: 刷新
			写法: window.location.reload() ;

5.常用事件
	* 事件(掌握,明白每个事件发生的时机)
		鼠标移动事件
		* onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 
		* onmouseover : 鼠标悬停事件
			鼠标悬停事件: 当鼠标移动到某个控件上面的时候发生
				this: 把this写在那个标签里面就代表那个标签对象
				this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.
			
			 示例: 当鼠标移动到p标签上的时候,p标签改变样式  (参见demo01_鼠标悬停事件.html)
		* onmouseout : 鼠标移出事件
			鼠标移开事件: 当鼠标从控件上移开的时候
			示例参见(demo_02_鼠标移开事件.html ;
			
    * 鼠标点击事件
		onclick : 当鼠标单击某个控件时发生
			示例: 当单击按钮时,在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
<script>
	function init(){
		btn1.onclick=function (){//给btn1按钮注册一个点击事件
			var img = document.getElementById("img");
			img.style.display="none";
			this.disabled="true";//将按钮设置为不可点击,灰色,this代表btn1
		}
		btn2.onclick=function (){
			var img = document.getElementById("img");
			img.style.display="block";//调用css的样式 用style 或直接用属性
			var btn1 = document.getElementById("btn1");
			btn1.removeAttribute("disabled");//删除btn1的属性
		}
		function fun(obj){obj.value ="新浪";}
		
		function add(){
			var add = document.getElementById("add");
			//调用html,用innerHtml
			add.innerHTML="<img src=‘images/img1.jpg‘ width=‘200‘ height=‘200‘>";
		}
		function remove(){
			var btn3 = document.getElementById("btn3");
			btn3.removeAttribute("onclick");
		}
	}
</script>
</head>
<body onload="init()">
    <img src="images/img1.jpg"  id="img">
    <input type="button" id="btn1" value="隐藏图片">
    <input type="button" id="btn2" value="显示图片">
	<input type="button" id="btn3" value="搜狐" onclick="fun(this)">//this==<input>
	<input type="button" id="btn4" value="添加一副图片" onclick="add()">
	<input type="button" id="btn5" value="去除搜狐按钮的点击事件" onclick="remove()">
    <p id="add"></p>
</body>	
			
	* 加载与卸载事件 
		onload ,onunload
			加载事件(onload) : 在整个页面的元素加载完毕之后发生,body加载完毕之后调用
			<body onload="fun(),fun1(),fun3()"></body> onload可以调用多个函数
			只能写在 img ,layer 和body中;
			
			卸载事件(onunload) : 用于页面关闭时发送某些信息给服务器
			  注意: onload和onunload事件必须写在body或者图片标签里面
			  示例参见(demo04_加载卸载事件.html)
		
	* 聚焦与离焦事件
		onfocus, onblur
			聚焦事件:是在控件获得焦点的时候发生
			离焦事件:是在控件失去焦点的时候发生

			示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
	
<script>
	function fun(obj){
	   obj.style.border="1px solid red";
	   obj.style.background="black";
	   obj.style.color="white";
	}

	function fun1(obj){
		if(obj.value==""){
			alert("内容不得为空");
			obj.focus();//让焦点回到input框中
		}
	}
</script>
</head>
<body>
    <input type="text" name="" value="" onfocus="fun(this)" onblur="fun1(this)"><br><br><br>
    <input type="text" >
</body>	
	
	* 键盘事件
		onkeypress,onkeyup,onkeydown
			onkeypress: 按下键盘按键并松开
			onkeydown : 按下按键发生
			onkeyup: 松开按键
			
			示例参见(demo06_键盘事件.html`)
<script>
	function fun(obj,e){
		obj.value= e.keyCode;//65A 97a 拿到按键的asc码
	}
</script>
</head>
<body>
	//event对象 能拿到事件的状态等信息
    <input type="text" name="" onkeypress="fun(this,event)" onkeydown="" onkeyup="">
</body>
			
	* 提交与重置事件 :提交 是把前台的数据提交到服务器
		onsubmit,onreset
		提交事件: 是在点击提交按钮后发生。(必须写在form表单中)
		提交流程:点击submit按钮-->check(this)方法,如果返回为true,提交表单数据到服务器,跳转页面,反之光标重回到输入框且弹出提示...
		
		重置事件: 是在点重置交按钮后发生。

		示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据(参见demo07_提交重置事件.html)
<script>
	function check(form){
	   var txt= form.username.value;
		if(txt ==""){
			document.getElementById("sname").innerHTML="<font color=‘red‘>*名字不能为空</font>";//只有input标签才有value,其他用innerHtml
			form.username.focus();//光标重新回到输入框
			return false;//必须要有boolean返回值
		}
		return true;
	}

	function funreset(form){
		var txt= form.username.value;
		if(form.username.value !=""){//有数据才清空
			return true;
		}
			return false;
	}
</script>
<body>
<form action="ting.html" method="post" onsubmit="return check(this)" onreset="funreset(this);">
    <input type="text" name="username" value=""><span id="sname"></span>
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
</form>
</body>
			
	* 选择与改变事件
	    onselect:
		onchange:
		
		onselect: 只能用于输入框. 当选择输入框中的文本时发生
		onchange: 用于select和文本框.
					对于下拉框是在选项发生变化的时候发生
					对于文本框是在文本框的内容发生变化并且失去焦点时发生

			示例: 当选择文本框的内容时,弹出文本框的内容
			下拉框的selectedIndex属性:代表选中某项的索引 
			参见(demo08_选择与改变事件.html)
   

  

以上是关于js笔记02的主要内容,如果未能解决你的问题,请参考以下文章

js-权威指南学习笔记14

学习笔记:python3,代码片段(2017)

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程