javascript小记

最新推荐文章于 2023-02-05 23:48:33 发布

TIME_@

最新推荐文章于 2023-02-05 23:48:33 发布

阅读量416

点赞数 1

分类专栏： Javascript 文章标签： js笔记

本文链接：https://blog.csdn.net/geekfocus/article/details/88124781

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js标识符字母下划线美元符号区分大小忽视空格 Ctrl + / 注释
var 定义字符串、数字、布尔、数组、对象、空、未定义、通过赋值null清除变量
==判断"10"==10结果为true ; ===判断"10"===10结果为false;！==同理
三目？：
条件语句 ifelse switch
循环for; for in;while; do while; for in 自动执行循环不需要++ ; break continue类似C
弹出对话框 alert()；

function demo(){
	var i=10;//局部变量
	x=100;//全局变量
	}

异常捕获：try catch // throw
事件
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件

<script>
	function onOver(ooj){//函数命名首字母小写 后单词首字大写
		ooj.innerHTML="Hello";
	}
	function onOut(ooj){
		ooj.innerHTML="World";
	}
</script>
<div class="" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>

onChange 文本内容改变事件
onSlect 文本框选中事件

<form><input type="text" onselect="changeDemo(this)"></form>
<script>
	function changeDemo(bg){
		bg.style.background="red";
	}
</script>

onFocus 光标聚集事件

<form><input type="text" onfocus="changeDemo2(this)"></form>
<script>
	function changeDemo2(bg){
		bg.style.background="blue";
	}
</script>

onBlur 移开光标事件
onLoad 网页加载事件 //网页刷新完毕后弹出

<body "mgs()">
	<script>
		function mgs(){
			alert("网页内容加载完毕");
		}
	</script>

onUnload 关闭网页事件
DOM对象简介
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
DOM操作HTML
javascript改变页面中所有HTML元素
javascript改变页面中所有HTML属性
js改变页面中所有的css样式
js对页面中的所有事件做出反应
1、改变HTML输出流（注意不要在文档加载完成之后使用document.write()，这会覆盖文档）
2、寻找元素：通过id找到HTML元素 document.getElementById("")
通过标签名找到HTML元document.getElementByTagName(“p”)
3、改变HTML内容：使用属性innerHTML
4、改变属性 atrribute？

<a id="aid" href="www.">hello</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="www.";
}
</script>

DOM操作CSS
语法：document.getElementById(id).style.property=new style

<div id="div" class="div">hi</div>
<button onclick="demo()">anniu</button>
<script>
	function demo(){
		document.getElementById("div").style.background="blue";
	}
</script>

DOM EventListener事件句柄
方法：addEventListener(): removeEventListener():
1、addEventListener()用于向指定元素添加事件句柄

<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){alert("hello")});
</script>//不用担心修改名字 多个句柄不会覆盖

<button id="btn">按钮</button>
<script>
	var x=document.getElementById("btn");
	x.addEventListener("click",hello);//此处不是onclick注意
	x.addEventListener("click",world);
	function hello(){
		alert("hello");
	}
	function world(){
		alert("world");
	}
</script>

2、removeEventListener()移除方法添加的事件句柄 x.removeEventListener(“click”,hello);

事件详解
事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接受，然后逐级向上级传播至最不具体的元素的节点(文档)
事件捕获：最不具体的节点先接受事件，而最具体的节点应该是最后接受事件
事件处理：
1、HTML事件处理直接添加到HTML结构中 button的onclick属性修改一处需要修改两处
2、DOM 0级事件处理把一个函数值赋值给一个事件处理程序属性

<div id="div">
<button id="btn1">按钮</button>
<script>
	var btn1=document.getElementById("btn1");
	btn1.onclick=function (){alert("DOM 0级事件处理1")}；//坏处 事件被覆盖掉
	btn1.onclick=function (){alert("DOM 0级事件处理2")}；
	btn1.onclick=null;
</script>

3、DOM 2级事件处理
addEventListener(“事件名”,“事件处理函数”,“布尔值”);//bool值当前版本忽略
true：事件捕获 false：事件冒泡 removeEventListener();
同上面案例DOM EventListener事件句柄add/remove
4、IE事件处理程序小于等于ie8的版本名词不同参数同
attachEvent
detachEvent

<script>
	var btn1 = document.getElementById("btn1");
	if(btn1.addEventListener){
		btn1.addEventListener("click",demo);//DOM 2级
	}else if(btn1.attachEvent){
		btn1.attachEvent("onclick",demo);//IE8以下
	}else{
		btn1.onclick = demo();//DOM 0级
	}
	function demo(){
		alert("Hi");
	}
