这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一些在 Jvascript 学习实践的实例代码,需要的朋友可以参考下
一个自定义的循环遍历元素文本内容的函数
该函数可以确保在 html 和 XML DOM 文档中很好的工作,使用该函数,就能够获取任何元素文本内容了
循环遍历元素文本内容
- <html>
- <head>
- <meta http-equiv="Content-type" content="text/html;charset=gb2312">
- <title>
- 一个循环遍历元素文本内容的函数
- </title>
- </head>
- <body>
- <div id="test">
- <ul>
- <li>
- <a href="#">
- a标签1
- </a>
- </li>
- <li>
- <a href="#">
- a标签2
- </a>
- </li>
- <li>
- <a href="#">
- a标签3
- </a>
- </li>
- <li>
- <a href="#">
- a标签4
- </a>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- < !--
- function text(e) {
- //如果传入的是元素,则继续遍历其子元素,否则假定他是一个数组
- e = e.childNodes || e;
- var t = "";
- //遍历所有的子节点
- for (var i = 0; i < e.length; i++) {
- if (e[i].nodeType != 1) { //如果不是元素节点,则追加其文本值
- t += e[i].nodeValue + "<br>";
- } else {
- t += text(e[i].childNodes); //否则,继续递归调用
- }
- }
- return t;
- }
- var obj = document.getElementById('test');
- var text = text(obj);
- document.write(text);
- //-->
- </script>
- </body>
- </html>
通常,我们使用 previousSibling,nextSibling,firstChild,lastChild 等等来遍历 DOM 文档,但是,往往会将文本节点也遍历出来,一般情况下,我们不大需要遍历文本节点。所以,这里,我们可以使用自定义的几个函数将 previousSibling,nextSibling,firstChild,lastChild 封装起来,跳过遍历到的文本节点,而直接取得元素节点
查找节点的几个替代函数
- <html>
- <head>
- <meta http-equiv="Content-type" content="text/html;charset=gb2312">
- <title>
- previousSibling,nextSibling,firstChild,lastChild和parentNode的替代函数
- </title>
- <script type="text/javascript">
- < !--
- //查找当前元素的前一个兄弟元素节点(注意是元素节点而不是文本节点)
- function prev(o) {
- do {
- o = o.previousSibling;
- } while ( o . nodeType != 1 && o ); //如果前一个兄弟节点是元素节点则跳出循环
- return o;
- }
- //查找当前元素的下一个兄弟元素节点(注意是元素节点而不是文本节点)
- function next(o) {
- do {
- o = o.nextSibling;
- } while ( o . nodeType != 1 && o ); //如果下一个兄弟节点是元素节点则跳出循环
- return o;
- }
- //查找元素的第一个子元素的函数
- function first(o) {
- o = o.firstChild;
- return o.nodeType != 1 && o ? next(o) : o; //如果第一个子节点是元素节点,则返回,否则调用next函数,查找下一个兄弟元素
- }
- //查找元素的最后一个子元素的函数
- function last(o) {
- o = o.lastChild;
- return o.nodeType != 1 && o ? prev(o) : o; //如果最后一个子节点是元素节点,则返回,否则调用prev函数,查找前一个兄弟元素
- }
- //-->
- </script>
- </head>
- <body>
- <div id="test">
- <p>
- 大部分的web开发者在大多数情况下仅仅需要遍历DOM元素而非相邻的文本节点
- </p>
- <p>
- 所以,我们可以自己定义几个函数用于替代
- <b>
- previousSibling,nextSibling,firstChild,lastChild和parentNode
- </b>
- </p>
- <ul>
- <li>
- <a href="#">
- a标签1
- </a>
- </li>
- <li>
- <a href="#">
- a标签2
- </a>
- </li>
- <li>
- <a href="#">
- a标签3
- </a>
- </li>
- <li>
- <a href="#">
- a标签4
- </a>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- < !--
- var obj = document.getElementById('test');
- document.write("使用nextSibling返回的div元素的下一个兄弟节点,①节点类型:" + obj.nextSibling.nodeType + "②节点名称:" + obj.nextSibling.nodeName + "<br>");
- document.write("使用自定义的next函数返回的div元素的下一个兄弟元素,①节点类型:" + next(obj).nodeType + "②节点名称:" + next(obj).nodeName + "<br>");
- document.write("使用firstChild返回的div元素的第一个子节点,①节点类型:" + obj.firstChild.nodeType + "②节点名称:" + obj.firstChild.nodeName + "<br>");
- document.write("使用自定义的first函数返回的div元素的第一个子元素,①节点类型:" + first(obj).nodeType + "②节点名称:" + first(obj).nodeName + "<br>");
- document.write("使用lastChild返回的div元素的最后一个子节点,①节点类型:" + obj.lastChild.nodeType + "②节点名称:" + obj.lastChild.nodeName + "<br>");
- document.write("使用自定义的last函数返回的div元素的最后一个子元素,①节点类型:" + last(obj).nodeType + "②节点名称:" + last(obj).nodeName + "<br>");
- //-->
- </script>
- </body>
- </html>
获取表单对象的 7 种方式
多种获取表单对象的方式
- <html>
- <head>
- <title>
- 获取表单对象的 7 种方式
- </title>
- </head>
- <body>
- <form name="myform">
- <input type="text" value="获取表单对象的 7 种方式" name="test">
- </form>
- <script type="text/javascript">
- < !--document.write("方式1:" + document.myform.test.value + "<br>"); //经常用
- document.write("方式2:" + document.forms[0].test.value + "<br>"); //通过下标索引访问,较常用
- document.write("方式3:" + document.forms['myform'].test.value + "<br>"); //方式3和方式4可以切换的,这是源于js访问对象的方式可以采用数组形式来访问的缘故
- document.write("方式4:" + document.forms.myform.test.value + "<br>");
- document.write("方式5:" + document['myform'].test.value + "<br>");
- document.write("方式6:" + document.forms.item(0).test.value + "<br>"); //注意 是item(),不是item[]
- document.write("方式7:" + document.forms.item('myform').test.value + "<br>");
- //-->
- </script>
- </body>
- </html>
使用 javascript 实现全选,反选,全不选的功能
- <html>
- <head>
- <title>
- 全选,反选,全不选
- </title>
- </head>
- <body>
- <script type="text/javascript">
- < !--
- for (var i = 0; i < 20; i++) {
- document.write('测试' + (i + 1) + '<input type="checkbox" name="sel[]"><br>');
- }
- var o = document.getElementsByName("sel[]"); //全局变量
- //全选
- function selall() {
- for (var i = 0; i < o.length; i++) {
- o[i].checked = "true";
- }
- }
- //全不选
- function noselall() {
- for (var i = 0; i < o.length; i++) {
- o[i].checked = "";
- }
- }
- //反选
- function invert() {
- for (var i = 0; i < o.length; i++) {
- if (o[i].checked == true) {
- o[i].checked = "";
- } else {
- o[i].checked = true;
- }
- }
- }
- //-->
- </script>
- <a href="javascript:selall(this)">
- 全选
- </a>
- <a href="javascript:noselall(this)">
- 全不选
- </a>
- <a href="javascript:invert(this)">
- 反选
- </a>
- </body>
- </html>
鼠标移上去,显示子栏目列表
- 显示隐藏菜单 < html > <head > <title > 操作菜单 < /title>
- <style>
- li{
- list-style:none;
- }
- #menu ul li{
- float:left;
- width:75px;
- height:30px;
- text-align:center;
- }
- #submenu{
- clear:both;
- }
- #submenu ul li{
- background:#888;
- width:236px;
- }
- #submenu ul li a{
- color:#fff;
- text-decoration:none;
- }
- .highlight{
- background:#888;
- }
- </style > </head>
- <body>
- <div id="menu">
- <ul>
- <li onmouseover="change(0)" class="highlight">Menu1</li > <li onmouseover = "change(1)" > Menu2 < /li>
- <li onmouseover="change(2)">Menu3</li > </ul>
- </div > <div id = "submenu" > <ul > <li > <a href = "#" > 子菜单1 < /a><br>
- <a href="#">子菜单1</a > <br > <a href = "#" > 子菜单1 < /a><br>
- <a href="#">子菜单1</a > <br > </li>
- <li style="display:none">
- <a href="#">子菜单2</a > <br > <a href = "#" > 子菜单2 < /a><br>
- <a href="#">子菜单2</a > <br > <a href = "#" > 子菜单2 < /a><br>
- </li > <li style = "display:none" > <a href = "#" > 子菜单3 < /a><br>
- <a href="#">子菜单3</a > <br > <a href = "#" > 子菜单3 < /a><br>
- <a href="#">子菜单3</a > <br > </li>
- </ul > </div>
- <script type="text/javascript ">
- <!--
- var menu=document.getElementById("menu ").getElementsByTagName("li ");
- var submenu=document.getElementById('submenu').getElementsByTagName('li');
- function change(num){
- for (var i=0;i<menu.length;i++){
- if(i==num){
- menu[num].className="highlight ";
- submenu[num].style.display="block ";
- }else{
- menu[i].className="";
- submenu[i].style.display="none ";
- }
- }
- }
- //-->
- </script>
- </body>
- </html>
- "
通过 for...in 循环语句,可以遍历出某个对象中的属性
比如,我们想要看下 document 对象中的所有属性名和属性值,可以使用如下所示的代码:
- View Code
- < html > <head > <title > 遍历document文档对象的所有属性 < /title>
- </head > <body > <script type = "text/javascript" > <!--
- for (var pro in document) {
- document.write("document." + pro + "=" + document[pro] + "<br>");
- }
- //-->
- < /script>
- </body > </html>
- /
同理,我们也可以用以上方法遍历 window 对象,location 对象,history 对象等的属性,当然,也可以用来遍历自定义对象的属性
来源: http://www.phperz.com/article/17/0723/281818.html