HTML5移动开发之路(30)—— JavaScript回顾5

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5移动开发之路(30)—— JavaScript回顾5相关的知识,希望对你有一定的参考价值。

本文为 兄弟连IT教育 机构官方 html5培训 教程,主要介绍:HTML5移动开发之路(30)—— javascript回顾5

一、查找

第一种方式:依据id查找

var obj = document.getElementById(id);   //document是HTMLDocument的实例

 

[html] view plain copy

 

 print?技术分享技术分享

  1. <html>  

  2.     <head>  

  3.         <script>  

  4.             function f1(){  

  5.                 var obj = document.getElementById(‘a1‘); //双引号,单引号都可以  

  6.                 //innerHTML属性:可以访问或者设置节点的html的属性值  

  7.                 //alert(obj.innerHTML);   

  8.                 obj.innerHTML = "为什么点我"; //双引号单引号都可以  

  9.             }  

  10.             function f2(){  

  11.                 var obj = document.getElementById(‘d1‘);  

  12.                 alert(obj.innerHTML);  

  13.             }  

  14.             function f3(){  

  15.                 var obj = document.getElementById(‘username‘);  

  16.                 //value属性:可以获取文本输入框的值和改变值  

  17.                 alert(obj.value); //获得值  

  18.                 obj.value = ‘abc‘;//改变值  

  19.             }  

  20.               

  21.         </script>  

  22.     </head>  

  23.   

  24.     <body style="font-size:30px;font-style:italic;">  

  25.         <!--javascript:; 表示是一个空白的js语句-->  

  26.         <href="javascript:;" id="a1" onclick="f1();">click me</a><br/>  

  27.         <div id="d1" ><span>你好</span></div><br/>  

  28.         <input type="text" id="username" name="username"/><br/>  

  29.         <input type="button" value="点我吧" onclick="f3();"/>  

  30.     </body>  

  31. </html>   

第二种方式

 

var arr = node.getElementsByTagName(‘tagName‘);

 

[html] view plain copy

 

 print?技术分享技术分享

  1. <html>  

  2.     <head>  

  3.         <style>  

  4.             ul{  

  5.                 list-style-type:none;     

  6.             }  

  7.             ul li{  

  8.                 float:left;  

  9.                 border:1px solid black;  

  10.                 margin-left:10px;  

  11.                 width:100px;  

  12.                 height:40px;  

  13.                 background-color:red;  

  14.                 cursor:pointer;               

  15.             }  

  16.             .selected{  

  17.                 background-color:#ff88ee;  

  18.             }  

  19.         </style>  

  20.         <script src="myjs.js"></script>  

  21.         <script>  

  22.             function doAction(index){  

  23.                 var arr = $(‘u1‘).getElementsByTagName(‘li‘);  

  24.                 for(i=0; i<arr.length; i++){  

  25.                     arr[i].className = ‘‘;  

  26.                 }  

  27.                 var obj = $(‘l‘+index);  

  28.                 obj.className = ‘selected‘;  

  29.             }  

  30.         </script>  

  31.     </head>  

  32.     <body style="font-size:30px;">  

  33.         <ul id="u1">  

  34.             <li onmouseover="doAction(1);" id="l1">选项一</li>  

  35.             <li onmouseover="doAction(2);" id="l2">选项二</li>  

  36.             <li onmouseover="doAction(3);" id="l3">选项三</li>  

  37.         </ul>  

  38.     </body>  

  39. </html>   

第三种方式

 

使用遍历的方式(浏览器兼容性差)

parentNode

previousSibling 前一个兄弟

nextSibling 下一个兄弟

childNodes 所有子节点

firstChild 前一个子节点

lastChild 后一个子节点

遍历的方式因为有浏览器的兼容性问题,尽量少用

二、创建

document.createElement(tagName);            //tagName表示标记名

三、添加

node.appendChild(obj);  //作为最后一个孩子添加

node.insertBefore(obj, refNode);  //添加到refNode的前面

node.replaceChild(obj, refNode);  //替换refNode

四、删除

node.removeChild(obj);

 

[html] view plain copy

 

 print?技术分享技术分享

  1. <html>  

  2.     <head>  

  3.         <script src="myjs.js"></script>  

  4.         <script>  

  5.             function f1(){  

  6.                 var obj = document.createElement(‘div‘);      

  7.                 obj.innerHTML = ‘兴趣最重要...‘;  

  8.                 obj.className = ‘s1‘;  

  9.             //  $(‘d1‘).appendChild(obj);     

  10.             //  $(‘d1‘).insertBefore(obj, $(‘a1‘));   

  11.             //  $(‘d1‘).replaceChild(obj, $(‘a1‘));  

  12.                 $(‘d1‘).removeChild($(‘a1‘));  

  13.             }  

  14.         </script>  

  15.         <style>  

  16.             .s1{  

  17.                 width:200px;  

  18.                 height:100px;  

  19.                 background-color:red;  

  20.             }  

  21.         </style>  

  22.     </head>  

  23.           

  24.     <body style="font-size:30px;" id="d1">  

  25. <!--         <a href="javascript:alert(‘hello‘);">如何学好java</a>  -->  

  26.         <id="a1" href="javascript:;" onclick="f1();">如何学好java</a>  

  27.     </body>  

  28. </html>  

 

五、样式 

第一种方式:修改节点的className属性

比如:var obj = document.getElementById(‘id1‘);    obj.className = ‘s1‘; //使用s1样式  ****见例子:表单验证****

第二种方式:修改节点的style属性

1.必须是内联样式

2.如果要修改的样式属性名包括"-",比如background-color,则要按照如下方式修改node.style.backgroundColor = ‘red‘;

 

[html] view plain copy

 

 print?技术分享技术分享

  1. <html>  

  2.     <head>  

  3.         <style>  

  4.             #d1{  

  5.                 width:80px;  

  6.                 height:80px;  

  7.                 background-color:blue;  

  8.                 position:relative;  

  9.             }  

  10.         </style>  

  11.         <script src="myjs.js"></script>  

  12.         <script>  

  13.             function f1(){  

  14.                 var v1 = parseInt($(‘d1‘).style.left);  

  15.                 $(‘d1‘).style.left = v1 + 50 + ‘px‘;  

  16.             }  

  17.         </script>  

  18.     </head>  

  19.     <body>  

  20.         <div id="d1" style="left:10px;"></div>  

  21.         <input type="button" value="click me"  

  22.         onclick="f1();"/>  

  23.     </body>  

  24. </html>  


 

如何禁止浏览器的两种默认行为:

点击连接,浏览器会向href属性指向的地址发请求

点击表单提交按钮,浏览器会提交表单

禁止的方式

<a href="" false;"></a>

<from onsubmint="return false;"></form>


以上是关于HTML5移动开发之路(30)—— JavaScript回顾5的主要内容,如果未能解决你的问题,请参考以下文章

HTML5移动开发之路(24)—— PhoneGap Android开发环境搭建

HTML5移动开发之路(23)—— jQuery Mobile入门

HTML5移动开发之路(27)—— JavaScript回顾2

HTML5移动开发之路(28)—— JavaScript回顾3

HTML5移动开发之路(29)—— JavaScript回顾4

HTML5技术应用化探索 | APICloud 北京站