<!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="事件测试">
<!--事件与this运算符-->
<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'">
<!--onerror图像无法加载时触发-->
<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>
<!-- n=0,当前页面 n>0 往前数第n个文档 n<0 往后数din个文档
history.go(string) 装入历史表中URL字符串包含这个子串的第一个文档
-->
<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="提交">
<!-- 用户点击按钮 -> onclick -> 如果onclick返回有效或未处理 onclick 则提交表单 -> onsubmit -> 如果 onsubmit 未处理或返回true，则提交，否则取消提交。
onsubmit 中返回 false 会引起取消表单提交，onclick 中返回 false 则会引起此次点击操作被判断为无效，则也就不会引起表单提交-->
<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>
<!--直接设置元素对象的事件属性 for事件源 event事件名-->
<script type="text/javascript" for="document" event="oncontextmenu">
//window.event.returnValue=false;
document.oncontextmenu=hideContext2();
alert("3");
</script>
</body>
</html>
本文深入探讨了JavaScript的基础知识，包括数据类型、控制语句、函数、数组操作、面向对象编程、DOM操作、事件处理、AJAX应用及正则表达式等内容，提供了丰富的示例代码，帮助读者全面掌握JavaScript编程技巧。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