</script>

事件对象
在触发DOM事件的时候都会产生一个对象
事件对象event
type：获取事件类型
target：获取事件目标

<script >
document.getElementById("btn1").addEventListener("mouseover",showType);
function showType(event){
	alert(event.type);//类型onmouseover
	alert(event.target);// objectHTMLbuttonElement
	}
</script>

stopPropagation：阻止事件冒泡

<div id="div">
<button id="btn1">按钮</button>
</div>
<script>//点一下button   外部的div 的id识别也触发 事件冒泡
	document.getElementById("btn1").addEventListener("click",showType);
	document.getElementById("div").addEventListener("click",showDiv);
	function showType(event){
	alert(event.target);// objectHTMLbuttonElement
	event.stopPropagation();//阻止事件冒泡
}
	function showDiv(){
		alert("div");
	}
</script>

preventDefault():阻止事件默认行为

function showA(event){
		event.stopPropagation();//阻止事件冒泡
		event.preventDefault();//阻止默认事件如超链接点击后跳转
}

JS内置对象
什么是对象
js中的所有事物都是对象：字符串、数值、数组、函数
每个对象带有属性和方法
js中允许自定义对象
自定义对象：
1、定义并创建对象实例

<script>
			people = new Object();
			people.name = "iwen";
			people.age = "30";
			document.write("name:"+people.name+",age:"+people.age);
			/*people = {name:"iwen",age:"30"};也可以创建*/
</script>

2、使用函数来定义对象，然后创建新的对象实例

<script>
			function people(name,age){
				this._name = name;this._age = age;//用this索引
			}
			son = new people("iwen","30");
			document.write("name:"+son._name+",name:"+son._age);
</script>

String字符串对象
String对象用于处理已有的字符串
字符串可以使用单引号或双引号
indexOf查询字符串是否存在
内容匹配match
替换内容replace()
字符串大小写转换toUpperCase()/toLowerCase()
字符串转为数组：strong>split()

<script>
			var str="hello world";
			document.write("字符串长度："+str.length);
			document.write(str.indexOf("world"));//返回位置或-1
			document.write(str.match("world"));//打印出来或者空
			document.write(str.replace("world","scuw"));//打印出来或者空
			document.write(str.toLowerCase());
			var str1 ="hello,seu,scu";
			var s = str1.split(",");
			document.write(s[1]);
			</script>

字符串属性和方法：属性 length prototype constructor
方法 charAt() charCodeAt() concat() formCharCode() lastIndexOf() search() slice() substring() substr() valueOf()
Date日期对象
日期对象用于处理日期和时间
getFullYear()获取年份 getTime()获取毫秒
setFullYear()设置具体的日期 getDay()获取星期

<script>
			var date = new Date();
			document.write(date);
		</script>
		时钟实例  
			<body "startTime()">
			<script>
				function startTime(){
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					document.getElementById("timetxt"),innerHTML=h+":"+n+":"+s;
					t = setTimeout(function(){startTime();},500);
				}
				function checkTime(i){
					if(i<10){
						i = "0"+i;
					}
					return i;
				}
			</script>
			<div id="timetxt"></div>
</body>

Array数组对象 [0]
数组常用方法：concat()合并数组；sort()排序；push()末尾追加元素；reverse()数组元素翻转
var c = a.concat(b);
Math对象
执行常见的算数任务
round()四舍五入 random()返回0-1随机数乘10转int max() min() abs()
js DOM对象控制HTML
方法：
getElementsByName()-获取name 相同则存在一个数组中
getElementsByTagName()-获取元素相同则存在一个数组中
getAttribute()-获取元素属性
setAttribute()-设置元素属性
var anode = document.getElementById("");
anode.setAttribute(“属性名例如title”,“设置属性”)
childNodes()-访问子节点

<script>
			function getChildNode(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);
			}
			getChildNode();
</script>

parentNodes()-访问父节点
createElement()-创建元素节点

<script>
	function createNode(){
		var body = document.body;
		var input = document.createElement("input");
		input.type="button";
		input.value="按钮";
		body.appendChild(input);
	}
	createNode();
</script>

createTextNode()-创建文本节点
insertBefore()-插入节点

<script>
	function addNode(){
		var div = document.getElementById("div");
		var node = document.getElementById("pid");
		var newnode =document.createElement("p");
		newnode.innerHTML="动态添加p元素";
		div.insertBefore(newnode,node);
	}
	addNode();
</script>

removeChild()-删除节点

