html+css+javascript笔记

来源：互联网发布：linux查看java安装路径编辑：程序博客网时间：2024/05/11 04:03
<link href="1.css" rel="stylesheet"/><script src="demo.js" type="text/javascript" ></script><!--%内容%-->   注释<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta name="keywords" content="java培训,php培训,c#培训" />     网页关键字最好是3-4个<meta http-equiv="refresh" content="3;url=http://www.bilibili.tv"/>   三秒后转到网页<meta http-equiv="refresh" content="1"/>  一秒刷新一次<title> %页面标题% </title><style type="text\css">  </style></head><frameset  rows=20%,70%,* ><frame  src="top.html" /><frameset cols=20%,*><frame src="left.html" /><frame name="center" src="center.html"/></frameset><frame src="foot.html"/></frameset><noframes></noframes><body>居中<h1 align="center"> %标题% </h1>    ,从h1到h6,字体由大到小--------------------------------------------------------------------------------------------<p>%段落%</p>--------------------------------------------------------------------------------------------<hr/>水平线标签<br/>line break<sub> %Subscript% </sub>(Subscript)<sup> %Superscripts% </sup>(Superscript)<b>加粗</b><i>斜体</i><u>下划线</u>--------------------------------------------------------------------------------------------<pre>保留代码格式</pre>(preformat)    tab与空格是有区别的,很难对齐--------------------------------------------------------------------------------------------<ol type="a">(ordered list)       默认类型为数字1,2,3      <li>ordered list</li>a.<li>ordered list</li>b.<li>ordered list</li>c.</ol>--------------------------------------------------------------------------------------------<ul type="square">(unordered list)    默认为原点,type可为square,disc,circle<li>unordered list</li><li>unordered list</li><li>unordered list</li></ul>--------------------------------------------------------------------------------------------<dl>(description list)<dt>游戏名称</dt><dd>星际争霸</dd><dd>红色警戒</dd><dt>部门名称</dt>列表显示<dd>技术部</dd><dd>培训部</dd></dl>--------------------------------------------------------------------------------------------Useful Character Entities:空格    non-breaking space <   less than        <>greater than    >&ampersand&￥yen¥ ©copyright&copy;®registered trademark&reg;"double quotation mark"'single quotation mark (apostrophe)'--------------------------------------------------------------------------------------------<embed src="1.mp3" hidden="true"></embed>   a container for an external application or interactive content (a plug-in)<marquee loop="infinite"  scrollamount="30" direction="right" behavior="alternate"> %横向飘动内容% </marquee>  来回移动"scroll"    向一个方向动"slide"     移动到一方,停止--------------------------------------------------------------------------------------------<a href="http://www.youtube.com">Youtube</a>file协议,默认协议,使用本地文件<a target="_blank" href="file:\\\examp;e\1.html">1.html</a>  "_self"<a href="mailTo:123456@qq.com">123456@qq.com</a>  邮箱协议<a name="top">顶部位置</a><br/>%内           容%%内           容%%内           容%<a name="centre">中间位置</a><br/>%内           容%%内           容%%内           容%<a href="#top">回到顶部位置</a><a href="#centre">回到中间位置</a>-------------------------------------------------------------------------------------------------------------------<img src="%path%" height=%height% width=%width% border=%边框% alt="%Specifies an alternate text for an image%"/>    -------------------------------------------------------------------------------------------------------------------   表格居中<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=10   align="center"   width=500 height=300><caption>表格标题</caption><thead>%内容%</thead> 可选,占格小<tbody><tr>(table row)<td rowspan="2">凡江</td><td>98</td>(standard cell)<td>优</td></tr>        <tr><td>100</td><td>优</td></tr>  <tr><th>居东东</th>(header cell)文字居中加粗<th>99</th><th>非常好</th></tr>       <tr align="center"><td>综合测评</td><td colspan="2">非常好</td></tr> </tbody>  默认存在<tfoot></tfoot>  可选,占格小</table><iframe src="http://www.bilibili.com" height=400 width=600>这是画中画标签<iframe>    浏览器不支持,就换看到这文字embed another document within the current HTML document-------------------------------------------------------------------------------------------------------------------<form>                           键            值输入名称:<input type="text" name="user" value=""/><br/>输入密码:<input type="password" name="password"/><br/>选择性别:<input type="radio" name="sex" value="nan"/>男      <input type="radio" name="sex" value="nv" checked="true "/>女<br/>默认被选中选择技术:<input type="checkbox" name="tech" value="java"/>JAVA <input type="checkbox" name="tech" value="html"/>HTML <input type="checkbox" name="tech" value="css"/>CSS <br/> 选择文件:<input type="file" name="file"/><br/>一个图片:<input type="image" src="11.jpg"/><br/>    具备提交效果隐藏组件:<input type="hidden" name="mykey" value="myvalue"/><br/>一个按钮:<input type="button" value="按钮" oneclick="alert('按钮')"/><br/>选择国家:<select name="country" ><option value="none">--选择国家--</option><option value="usa">--美国--</option><option value="uk">--英国--</option><option value="cn" >--中国--</option>   默认</select><br/>个人简介:<textarea name="text"> </textarea><br/><input type="submit" rows=3 cols=10 value="提交"/><input type="reset" value="重置"/></form>get提交:提交的信息都显示在地址栏中对于敏感的数据信息不安全提交的数据大小受地址栏限制,大小不能超过1kb将信息封装到了请求消息的请求行中post提交:提交的信息不显示地址栏中 对于敏感的数据信息安全 可以提交大数据 将信息封装到了请求体中服务器端的区别:如果将中文提交到tomcat服务器,服务器默认用iso8859-1进行解码会出现乱码通过iso8859-1进行编码,再用指定的中文码表解码即可这种方法对get和post提交都有效但是对于post方式提交的中文,还有另一种解决方法,就是直接使用服务端的一个对象,request对象的setCharacterEncoding方法直接设定指定的中文码表就可以将中文数据解析出来这个方法只对请求体中的数据进行解码综上,建议使用post和服务器端交互的三种方式:1.地址栏输入url地址 get2.超链接 get3.表单 get和post<form action="http://www.baidu.com" method="post"><table border=1 bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600><tr><th colspan=2>注册表单:</th></tr><tr><td>用户名称:</td><td><input type="text" name="user"/></td></tr><tr><td>输入密码:</td><td><input type="password" name="password"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="repassword"/></td></tr><tr><td>选择性别:</td><td><input type="radio" name="sex" value="nan"/>男<input type="radio" name="sex" value="nv"/>女</td></tr><tr><td>选择技术:</td><td><input type="checkbox" name="tech" value="java"/>JAVA<input type="checkbox" name="tech" value="html"/>html<input type="checkbox" name="tech" value="css"/>css</td></tr><tr><td>选择国家</td><td><select name="country"><option value="none" selected="selected">--选择国家--</option><option value="usa">美国</option><option value="uk">英国</option><option value="cn">中国</option></select></td></tr><tr><th colspan=2><input type="sumbit" value="提交"><input type="reset" value="重置"></th></tr></table></form>-------------------------------------------------------------------------------------------------------------------<base href="%指定网页所有超链接的目录%" target="%指定打开超链接的方式%"/></body>标签两大类:块级标签,结束后换行:div p dl table title 行内标签,结束后没换行:font span img input select a</html><html><head><style type="text/css">      直接在<style></style>中写css,只能用于本页中,复用性不强/*css的注释*/  (1)---------------------------------------------------------------------------------------------------选择器(selector)     id选择器>class选择器>标签选择器div{   (element selector) 标签选择器,对所有指定标签格式化,此处为divcolor:#F00;font-size:24px;display:block;    以块状表示该标签}.two{    class selector,要先给html标签指定对应的class属性值,格式化有指定class属性的标签background-color:#0F0;color:#F00;font-size:24px;}#one{id selector, 同一个页面中,相同id属性值建议只出现一次background-color:#FF9;color:#999;font-size:18px;}div span或.two span{     交集选择器.Selects all <span> elements inside <div> elementsbackground-color:#999;font-size:24px;}span,a{,Selects all <span> elements and all <a> elementsborder-style:solid;border-color:#F00;}*{,Select all elementstext-decoration:line-through;background-color:#CCC;}(2)---------------------------------------------------------------------------------------------伪类选择器(Pseudo-classes)a:hover 必须在 a:link 和 a:visited 之后,否则失效a:active 必须在 a:hover 之后a:link{color:#F00;}Selects all unvisited linksa:visited{color:#0F0;}Selects all visited linksa:hover{color:#00F;}Selects links on mouse overa:active{color:#FF0;font-size:24px;}Selects the active link,左键点下去未松手(3)---------------------------------------------------------------------------------------------body{background-color:#CCC;background-image:url(%path%);background-repeat:no-repeat;   设置背景图片重复属性background-position:100px 0px;  设置背景图片位置    }div{color:#F00;font-size:16px;line-height:30px;  Specify the space between the lines in two paragraphs using a pixel value.letter-spacing:10px;    increases or decreases the space between characters in a texttext-align:center;text-decoration:line-through;text-decoration:underline;text-transform:uppercase;width:100px;height:100px;border-style:solid;    设置边框的样式border-color:#F00;border-bottom-color:#0FF;border-top-width:100px;}table{border-collapse:collapse;   Set the collapsing borders model for a tableborder-spacing:20px;}(4)--------------------------------------------------------------------------------------------盒子模型主要用于操作内边距(padding)和外边距(margin)div{border-style:solid;width:100px;height:100px;padding-left:10px;padding-top:20px;margin-bottom:30px;margin-left:700px;}(5)----------------------------------------------------------------------------------------------div{border-style:solid;width:100px;height:100px;}.one{background-color:#F00;position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。 */top:380px;left:1000px;}.two{background-color:#0F0;position:relative; /* 相对定位,相对于当前初始位置 */top:10px;left:10px; }.three{background-color:#00F;position:absolute; /* 绝对定位,相对于一个页面的左上角而言的。 */top:200px;left:380px;}</style><style type="text/css">      @import url("%css文件路径%");   用<style></style>引入外部css文件</style>     (relation)<link href="1.css" rel="stylesheet"/>    用link标签引入外部css文件,推荐使用link与@import的区别:隶属:link属于HTML标签,@import完全是css提供的一种方式@import次数限制:只能引入31次css文件加载顺序:页面加载时,link引用的css会同时被加载,@import引用的css在页面下载完之后才被加载兼容性:@import是css2.1提出的,@import只有在IE5以上才被识别,而link无此问题使用DOM控制样式时的差别:当使用javascript控制DOM(document.styleSheet)改变样式时,只能用link,因为@import不能被dom控制</head><body><a style="color:#0F0 ; text-decoration="none" href="#">新闻标题1</a>   直接在html标签中使用style属性写css代码,复用性差,不推荐(1)------------------------------------------------------------------------------------<div id="one" class="two">这个是<span>第一个div标签</span>...</div><div id="one" class="two">这个是<span>第二个div标签</span>...</div><span>这个是一个span标签</span><br/><a class="two" href="#">新闻标题</a>(5)---------------------------------------------------------------------------------------------------<div class="one"><img src="../2.png"/></div><div class="two">two</div><div class="three">three</div></body></html><html><head><script src="demo.js" type="text/javascript" ></script> //引入外部JavaScript文件<script type="text/javascript"> 可以使用<script>进行描写//单行注释/*注释*/(-------------------------------------------------------------------------------/*javascript常用函数:                */alert("显示的内容");document.write("数据");(-----------------------------------------------------------------------------/*jvascript变量声明:后定义的变量会覆盖前面定义的同名变量申明变量可以省略var,但是不建议                                           */var a=10;a=true;var b="狗娃";var c=3.14;document.write("a="+a+"<br/>"+b+"<br/>"+c);----------------------------------------------------------------------------------/*javascript的数据类型:typeof %变量名%;                                                      */document.write(typeof 10);  //numberdocument.write(typeof 3.14);  //numberdocument.write(typeof 'a');  //string    字符串单引号双引号都可以,没有字符的概念document.write(typeof "abc");  //stringdocument.write(typeof true);  //booleandocument.write(typeof a);   //undefined,变量未定义------------------------------------------------------------------------------------//字符串---->整数  从开头开始转换,到非数字字符之前停止,转换不了返回NaN(not a number)var a="12";var b=parseInt(a);  // 12var a="12.34";var b=parseInt(a);  // 12var a="123abc123";var b=parseInt(a);  // 123   var a="abc123";var b=parseInt(a);  // NaNvar a="012";var b=parseInt(a);  // 12 ,去掉0var a="0x10";var b=parseInt(a);  // 16, 字符串被认为是16进制数的字符串----------------------------------------------------------------------------------------------//字符串---->小数var c=10;var d=parseFloat(a);  //  10  ,整数字符串转换依然是整数 -----------------------------------------------------------------------------------------------//isNaN()   判断是否 不是数字isNaN(123);  //false----------------------------------------------------------------------------------------------/*运算符+(加法,正数,连接符)    true为1,false为0/  整数chuc除整数为小数比较运算符   字符串可以与字符串比较     字符串还可以与数字进行比较,字符串会自动转换为数字再比较                            */document.write("190">"19");    //  true document.write("10大于字符串9吗？"+( 10 > "9")+"<br/>");   --------------------------------------------------------------------------------------------/* if语句    判断条件中,空字符串为false,非空字符串为false 变量指向null,为falseswitch语句   case的条件可以为  常量,变量,表达式for-in循环    遍历的是下标,而不是数组内的值*/var arr=[12,13,19,15,16];for(var index in arr){document.write(arr[index]);}for(var index = 0 ; index<arr.length ; index++){document.write(arr[index]);}function Person(id,name){this.id = id;this.name = name;}var p = new Person(110 , "张三");for(var property in p){//document.write(property+",");    //显示对象内的成员变量名document.write(p[property]+",");   //显示对象内的成员变量的值}---------------------------------------------------------------------------------------//with语句:存取对象属性和方法时不需要重复指定对象with(document){write("abc");}----------------------------------------------------------------------------------------------/*函数定义:1.定义形参时不能用var关键字声明变量2.接收没有返回值的函数,变量为undefined3.JavaScript中没有函数重载,后定义的函数会覆盖前面定义的函数4.在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数 传递数据的时候，先传到arguments数组中，然后再由arguments数组分配数据给形参*/function add(a, b){var sum = a+b;//document.write("和为:"+sum);return sum;} var result = add(1,2);(1)-------------------------------------------------------------------------------------//在文本框中输入月份,点击按钮查询function showDay(){var inputObj = document.getElementById("month");alert(inputObj.value);}---------------------------------------------------------------------------------------var str1 = new String("hello");var str2 = new String("hello");str1==str2;  //falsestr1.toString()==str2.toString();  //true//字符串对象常用方法"第五章".anchor("five");   //给"第五章"添加锚点(anchor)  返回 <a name="five"></a>"第五章".blink();   //给字符串添加blink闪烁标签,大部分浏览器已不支持,返回<blink>第五章</blink>"abc".charAt(1);   "abc".charCodeAt(1);   //返回对应字符的unicode编码"第六章".fontcolor("red"); //  返回<font color="red">第六章</font>"abchellohehehello".indexOf("hello"); //返回指定字符串第一次出现的索引值   .lastIndexOf("hello");"第五章".italics(); //   返回<i>第五章</i> ,斜体标签"传智播客".link("%链接%"); //  返回<a href="%链接%">传智播客</a>"明天我们讲xml".replace("xml","DOM编程"); // var str="啊-啊-啊-".split("-");  //返回切割后的字符串数组"abc".toUpperCase(); //转大写"ABC".toLowerCase();  //转小写var substrr = "ABC".substr(1,3);  //返回子串------------------------------------------------------------------------------------//Date对象常用方法var date = new Date(); //获取到当前的系统时间date.getTime();date.getFullYear();//获得年date.getMonth()+1;//获得月份-1date.getDate();//获得日date.getHours();//时date.getMinutes();//分date.getSeconds();//秒 date.toLocaleString();    //返回 "2015/1/23 上午11:40:53"(2)------------------------------------------------------------------------------------function getCurrentTime(){var date = new Date();var timeInfo =  date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();var  spanObj = document.getElementById("time");spanObj.innerHTML = timeInfo.fontcolor("red");}getCurrentTime();window.setInterval("getCurrentTime()",1000); // 调用指定代码,间隔指定毫秒执行----------------------------------------------------------------------------------------------创建Number对象:var num = new Number(2);var num = 10;常用方法:num.toString();  //返回十进制num.toString(%进制%); //返回指定进制num.toFixed( %小数保留位数% );   //会四舍五入  -------------------------------------------------------------------------------------------Math对象常用方法:Math.ceil( %小数% );Math.floor( %小数% );   //返回数字Math.random();//0<= 随机数 <1Math.round( %小数% );  //四舍五入---------------------------------------------------------------------------创建Array数组对象:var arr = new Array();//创建了长度为0的数组对象,一般开发时用var arr = new Array( %SIZE% );var arr = new Array(元素1,元素2,元素3......);var arr = [元素1,元素2,元素3......];JavaScript中数组长度可变,   一般不指定长度var arr = new Array();arr[100] = 10;  // arr.length为101var arr = new Array('A','B','C'......);//arr.length为3arr = ['A','B','C','D'];//arr.length为4常用方法:var arr1 = ["狗娃","狗剩","铁蛋"];var arr2 = ["永康","才厚"];arr1 = arr1.concat(arr2);//连接数组,返回新数组,原数组不改变var elements = arr1.join("+");  //用指定的分隔符连接每个数组元素,返回字符串   //返回 "狗娃+狗剩+铁蛋"arr1.shift();//删除first元素,并返回该元素   arr1.pop();  //删除last一个元素,并返回该元素arr1.push("永康"); // 将元素添加到数组尾端，返回数组的新长度值。arr1.reverse();//翻转数组元素var subArr = arr.slice(1,3);   //获取指定index的元素,同java中的subString();arr1 = [19,1,20,5];arr1.sort(sortNumber);  //  参数为方法名,非字符串function sortNumber(num1,num2){return num1-num2;}arr1.splice( %开始删除的index% , %要删除的个数% );   //删除指定元素arr1.splice( %开始删除的index% , %要删除的个数% , 元素1 ,元素2 .......);   //删除指定元素,并在末端插入元素---------------------------------------------------------------------------------------------------------------自定义对象:JavaScript中没有类的概念,只有函数可以创建对象function Person(){}方法一:使用无参的函数创建对象。function Person(){}var p = new Person(); //创建Person对象p.id=110;p.name="狗娃";p.say = function(){//只有p这个对象有这些属性和方法,p2对象没有alert(this.name);}document.write("id"+p.id+"name:"+p.name);p.say();       var p2 = new Person();方法二:使用带参的函数创建对象function Person(id,name){this.id = id;this.name = name;this.say = function(){ //属性方法被所有对象共享alert(name+"呵呵");}}var p = new Person(110,"狗剩");//创建对象p.say();方法三:使用Object()方法var p = new Object();p.id = 110;p.name = "铁蛋";方法四:使用字面量的方式创建var p = {id:110,name:"狗娃",say:function(){alert(this.name+"呵呵");}}document.write("编号："+ p.id+" 姓名："+ p.name);p.say();-------------------------------------------------------------------------------------------------/*prototype:prototype是函数的一个必有属性prototype的值是一个对象可以任意修改函数的prototype属性值一个对象会自动拥有prototype的成员属性和方法*///通过prototype添加属性和方法Array.prototype.getMax = function(){var max = this[0];for(var index = 1; index<this.length ; index++){if(this[index]>max){max = this[index];}}return max;}//var arr = new Array(12,4,17,9);var arr = [12,4,17,9];var max = arr.getMax();document.write("最大值："+ max+"<br/>");-----------------------------------------------------------------------------------------------window对象常用的方法：  //window对象可以省略  window.window obj = window.open(URL,name,specs,replace);//window.open( "ad.html" , "_blank" , "height=400px,width=400px,toolbar=no,location=no,top=200px" );window.resizeBy( +-%height% , +-%width% );  window.resizeTo( %height% , %width% );window.moveBy(+-%x%,+-%y%);window.moveTo(%x%,%y%);(num)id = window.setInterval(%方法名%,%毫秒%);  //每经过指定毫秒,执行一个方法//setInterval(function(){ alert("Hello"); }, 3000);//setInterval(alertFunc, 3000);window.clearInterval( %IntervalId% );window.setTimeout(%方法名%,%毫秒%);  //经过指定毫秒,执行一个方法---------------------------------------------------------------------------------------------------------------事件注册方式:方式一:直接在html标签上注册/*function ready(){alert("body标签加载完毕");}<body onload="ready()"></body>*/方式二:可以使用js代码找到对应的对象,再注册/*<body id="body"></body>var bodyObj = document.getElementById("body");bodyObj.onload = function(){alert("body标签加载完毕");}*/常用的事件：鼠标点击相关：onclick 鼠标左键单击对象时触发 ondblclick  鼠标左键双击对象时触发onmousedown 鼠标左键按下时触发onmouseup 鼠标左键释放时触发 //<span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>鼠标移动相关：onmouseout  当鼠标指针移出对象边界时触发。 onmousemove 当鼠标划过对象时触发。//<span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>焦点相关的：onblur 在对象失去输入焦点时触发。 //The onfocus event is most often used with <input>, <select>, and <a>.//The onfocus event is most often used with <input>, <select>, and <a>.onfocus 当对象获得焦点时触发。  (比如光标在文本框中)//用户名<input type="text" onfocus="showInfo()"  onblur="hideInfo()"  /> <span id="userName"></span>其他：onchange 当对象或选中区的内容改变时触发。 /*<select onchange="change()" ><option>广州</option><option>深圳</option><option>上海</option></select>*/onload 在浏览器完成对象的装载后立即触发。 onsubmit 当表单将要被提交时触发。 //运用于表单, onsubmit的事件的方法返回true,则提交,返回false,不提交 //<form action="test.html" mothod="get" onsubmit="return checkAll()"></form>-----------------------------------------------------------------------------------------------------------------location对象  (地址栏):(String)location.href; // Sets or returns the entire URL/*function download(){location.href="http://www.baidu.com";}<span onclick="download()">下载电影</span>点击就跳转到百度*/location.reload(); 刷新页面---------------------------------------------------------------------------------------------------------------screen对象:screen.availHeight获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 screen.availWidth获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 screen.height获取屏幕的垂直分辨率。 包括任务栏screen.width获取屏幕的水平分辨率。包括任务栏---------------------------------------------------------------------------------------一个html页面被加载时，浏览器会对html页面上的所有标签创建一个对应的对象进行描述，在浏览器上看到的信息就是这些html对象的属性信息document对象:var links = document.links;//Returns a collection of all <a> and <area> elements in the document that have a href attribute/*<a href="#">标题1</a><a href="#">标题2</a><a href="#">标题3</a><input type="button" onClick="writeUrl()" value="设置a标的地址"/>function writeUrl(){var links = document.links; 给<a>标签设置新的href值for(var i = 0; i<links.length ; i++){links[i].href = "http://www.itcast.cn";}}*/-----------------------------------------------------------------------------------------------------Finding HTML Elements:var obj = document.getElementById("id");var objArray = document.getElementsByName();var objArray = document.getElementsByTagName("name");var objArray = document.getElementsByClassName("name");obj.innerHTML //用于设置标签体的内容obj.value   //用于设置标签的value属性值(3)-----------------------------------------------------------------------------------------------function showImage(){var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。for(var i = 0 ; i<images.length ; i++){images[i].src = "33.jpg";images[i].width="100";images[i].height="100";}}-------------------------------------------------------------------------------------------------通过关系(父子关系、兄弟关系)找标签。obj.parentNode获取当前元素的父节点。var childArray = obj.childNodes获取当前元素的所有下一级子元素(包含文本#text和注释#comment和标签对象)obj.firstChild获取当前节点的第一个子节点。obj.lastChild获取当前节点的最后一个子节点。obj.nextSibling获取当前节点的下一个节点。（兄节点）obj.previousSibling获取当前节点的上一个节点。（弟节点）可以通过标签的类型(obj.nodeType)进行判断筛选：文本节点的类型值： 3注释的节点类型值： 8标签节点的类型值： 1----------------------------------------------------------------------------------------------创建字节入插入节点、设置节点的属性。document.createElement("标签名");创建新元素节点obj.setAttribute(属性名, 属性值)设置属性obj.appendChild(e)添加元素到obj中最后的位置obj.insertBefore(newobj , child);  添加到obj中,child之前 //注意:obj必须为child的直接父节点   obj.removeChild(childObj);   删除指定的子节点var num  = 1;function add(){var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。//设置节点的属性inputNode.setAttribute("type","button");inputNode.setAttribute("value","按钮"+num);num++;var bodyNode = document.getElementsByTagName("body")[0];bodyNode.appendChild(inputNode); // 添加子节点。}(4)------------------------------------------------------------------------------------------------function add(){var trObj = document.createElement("tr");var tdObj1 = document.createElement("td");var tdObj2 = document.createElement("td");tdObj1.innerHTML = "<input type='file' />";tdObj2.innerHTML = "<a href='#' onclick='del(this)'>删除文件</a>";trObj.appendChild(tdObj1);trObj.appendChild(tdObj2);var tbodyObj = document.getElementsByTagName("tbody")[0];var lasttr = document.getElementById("lasttr");tbodyObj.insertBefore(trObj,lasttr);}function del(thisNode){var trObj = thisNode.parentNode.parentNode;var tbodyObj = document.getElementsByTagName("tbody")[0];tbodyObj.removeChild(trObj);}(5)-------------------------------------------------------------------------------------------function showCity(){//维护一个二维数组存储省份对应的城市var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];//获取省份对应的节点var provinceNode = document.getElementById("province");//获取省份选中的选项var selectIndex =  provinceNode.selectedIndex;//获取对应的城市var  cityDatas = citys[selectIndex];//找到city节点var cityNode = document.getElementById("city");/*//先清空city框所有optionvar children = cityNode.childNodes;for(var i = 1; i<children.length ; ){cityNode.removeChild(children[i]);}*///设置options的个数。cityNode.options.length = 1 ;//遍历对应的所有城市然后创建对应的option添加到city上。for(var index = 0; index<cityDatas.length ; index++){var option = document.createElement("option");option.innerHTML = cityDatas[index];cityNode.appendChild(option);}}---------------------------------------------------------------------------//<span id="code"></span>var spanNode = document.getElementById("code");spanNode.innerHTML = "test";spanNode.style.fontSize ="24px";spanNode.style.color = "red";spanNode.style.backgroundColor="gray";spanNode.style.textDecoration = "line-through";-----------------------------------------------------------------------------正则表达式的创建方式:方式1:var regex = /正则表达式/模式;//var regex = /\b[a-z]{3}\b/i;方式2:var regex = new RegExp("正则表达式",模式);常用方法:regex.test(str);//使用正则对象匹配字符串,部分符合则为true,var str = regex.exec();//根据正则表达式去查找字符串复合规则的内容Regular Expression Modifiers:iPerform case-insensitive matchinggPerform a global match (find all matches rather than stopping after the first match)mPerform multiline matchingvar str  ="da jia hao hao xue xi a";var reg = /\b[a-z]{3}\b/gi;var line ="";while((line = reg.exec(str))!=null){document.write(line+"<br/>")}</script></head><body>(1)-------------------------------------------------------------------------------------月份:<input id="month" type="text" /><input type="button" value="查询" oneclick="showDay()" />(2)-------------------------------------------------------------------------------------当前系统时间：<span id="time"></span>(3)----------------------------------------------------------------------------------<img src="" /><img src="" /><img src="" /><input type="button" onclick="showImage()" value="显示图片"/>(4)-----------------------------------------------------------------------------------------<table><tr><td><input type="file" /></td><td><a href="#" onclick="del(this)">删除文件</a></td></tr><tr id="lasttr"><td><input type="button"  value="添加" onclick="add()" /></td></tr></table>(5)--------------------------------------------------------------------------------------------省份<select id="province" onchange="showCity()"><option>省份</option><option>广东</option><option>湖南</option><option>广西</option></select>城市<select id="city"><option>城市</option></select></body></html>
0 0