Javascript知识点

电玩女神 2022-04-12 13:45 234阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>万能的文萱大王崛起之路1</title>
    	<style>
    		.button{
    			background:#D9E812;
    			border-color: #A6B03D;
    			border-bottom-style: double;
    			font-family: 黑体;
    			font-style: normal;
    			font-size:15px;
    			font-weight: bold;
    			height: 30px;
    			
    		}
    	</style>
    </head>
    
    <body oncontextmenu="hideContextmenu1()" onLoad="onLoaded()" onUnload="onUnLoaded()" onResize="Resize()">
    	<dt><h1>Javascript知识点</h1></dt>
    	<dd><big>弱变量类型，基于对象而不是面向对象，轻量级脚本语言   语法和JAVA太tm像了，和Python也太tm像了</big></dd>
    	<ul>
    	<li type="1"><h2>数据类型</h2></li>
    	<ul>
    	<li>数值类型，字符串，布尔，复合数据类型，内置对象</li></ul>
    	<li type="1"><h2>常量与变量</h2></li>
    	<li type="1"><h2>表达式与运算符</h2></li>
    	<li type="1"><h2>控制语句</h2></li>
    	<input class="button" type="button" onClick="text()" value="测试">
    	<li type="1"><h2>函数</h2></li>
    		<ul>
    		<li><h3>函数定义</h3></li>
    			<ul>
    				<li><h4>函数的变量定义    funtion(){}</h4></li>
    				<li><h4>函数的普通定义    var fu=new Function("r","return Math.PI*r*r;");</h4></li>
    				<li><h4>函数的指针调用,函数参数</h4>
    					<input class="button" width="200px" type="button" onClick="add(1,1)" value="回调+arguments">
    				</li>
    				<li><h4>使用返回函数</h4></li>
    				<input class="button" width="100px" type="button" onClick="Sum()" value="返回函数">
    				<li><h4>私有函数就是函数嵌套的里面那个，外界不能调用私有函数</h4></li>
    			</ul>
    		</ul>
    	<li type="1"><h2>数组</h2></li>
    	<input class="button" width="100px" type="button" onClick="arrayTest()" value="数组测试">
    			<script type="text/javascript">
    		function This(value){
    			alert(value);
    		}
    		function hideContextmenu1(){   /*函数调用事件
    			alert(1);
    			//console.log(1);
    			//window.event.returnValue=false;/*表示事件未处理，使下一个程序有机会执行*/
    			document.oncontextmenu=hideContext2();   /*设置对象事件，根据不同的任务添加或移除不同的处理程序*/
    		}
    		function hideContext2(){
    			alert(2);
    			//window.event.returnValue=false;/*表示事件未处理，使下一个程序有机会执行*/
    		}
    		//button.onclick();   显示调用事件处理程序
    	function towardTest(){
    		function Card(name,age){     /*这就是新建一个类*/
    			this.name=name;       /*类属性*/
    			this.age=age;
    			this.printcard=function(){  /*类函数*/
    				line1="Name :"+this.name;
    				line2="Age: "+this.age;
    				document.write(line1+"<br>"+line2);
    			}
    		}
    		Tom=new Card("wangwenxuan","20");  /*调用*/
    		Tom.printcard();
    		/*对象清除*/
    		Tom=null;    /*必须把对象的所有对象都设为null,对象才会被清除*/
    		/*javascript中所有绑定都是运行时绑定*/
    	}
    	function arrayTest(){
    		/*创建*/
    		var arr=new Array();
    		var arr2=new Array(5);
    		var arr3=new Array("级","shang","yao");
    		var arr4=["级","shang","yao"];
    		/*添加到末尾*/
    		arr3.push("Wang");
    		/*添加到前面，返回引用*/
    		
    		arr3.unshift("Wen");
    		/*删除*/
    		delete arr3[1];
    		/*删除最后一个,返回引用*/
    		var handle=arr3.pop();
    		/*删除第一个,返回引用*/
    		var handle=arr3.shift();
    		/*数组转换为字符串，连起来，中间用逗号链接*/
    		alert(arr3.toString());
    		/*数组元素链接成字符串*/
    		alert(arr3.join('-'));
    		/*数组链接*/
    		arr3=arr3.concat(arr4);
    		
    		/*数组抽取*/
    		arr=arr3.slice(0,3);
    		/*数组颠倒*/
    		arr.reverse();
    		
    		/*将对象转换为本地字符串  object  date  numbwe  array*/
    		var date=new Data();
    		date.toLocaleString();
    		
    		/*数组的删除，替换，插入 splice*/
    	    /*用法：array.splice(start,deleteCount,item...)
              解释：splice方法从array中移除一个或多个数组，并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。
    		*/
    		/*删除,arr2会得到arr的0号和一号元素*/
    		arr2=arr.split(0,2);
    		/*插入*/
    		arr.split(0,0,"Wang2","Wang1");
    		
    		/*数组排序*/
    		function sortFunction(arg1,arg2){
    			if(arg1<arg2){
    				return -1;
    			}
    			if(arg1==arg2){
    				return 0;
    			}
    			if(arg1>arg2){
    				return 1;
    			}
            }
    		/*使用sortFunction的规则排序，如果该参数为空，默认升序
    		sortFunction作为一个双参数函数，必须返回下列值之一。  1  arg1>arg2   0  arg1==arg2   -1  arg1<arg2*/
    		arr.sort(sortFunction);
    	}	
    	function getSum(){
    		function sum(a,b){
    			return a+b;
    		}
    		return sum;
    	}
    	 function Sum(){
    		 var sumoftwo=getSum();
    		 alert("1+1="+sumoftwo(1,1))
    	 }
    	  function add1(a,b){
    		  alert("实参个数"+arguments.length);
    		  alert("形参个数"+add1.length);
    		  alert(a+b);
    	  } 
    	function add(a,b){
    		return add1(a,b);  /*使用函数指针*/
    	}
    	  function text(){
    		  /*document.write将字符串输出到HTML文本流*/
    		  document.write("名称： "+navigator.appName+"<br>");
    		  document.write("版本： "+navigator.appVersion+"<br>");
    		  document.write("发行代号： "+navigator.appCodeName+"<br>");
    		  /*一部分转义字符在输出到HTML文本流中不发生作用*/
    		  document.write("你好\n"+"Hello"+"<br>");
    		  
    		  /*内置对象*/
    		  /*Date对象，有一堆get和set函数*/
    		  var myDate=new Date();
    		  document.write("g日期: "+myDate+"<br>")
    		  var month=myDate.getMonth();
    		  myDate.setMonth(month);
    		  
    		  /*Global,全局对象不用.引用*/
    		  var str=parseFloat(1.23);
    		  var str2=parseInt(1);
    		  var bool1=isNaN(NaN);
    		  
    		  /*Math数学对象 sin cos abs min max round等等SQRT2返回2的平方根值*/
    		  var a=Math.SQRT2;
    		  
    		  /*String对象  连接，切片，找出字符等操作*/
    		  var str3=String("王文萱");
    		  str3.toLocaleLowerCase();
    		  str3.slice(0,1);
    		  
    		  /*null判断对象是否创建或引用成功  undefined判断对象是否赋值或定义  实际意义相同 */
    		  var a=null;
    		  var b;
    		  if(a==null){
    			  document.write("a是null<br>");
              }
    		  if(b==undefined){
    			  document.write("b是undefined<br>");
    		  }
    		  
    		  /*数学运算符运用与非数值操作数时，发生隐式类型转换
    		  /*结果输出3，显示类型转换*/
    		  document.write(parseInt("3.5元")+"<br>")
    		  
    		  /*内置对象方法命名：第一个单词全小写，后面每个单词首字母大写*/
    		  
    		  /*除数为0返回一个非数字（NaN）*/
    		  /*运算符  ==类型转换后相同也返回true,不严格   ===等同必须严格相等*/
    		  if("10"==10){
    			  document.write("\"10\"和10相等<br>");
    		  }
    		  if("10"===10){
    			  document.write("\"10\"和10等同");
    		  }
    		  
    		  /*in运算符可以用来遍历数组啥的*/
    		  var fruit=[1,2,3,4];
    		  document.write("演示in运算符：")
    		  for(index in fruit){
    			  document.write(fruit[index]+"  ");
    		  }
    		  
    
    		  /*in运算符可以判断某对象是否是某类实例*/
    		  document.write("<br>演示instanceof运算符：")
    		  if(fruit instanceof Array){
    			  document.write("fruit对象是Array类实例<br>")
    		  }
    		  
    		  /*声明不分配空间，赋值分配空间*/
    		  var a;
    		  a=5;
    		  
    		  /*按位异或运算符，通常可以用于信息加密   A^B=C   C^B=A*/
    		  var password=123456;
    		  var secret=password^666666;  /*666666是密钥  secret密文*/
    		  var public=secret^666666;   /*public解密后的密码*/
    		  
    		  /*按位取反运算符 字符串-1  true -1 false -2   +N  -（N+1）    -N    N-1*/
    		  
    		  /*void运算符，忽略表达式的值*/
    		  
    		  /*typeof运算符返回表达式的值的类型名  Number  String  Boolean  Object  Function  undefined*/
    		  document.write("演示typeof运算符：");
    		  document.write("5的类型名为："+typeof(5)+"<br>");
    		  
    		  /*delete运算符，动态删除动态添加的类属性*/
    		  
    		  var a=new Object();
    		  a.name="Tom";  /*动态添加*/
    		  document.write(a.name+"<br>");
    		  delete a.name;  /*动态删除*/
    		  document.write(a.name+"<br>");
    		  
    		  /*call运算符，改变this指针的指向
    		  f.call(o)其原理就是先通过 o.m = f 将 f作为o的某个临时属性m存储，然后执行m，执行完毕后将m属性删除。*/
    		  for(index in fruit){
    			  var i=0;
    			  document.write(i+" ");
    			  i++;
    		  }
    		  
    		  
    		  
    	  }
    	</script>
    	<li type="1"><h2>Javascript面向对象编程</h2></li>
    		<ul><li><h3>对象创建和销毁</h3></li>
    		<input class="button" width="200px" type="button" onClick="towardTest()" value="面向对象测试">
    			<ul><li><h3>Javascript的对象层次</h3></li>
    				<pre>Javascript组成：语言核心，基本内置对象，浏览器对象，文档对象
    浏览器对象：history,document,location,frames,navagator</pre>
    				<li><h3>事件驱动和事件处理</h3></li>
    				
    				<input class="button" id="button" width="200px" type="button" onClick="javascript:alert('代码调用事件')" value="事件测试">
    				
    				<input class="button" width="200px" type="button" onClick="This(this.type)" value="this测试">
    				<li><h3>常用事件</h3></li>
    				<pre>click单击   dbclick双击   mousedown按下   mouseup释放  onload加载   unload卸载   focus得到焦点</pre>
    				<pre>blur失去焦点 keydown按下键盘 keyup释放键盘   keypress按下并释放键盘    submit提交   reset重置</pre>
    				<pre>select文本框文字被选择       change通常文本框和下拉列表框</pre>
    		</ul>
    		</ul>
    	<li type="1"><h2>窗口和框架</h2></li>
    		<a href="http://www.baidu.com" style="color: darkgrey">去百度吧，完成当前内容卸载</a>
    		<button id="b1" onFocus="OnFocus()" onBlur="OnBlur()">焦点得到失去</button>
    		<button class="button" onclick="connection()">对话框</button>
    		<button class="button" onclick="gundong()">滚动</button>
    		<button class="button" onclick="Window()">窗口操作</button>
    		<button class="button" onclick="delayTime()">间隔操作</button>
    	<script type="text/javascript">
    		
    		/*有时候window可以省略 例如window.alert写成alert*/
             
    		function delayTime(){
    			ident=window.setTimeout("alert('3s到了')",3000);  /*延迟执行代码*/
    			clearTimeout(ident);  /*取消延迟*/
    			tm=window.setInterval("console.log('Hello World')",1000);  /*周期执行代码*/
    			clearInterval(tm);   /*停止周期执行代码*/
    		}
    		
    		/*父窗口访问子窗口 */
    		function find(){
    			for(var i=0;i<window.frames.length;i++){
    				window.frames[i].document.write("Hello world!");
    			}
    		}
    		/*子窗口访问父窗口
    		function show(){
    			alert("父窗口a变量的值:"+window.parent.a);
    		}
    		*/
    		/*状态栏瞬间信息,这个也不好用*/
    		function SetStatus(){
    			var d=new Date();
    			window.status=''+d.getSeconds()+'';
    		}
    		setInterval("SetStatus()",1000);
    		
    		/*文档滚动*/
    		function gundong(){
    			window.scroll(100,100); /*向右滚动100，向上滚动100*/
    		}
    		
    		/*窗口操作*/
    		function Window(){
    			var a=window.open("http://www.baidu.com","baidu","height=300,width=200");
    			/*a.close();关闭*/
    			a.innerHTML+="<h1>Hello World</h1>"; /*通过新窗口引用操作新窗口*/
    		}
    		
    		/*对话框*/
    		function connection(){
    			alert("Heelo");/*警告对话框*/
    			var result=window.confirm("你是美女吗？");
    			/*如果想得到数值型，需要类型转换*/
    			var result2=window.prompt("谁是美女？","王文萱");
    		}
    		
    		
    		/*window对象事件*/
    		/*onload装载事件，作用在body对象时整个网页装载完毕才会触发*/
    		function onLoaded(){ 
    			
    			/*该属性可以设置状态栏默认信息，不好用*/
    			window.defaultStatus="本站是美女专用网站";  
    			console.log("网页装载成功");
    		}
    		
    		/*unload卸载事件，加载新文档时，清除当前的浏览器窗口内容*/
    		function onUnLoaded(){
    			alert("Welcome back");
    			
    		}
    		/*得到焦点onFocus*/
    		function OnFocus(){
    			console.log('┗|｀O′|┛ 嗷~~，我得到焦点了');
    			document.getElementById("b1").style.backgroundColor="red";
    		}
    		
    		/*失去焦点onBlur*/
    		function OnBlur(){
    			console.log('┗|｀O′|┛ 嗷~~，我失去焦点了');
    			document.getElementById("b1").style.backgroundColor="gray";
    		}
    		
    		/*窗口大小改变时触发resize事件*/
    		function Resize(){
    			console.log("不要碰我，烦人");
    			self.resizeBy(10,1000);   /*横坐标增加10，纵坐标增加100*/
    			self.resizeTo(1000,10);    /*横坐标1000，纵坐标100*/
    		}
    	</script>
    		
    	<li type="1"><h2>屏幕和浏览器对象</h2></li>
    	<button class="button" onclick="print()">检测</button>
    		
    	<script type="text/javascript">
    		function print(){
    		/*screen.height
    		声明了显示浏览器的屏幕的高度。
    		screen.availHeight
    		声明了显示浏览器的屏幕的可用高度。这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。*/
    		console.log(screen.availHeight);  /*实际高度   738*/
    		console.log(screen.availWidth);   /*实际宽度*/
    		console.log(screen.colorDepth);   /*色盘深度*/
    		console.log(screen.height);  /*区域高度    768  分辨率*/
    		console.log(screen.width);  /*区域宽度       分辨率*/
    		console.log(window.screenTop);  /*网页正文部分上*/
    		console.log(window.screenLeft);  /*网页正文部分左*/
    		
    		console.log(navigator.appName);   /*浏览器名称*/
    		console.log(navigator.appVersion);/*浏览器版本*/
    		console.log(navigator.language);/*浏览器语言*/
    		console.log(navigator.platform);/*浏览器编译平台*/
    		console.log(navigator.userAgent);/*浏览器用户表头*/
    		console.log(navigator.appCodeName);/*浏览器代码*/
    		
    		if(navigator.javaEnabled()){  /*判断是否支持Java方法*/
    			console.log("支持Java方法")
    		}
    		
    		var c=navigator.mimeTypes;  /*当前浏览器支持的MIME类型信息*/
    		console.log(c.countgth);   /*MIME数量*/
    		console.log(c[0].enabledPlugin.name);  /*名字*/
    		console.log(c[0].type);  
    		console.log(c[0].description); /*描述*/
    		console.log(c[0].duffixs); /*附注*/
    			
    		}
    	</script>
    		
    	<li type="1"><h2>文档对象</h2></li>
    		<form name="first">
    			<input type="text" onKeyPress="document.second.elements[0].value=this.value" >
    		</form><br>
    		<form name="second">
    		<input type="text"  onKeyPress="document.forms[0].elements[0].value=this.value" >
    		</form><br>
    		<a href="http://www.baidu.com" onMouseOver="setColor()">美化链接-设置超链接的颜色</a><p>
    		<button class="button" onClick="setcolor()">设置颜色</button><p>
    		<button class="button" onClick="Run()">标题栏中跑马灯</button><p>
    		<button class="button" onClick="Copy()">解决盗链问题</button><p>
    		<button class="button" onClick="openWin()">"open and write"</button><p>
    		向新打开的文档对象写完所有的对象之后，一定要调用close方法关闭文档流<p>
    		\
    		输出非HTML文档:<button class="button" onClick="opentxt()" name="hello">"open other"</button><p>
    		文档中所有HTML元素:<button class="button" onClick="knowall()" name="2">所有元素</button><p>
    		得到文档中的HTML元素:<button class="button" onClick="knowhtml()" name="hello3" value="Hello">得到元素</button><p>
    		得到文档元素中的子元素:<button class="button" onClick="knowchild()">得到子元素</button><p>
    	  <form id="select1"><button class="button" onClick="knowchild()" >得到子元素</button><p>
    		  <input type="checkbox" value="1" name="he">1<br>
    			<input type="checkbox" value="2" name="he2">2<br>
    			<input type="checkbox" value="3" name="he3">3<br>
    		
    		</form>
    		创建和使用图片对象<button class="button" onClick="createImg()">创建图片</button><p>
    		<a href="css知识.html" onMouseOver="javascript:document.img01.src='roy1.jpg'">
    			
    		<img name="img01" src="roy1.jpg" onerror="this.src='roy1.jpg'"></a><br>
    		<button class="button" onClick="showProps(document.images.testimage)">读取图片信息</button><p>
    		<img src="narudo1.jpg" alt="The image" lowsrc="css知识.html" id="testimage" name="testimage"
    			 width="200" height="300" border=1 hspace="10" vspace="15"><p>
    		<button class="button" onClick="showLinks()">读取所有链接</button><p>
    		<script type="text/javascript" >
    			function showLinks(){
    				links=document.links;
    				var str="";
    				k=0;
    				for(i in links){
    					//下标为0时，表示链接个数
    					if(k!=0)str+=links[i]+'\n';
    					k++;
    				}
    				alert("一共有"+links.length+"个链接，分别是:\n"+str);
    			}
    			function showProps(pic){
    				var str="image Properties\n\n";
    				str+="alt:"+pic.src+"\n";				
    				str+="border:"+pic.border+"\n";
    				str+="complete:"+pic.complete+"\n";       //图像是否载入
    				str+="height:"+pic.height+"\n";
    				str+="hspace:"+pic.hspace+"\n";
    				str+="lowsrc:"+pic.lowsrc+"\n";
    				str+="width:"+pic.width+"\n";
    				str+="vspace:"+pic.vspace+"\n";
    				
    				str+="name:"+pic.src+"\n";
    				alert(str);
    			}
    			function createImg(){
    				images=document.getElementsByTagName("img");
    				
    				newImage=new Image();
    				newImage.src="roy1.jpg";
    			}
    			function knowchild(){
    				for(var i=0;i<document.getElementById("select1").children.length;i++){
    					var obj=document.getElementById("select1").children[i];
    					if(obj&&obj.type&&obj.type=="checkbox"){
    						obj.checked=true;
    					}
    				}
    			}
    			function knowhtml(){
    				var str=new Array(3);
    				str[0]=document.all.he.value;
    				str[1]=document.all["he2"];
    				str[3]=document.tags('form')[0].he3.value;
    				for(var i=0;i<str.length;i++){
    					console.log(str[i]);
    				}
    			}
    			function knowall(){
    				var i;
    				var sum=document.all.length;
    				document.write('document.all.length='+sum+'<br/>');
    				for(i=0;i<sum;i++){
    					document.write("document.all["+i+"]="+document.all[i].tagName+'<br/>');
    				}
    			}
    			function opentxt(){
    				newWindow=window.open("CSS知识点.docx","","height=300,width=200",false);
    				newWindow.document.title="一个非HTML窗口"
    				newWindow.document.close();
    			}
    			function openWin(){
    				newWindow=window.open("","","height=300,width=200",false);
    				newWindow.document.write("<title>例子</title>")
    				newWindow.document.write("<body bgcolor=#ffffff>")
    				newWindow.document.write("<h1>Hello<h1>")
    				newWindow.document.write("</body>");
    				//newWindow.document.write("</html>");
    				newWindow.document.close();
    			}
    			function Copy(){
    				var frontURL=document.referrer;
    				var host=location.hostname;
    				var frontHost=frontURL.substring(7,host.length+7);
    			if(frontURL!=""){	
    				if(host==frontHost){
    					alert("没有盗链");
    				}
    				else{
    					alert("您是非法链接");
    				}
    			}
    				else{
    					alert("您直接打开文档");
    				}
    			}
    			function Run(){
    				setInterval("run()",100);
    			}
    			function run(){
    				var str="希望给您带来愉快的体验";
    				str=str.substring(1,str.length)+str.substring(0,1);
    				document.title=str;
    				status=str;
    			}
    			with(document){
    				writeln("最后一次修改时间"+document.lastModified+"<br>");
    				writeln("标题:"+document.title+"<br>");
    				writeln("URL"+document.URL+"<br>");
    			}
    		   function setColor(){
    			   document.vlinkColor="blue";   /*未访问*/
    			   document.linkColor="green";  /*访问中*/
    			   document.alinkColor="red";  /*已访问*/
    		   }
    		   function setcolor(){
    		       document.bgColor="black";  /*设置背景颜色*/
    			   document.fgColor="white";  /*设置字体颜色*/
    		   }
    		</script>
    	
    	<li type="1"><h2>历史对象和地址对象</h2></li>
    		<h3>history对象主要用来跟踪窗口中曾经用过的url,在IE浏览器上只有一个属性，三个方法</h3>
    		
    	<button class="button" onClick="history.back()">上一页</button>
    		<button class="button" onClick="history.forward()">下一页</button>
    		<button class="button" onClick="history.go(0)">页面跳转</button>
    		
    		<h3>location对象是window和document的属性</h3>
    		<ul>
    		
    		<li><h4>location.replace(url)   location.assigh(url)加载新文档</h4></li>
    		<li><h4>location.reload()刷新文档</h4></li>
    		</ul>
    		
    		<button class="button" onClick="showlocation()">location各个属性值</button>
    	<script language="javascript">
    		function showlocation(){
    			//      链接				主机和端口号			主机名				协议					路径
    			str=location.href+window.location.host+location.hostname+location.protocol+location.pathname;
    			alert(str);
    		}
    	</script>
    	<li type="1"><h2>表单对象和表单元素</h2></li>
    		
    				<form name="myForm" onReset="allowReset()" onSubmit="allowSubmit()">
    			<input type="text" name="firstName" size="20"><p>
    			<input type="text" name="lastName" size="20"><p>
    		    <input class="button" type="button" value="转换成大写" name="upperbutton" onClick="setCase('upper')">
    			<input  class="button" type="button" value="转换成小写" name="lowerbutton" onClick="setCase('lower')">
    			<input class="button" type="button" onClick="Submit()" value="提交">
    			
    			<input class="button" type="button" onClick="Reset()" value="重置">
    			<input type="submit" class="button">
    			<input type="reset" class="button"><p>
    			<input type="button" class="button" value="取得表单元素" onClick="showMessage()">
    			<input type="button" class="button" value="表单的提交方式" onClick="send()">
    			
    			</form>
    	<script type="text/javascript">
    		function send(){
    			document.myForm.action="mailto:1984852655@qq.com";
    		}
    		function showMessage(){
    			
    			//得到表单元素值三种方式
    			var a1=document.myForm.elements[0].value;
    			var b1=document.myForm.firstName.value;
    			var c1=document.forms[1].elements[0].value;
    			var a=document.myForm.elements;
    			var str="";
    			for(var i=0;i<a.length;i++){
    				str+=a[i].tagName+"\n";
    			}
    			alert(str);
    		}
    		function allowReset(){
    			window.confirm("确定重置吗");
    		}
    		function allowSubmit(){
    			window.confirm("确定提交吗?");
    		}
    		function Submit(){
    			document.myForm.submit();   //提交
    		}
    		function Reset(){
    			document.myForm.reset();   //重置
    		}
    		function setCase(caseSpec){
    			if(caseSpec=='upper'){
    			document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase();
    			document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase();
    			}
    			else{
    				document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase();
    			document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase();
    			}
    		}
    		</script>
    		
    	<li type="1"><h2>脚本化cookie</h2></li>
    		<h3>document对象中有一个名为cookie的属性</h3>
    		<button class="button" onClick="setAndGet()">设置和获取cookie</button>
    	<script type="text/javascript">
    		function setAndGet(){
    			document.cookie='id=12';
    			//var a=document.cookie;
    			//var arr=a.split("; ");
    			alert(document.cookie);
    			//var b="";
    			/*for(var i=0;i<arr.length;i++){
    				
    				var arrs=arr[i].split("=");
    				alert(arrs[0]);
    				if("id"==arrs[0]){
    					
    					b+=arrs[1];
    				}
    			}
    			alert(b);*/
    			/*编码解码，因为要将特殊符号写入cookie*/
    			document.cookie=escape("name")+"="+escape("王文萱")+";";
    			var id=document.cookie.indexOf("name=");
    			id+=5;
    			var end=document.cookie.indexOf(';',id);
    			var str1=unescape(document.substring(0,start));
    			var str2=unescape(document.substring(start,end));
    			
    			//设置cookie的生存期
    			var date=new Date();
    			var n=10;  //10天
    			date.setTime(date.getTime()+n*24*3600*1000);
    			document.cookie="expire="+date.toGMTString();
    			
    			//cookie路径
    			//同一目录可以使用
    			document.cookie+="path=/;";
    			//不同域可以使用，设置cookie的域  .secure属性使cookie只能通过安全协议传输，cookie保存在客户端，安全性不高
    			document.cookie+="domain=localhost; secure";
    			
    		}
    		if(navigator.cookieEnabled){
    			console.log("浏览器支持cookie功能");
    		}
    		else{
    			console.log("浏览器不支持cookie功能");
    		}
    		
    	</script>
    	<li type="1"><h2>Javascript与XML技术</h2></li>
    	<div id="myDiv"></div>
    	<script type="text/javascript">
    		var text="";
    		var cnodes=null;
    		//firstChild  头一个子节点     lastChild最后一个子节点   hasChildNodes()  判断是否拥有子节点
    		//childNodes  子节点集合       parentNode 父节点的引用
    		for(var i=0;i<document.documentElement.childNodes.length;i++){
    		if(document.documentElement.childNodes[i].nodeName=="BODY"){
    			cnodes=document.documentElement.childNodes[i].childNodes;
    			
    			for(var m=0;m<cnodes.length;m++){
    				text+=cnodes[m].nodeName+"   "+cnodes[m].nodeType+"\n";   //nodeType结点类型
    			}
    		}
    		}
    		console.log(text);
    		
    		var str="";
    		var cnodes=null;
    		
    		//访问指定结点，处理节点属性,创建新节点
    		///createTextNode创建文本结点     createDocumentFragment 创建文档碎片    createElement 通过指定标签名创建结点
    		//getElementsByTagName    getElementsByName
    	    var docBody=document.getElementById("myDiv");
    		imgObj=document.createElement( 'img' );
    		imgObj.src="fire2.jpg";
    		docBody.appendChild(imgObj);
    		docBody.setAttribute("Hello","World");
    		var s=docBody.getAttribute("Hello");
    		console.log(s+"\n");
    		
    		//如何修改(增删改查)结点
    		//target.insertBefore(newChild,existingChild)       target.replaceChild(newChild,oldChild)
            //参数说明:
            //1.target:被添加节点和现有节点的父节点。
            //2.newChild:将要被插入的节点。
            //3.existingChild:现有的节点，新节点将会被插入到它的前面，此参数值可以为null。
    		var msg="提示:可以通过修改文档节点来动态改变文档的内容";
    		var newpNode=document.createElement("p");
    		var newNode=document.createTextNode(msg);
    	    var imag=document.createElement('img');
    		imag.src="fire1.jpg";
    		
    		docBody.insertBefore(newpNode,imgObj);    //插入
    		newpNode.appendChild(newNode);   //添加
    		
    		//docBody.remove(imgObj);  //删除
    		newpNode.replaceChild(imag,newNode);  //代替
    		//为了方便使用HTML DOM处理表格，添加了一些属性和方法
    		//遍历DOM文档（了解，多数浏览器不支持)  nodeIterator  TreeWalker
    		
    		//检测是否支持XML版
    		if(document.implementation.hasFeature("XML","1.0")){
    			console.log("支持XML1.0版");
    		}
    		else{
    			console.log("不支持XML1.0版");
    		}
    	</script>
    	<li type="1"><h2>正则表达式</h2></li>
    	<script type="text/javascript">
    		//RegExp对象完成有关正则表达式的操作
    		//创建正则表达式的方式   g搜索整个字符串，否则只能搜索到第一个匹配的内容   i忽略大小写标志
    		var filter=/一枪爆头|一刀捅死/g;
    		var find=/.o./g;
    		var regObj=new RegExp("一枪爆头","g");
    		var said="他被人一枪爆头了";
    		var str="How are you?"
    		if(filter.exec(said)){
    			console.log("限制级语句");
    		}else{
    			console.log("非限制级语句");
    		}
    		if(regObj.exec(said)){
    			console.log("限制级语句2");
    		}else{
    			console.log("非限制级语句2");
    		}
    		var result=Array();
    		while(find.exec(str)!=null){
    			result.push(RegExp.lastMatch);
    		}
    		console.log(result);
    		
    		//复杂模式
    		
    		//使用分组
    		var filter1=/(OK){2}/gi;
    		var s="this word is OKOKOkok!!!";
    		s1=s.match(filter1);
    		for(var i=0;i<s1.length;i++){
    			result.push(s1[i]);
    		}
    		console.log(result);
    	</script>
    	<li type="1"><h2>AJAX的基础知识</h2></li>
    	<input id="Text1" type="text" onBlur="OnBlur(this)">
    	输入如户名:例如admin <div id="message">
    	<script type="text/javascript">
    		//从外部的XML文件加载信息数据
    		
    		var XMLDOM = new ActiveXObject("Microsoft.XMLDOM");
    		var newsArray=new Array();
    		var index=0;
    		if(XMLDOM!=null){
    			XMLDOM.async=false;   //关闭异步
    			XMLDOM.load("news.html");
    			XMLDOM = XMLDOM.documentElement;
    			for(var n=0; n<XMLDOM.childNodes.length;n++){
    				newsArray.push(XMLDOM.childNodes[n].firstChild.nodeValue);
    			}
    		}
    		
    		setInterval("ToggleNews()",1000);
    		function ToggleNews(){
    			viewport.innerHTML+="<li>"+newsArray[index%(newsArray.length)];
    			index++;
    		}
    		
    		//完整AJAX实例
    		
    		var xmlHtpRp;
    		function OnStatusChange(){
    			if(xmlHtpRp.readyState==4){
    				if(xmlHtpRp.status==200){
    					document.getElementById('message').innerHTML=xmlHtpRp.responseText;
    				}
    				else{
    					document.getElementById('message').innerHTML=xmlHtpRp.status;
    				}
    			}
    		}
    		
    		function onBlur(obj){
    			var xmlhttpreques=new ActiveXObject("Micsoft.XMLHttp"); //在IE浏览器中的创建方式
    			
    			url="http://localhost/server.php?username="+obj.value;
    			
    			xmlHtpRp.open('GET',url,true);
    			xmlHtpRp.send(null);
    		}
    		
    		
    		
    		//XMLHttpRequest对象创建
    		var xmlhttprequest=new XMLHttpRequest();  //普通创建方式
    		var xmlhttpreques=new ActiveXObject("Micsoft.XMLHttp"); //在IE浏览器中的创建方式
    	</script>
    	<li type="1"><h2>AJAX的高级应用</h2></li>
    	
    	<li type="1"><h2>Javascript与插件</h2></li>
    		<h3>了解:javaApplet,Flash,ActiceX</h3>
    	<li type="1"><h2>Javascript的调试与优化</h2></li>
    	</ul>
    
    		
    		<script type="text/javascript" for="document" event="oncontextmenu">
    			//window.event.returnValue=false;
    			document.oncontextmenu=hideContext2();
    			alert("3");
    		</script>
    </body>
    </html>

Javascript知识点

发表评论取消回复

还没有评论，来说两句吧...

相关阅读