<script>
		function removeNode(){
			var div = document.getElementById("div");
			var p = div.removeChild(div.childNodes[1]);
		}removeNode();
</script>

offsetHeight()-网页尺寸-不包含滚动条

<script>
		function getSize(){
			var width = document.body.offsetWidth;
			//var width = document.documentElement.offsetWidth;
		}getSize();
</script>

scrollHeight()-网页尺寸-包含滚动条

JS浏览器对象-window对象
1、window对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有js全局对象、函数以及变量均自动成为window对象成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
2、window尺寸：
window.innerHeight 浏览器窗口内部高度
window.innerWidth 浏览器窗口内部宽度
3、window方法：
window.open(可以设置新窗口大小位置各种属性) 打开新窗口
window.close() 关闭当前窗口
JS浏览器对象-计时器
计时事件：通过使用js在一个设定的时间间隔后执行代码，而不是在函数被调用后立即执行，称之为计时事件
计时方法：①setInterval()-间隔指定的毫秒数不停地执行指定的代码
clearInterval()-方法用于停止setInterval()方法执行的函数代码

<button id="btn" onclick="stopTime()">按钮</button>
	<p id="ptime"></p>
<script>
		var mytime = setInterval(function(){
			getTime();},1000);
		function getTime(){
			var d = new Date();
			var t = d.toLocateTimeString();
			document.getElementById("ptime").innerHTML=t;
		}
		function stopTime(){
			clearInterval(mytime);
		}
</script>

② setTimeout()-暂停指定的毫秒数后执行指定的代码
clearTimeout()用于停止执行setTimeout()的函数代码

<button id="btn" onclick="myWin()">按钮</button>
	<script>
		var win;
		function myWin(){
			win=setTimeout(function(){alert("hi")},3000);
		}
</script>//垃圾网站不停弹窗口原理

History对象
History对象:window.history对象包含浏览器的历史url集合
History方法：
history.back()-与在浏览器点击后退按钮相同
history.forward()-浏览器中点击按钮向前相同

<a href="#.html">跳转到#</a>
	<button id="btn" onclick="goob()">按钮</button>
	<script>
		function goob(){
			history.forward();
		}
	</script>
		history.go()-进入历史中某个页面
	<form>
		<input type="text" id="username"></input>
		<button id="btn" onclick="safe()">按钮</button>
	</form>
	<script>
		function safe(){
			var name=document.getElementById("username").value;
			if(name=="hello"){
				history.go(-1);//本html来自另一个html的超链接 若符合 则回到上一个html
			}else{
				alert("error input");
			}
		}
</script>

JS浏览器对象-Location对象
window.location对象用于获得当前页面的地址URL，并把浏览器重定向到新的页面
Location对象的属性：
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol返回所使用的web协议(http://或https?/)
location.href属性返回当前页面的URL
location.assign()方法加载新的文档//达到超链接的效果
Screen对象
window.screen对象包含有关用户屏幕的信息
属性：
screen.availWidth-可用的屏幕宽度
screen.availHeight-可用的屏幕高度
screen.Width-屏幕宽度
screen.Height-屏幕高度
JS瀑布流效果-布局 //例如百度图片搜索的界面效果
JS面向对象
认识面向对象
一切事物皆对象对象具有封装和继承特性信息隐藏
基本面向对象

<script>
		var person{
			name:iwen,
			age:30
		}
		alert(person.name);
	</script>	
	函数构造器构造对象
	<script>
		function Person(){}
		Person.prototype={
			name:"iwen",age:30
		}
		var p = new Person();
		p.name;
</script>

深入JavaScript面向对象

<script>
	(function(){
		var n ="ime";
		function People(name){
			this._name=name;
		}
		People.prototype.say=function(){
			alert("peo-hello"+this._name+n);
		}
		window.People=People;//让全局调用
	}());//function内套function封装 括号围起来执行
	(function(){
		function Student(name){
			this._name=name;
		}
		Student.prototype=new People();//继承
		var superSay=Student.prototype.say;
		Student.prototype.say=function(){
			superSay.call(this);
			alert("stu-hello"+this._name);
		}
		window.Student=Student;//让全局调用
	}());
	var s =new Student("iwen");
</script>

TIME_@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript小记

js标识符字母下划线美元符号区分大小忽视空格 Ctrl + / 注释var 定义字符串、数字、布尔、数组、对象、空、未定义、通过赋值null清除变量==判断&amp;quot;10&amp;quot;==10结果为true ; ===判断&amp;quot;10&amp;quot;===10结果为false;！==同理三目？：条件语句 ifelse switch循环for; for in;while; do while; for
复制链接

扫一扫