1.Form的onsubmit
elemForm.submit();不会触发表单的onsubmit事件
2.根据name属性获取html页面对象,这个也适用于ID ,注意大小写,JAVASCRIPT 对大小写敏感
<!DOCTYPE HTML> <html> <body> <form > <input type="text" name="aaa" value="xxx"> </form> </body> <script type="text/javascript" > alert(document.all.aaa.value); </script> </html>
javaScript中的css改变
document.getElementById("p2").style.color="blue";
3.JS常见事件处理
事件就是用户或浏览器自身执行的某种动作,如click,laod,mouseover都是事件的名称。
事件流描述的是从页面中接收事件的顺序。
事件处理程序就是对事件作出响应的函数。事件处理程序的名字以“on”开头,
如click事件对应的事件处理程序的名称为onclick。为事件指定处理程序的方式有多种,
如:HTML事件处理程序、DMO0级事件处理程序、
DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。
当产生一个事件时,就会产生一个事件流,这个留从父组件开始向子组件流去,这个过程叫做捕获阶段。
当找到发出事件的子组件时叫做目标阶段
然后事件流会从目标组件反向流向父组件,这个过程叫冒泡阶段。
三个阶段都可以相应事件。
(1)html事件处理程序
即:将事件处理程序,写在相应的html标签中。
eg:
<input type="button" value="click me" onclick="alert("hello")" />
缺点:①存在一个时间差,当用户在html元素一出现在页面上就去触发相应的事件时,
事件的处理程序可能还不具备执行条件(比如说调用的函数还木有被解析),
就会引发错误。eg:
<input type="button" value="click me" onclick="message()" />
<script type="text/javascript">
function message(){
alert("hello world");
}
</script>
因为调用的函数处于按钮的下方,如果在message函数被加载之前就点击了按钮就会引发错误。
②html和js代码耦合度太高,如果要改变事件处理程序,就要改动两个地方:html代码和javascript代码。
(2)DMO0级事件处理程序
eg:
var btn=document.getElementById("myBtn");
btn.onclick=function(){alert(this.id)};
注意:如果这段代码位于按钮之后,就有可能在一点时间内怎么点击都木有反应,
因为在这段代码运行以前不会指定事件处理程序。
DMO0级事件处理程序被认为是元素的方法,换句话说,
DMO0级事件处理程序是在元素的作用域中运行的,
所以程序中的this引用当前元素。可以在事件处理程序中通过this访问元素的任何属性和方法。
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
也可删除指定的事件处理程序,只要将事件处理程序的属性设置为null就Ok了。
eg:
btn.onclick=null;将处理程序设置为null以后,再点击按钮不会发生任何动作。
(3)DOM2级事件处理程序
DOM2级事件定义了两个方法,用于指定和删除事件处理程序。
这两个操作分别为:addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。
他们要接受3个参数,分别为:要处理的事件名,处理函数,布尔值。
最后的布尔值参数如果为ture,表示在捕获阶段处理程序,如果为false,表示在冒泡阶段调用事件处理程序。
例如在按钮上为click添加事件处理程序,可以用下面的代码:
var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});
这里添加的事件处理程序也是依附于元素的的作用域
使用DOM2事件处理程序的优点是:可以为同一个元素添加多个事件处理程序。
例:var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);
结果:先显示id,后显示hello world。
通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。
移除时使用的参数与添加事件处理程序的参数相同。
另:通过addEventListner添加的匿名函数无法删除。
(4)IE事件处理程序。
IE添加和删除事件处理程序的函数分别为:attachEvent()和detachEvent();
这两个函数接收相同的两个参数:事件处理程序名与事件处理函数。
由于IE只支持事件冒泡,所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。
例如:var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});
IE在使用attachEvent方法的情况下,事件处理程序的作用域为全局作用域,
因此this等于window。(在编写跨浏览器的代码时,记住这一点非常重要)。
与addEventListner类似,attachEvent()方法也可以用来为一个元素添加多个事件处理程序;
eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});
值得注意的是:这些事件的处理程序是按逆序触发的,也就是说,先弹出hello world 再弹出clicked。
detach()使用方法略。
(5)跨浏览器的事件处理程序
为了以跨浏览器的方式处理事件,主要可以使用两个方法:
①使用能隔离浏览器差异的js库。
②自己编写最适合的事件处理方法。这里要用到能力检测,
即:识别浏览器的能力。要保证代码能在大多数浏览器下一致的运行,只须关注冒泡阶段。
代码步骤如下:
首先要创建的方法是addHandler(用于处理跨浏览器的兼容性问题,这里没有给出具体代码),
它的职责是视情况判定使用DOM0级方法,DOM2级方法,IE方法来添加事件。
addHandler接收3个参数:要操作的元素、事件名称、事件处理程序函数。
这个方法属于一个名叫EventUtil的对象。这里使用这个对象来处理浏览器之间的差异。
与addHandler对应的方法是removeHandler(),它也接受相同的参数。
这个事件的职责是移除之前添加的事件处理程序。
不论事件是以什么方式添加到对象中的,如果其他方法程序无效,则默认使用DOM0级方法。
使用EventUtil的方法如下:var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题,
例如IE中作用域的问题,但是使用它们添加和移除事件处理程序还是足够了。
(6)onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
navigator.cookieEnabled==true 检测浏览器是否启用cookie
(7)onmouseover 和 onmouseout 事件 onmousedown、onmouseup 以及 onclick onfocus
4.JS输出html
<!DOCTYPE HTML> <html> <body> <form name="myform"> <input type="button" id="myBtn" value="xxx"> </form> <div id="divs"></div> </body> <script type="text/javascript" > //var form=document.forms[0];//获取form表单方法一 var form=document.forms[\\\’myform\\\’];//获取form表单方法二 for(var i=0;i<form.length;i ){//获取表单内部组件 alert(form[i].value); } //写出html document.write("<input type=\\\’button\\\’ id=\\\’myBtn2\\\’ value=\\\’qqq\\\’>"); //下面2方法,innerHTML属性只有根据ID获取到的对象有此属性 document.all.divs.innerHTML="<input type=\\\’button\\\’ id=\\\’myBtn3\\\’ value=\\\’555\\\’>"; document.getElementById("divs").innerHTML="My First JavaScript"; //代码折行 document.write("Hello World!"); </script> </html>
5.JS数据类型
除了基本类型外,值得注意的类型有:
对象:对象可以如下生成,同时 var carname=new String(); 使用new的方式也可以生成对象
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };
使用
name=person.lastname; name=person["lastname"];
通过new出来的对象可以赋给属性
var carname=new Object(); carname.name=\\\’xqqqq\\\’; alert(carname.name);
空以及不存在:
unifined,null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
6、JS对象(属性,方法)
JS中同样纯在break、跳出循环
JS中也有try{}catch{}
try { //在这里运行代码 } catch(err) { //在这里处理错误 }
try{ alert(aa); }catch(e){ alert(e.message);//aa is not defined }
JavaScript中的throw命令事实上可以抛出任何对象, 并且我们可以在catch接受到此对象。例如: try { throw new Date(); // 抛出当前时间对象 } catch (e) { alert(e.toLocaleString()); // 使用本地格式显示当前时间 } <script language="javascript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.message); alert(e.description) alert(e.number) alert(e.name) throw new Error(10,"asdasdasd") } </script>
7.JS节点,父子关系
<script type="text/javascript" > //创建一个组件,p为组件 var p=document.createElement("p"); p.id=\\\’p1\\\’; //文本是一个TextNode var node =document.createTextNode("xxxxxxxxx"); //向p组件追加节点 p.appendChild(node); //同时,组件可以被追加到其他组件中 document.all.divs.appendChild(p); 同理,可追加即可移除 var child=document.getElementById("p1"); document.all.divs.removeChild(child); </script>
8.JS 正则表达式的使用
//正则表达式对象,拥有的方法是test,exec,complie //test检索字符串中的指定值。返回 true 或 false。 //exec检索字符串中的指定值。返回被找到的值。 //如果没有发现匹配,则返回 null。 var pattern = new RegExp(\\\’he\\\’); alert(pattern.test("the"));//输出true,包含he alert(pattern.exec(\\\’the\\\’));//输出he //查找字符串中所有此字符的时候 var pattern2=new RegExp(\\\’e\\\’,\\\’g\\\’); var result=""; do{ result=pattern2.exec(\\\’wewewerwerwerew\\\’); alert(result); }while(result!=null) //complie改变检索条件 var patt1=new RegExp("e"); document.write(patt1.test(" life are free")); patt1.compile("x"); document.write(patt1.test("life are free")); //输出true 和 false
正则表达式:
1.匹配正整数:/^[0-9]*[1-9][0-9]*$/
2.匹配非负整数(正整数 0):/^d $/
3.匹配中文:/^[u4e00-u9fa5]/
4.匹配Email:/^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*/
5.匹配网址URL:/^(f|ht){1}(tp|tps)://([w-] .) [w-] (/[w- ./?%&=]*)?/
6.匹配字母开头,5-16字符,字母数字下划线:/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
7.匹配数字,字母,下划线,中文:/^[u4e00-u9fa5A-Za-z0-9_] $/
8.匹配中国邮政编码:/^[1-9]d{5}$/
9.匹配IP地址:/b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)b/
10.匹配中国大陆身份证:/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}(d|x|X)$/
var str = "abc@126.com"; var preg = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*/; //匹配Email if(preg.test(str)){ var msg = "匹配成功"; }else{ var msg = "匹配失败!"; } alert(msg);
9.JS window
Window 对象
所有浏览器都支持window对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
获取window长宽
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
window.open() – 打开新窗口 window.close() – 关闭当前窗口 window.moveTo() – 移动当前窗口 window.resizeTo() – 调整当前窗口的尺寸
10.JS location
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
加载新的页面:
window.location.assign("http://www.w3school.com.cn")
history.back() – 与在浏览器点击后退按钮相同
history.forward() – 与在浏览器中点击按钮向前相同
更多关于云服务器,域名注册,虚拟主机的问题,请访问西部数码官网:www.west.cn