Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 78533
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（30）—— JavaScript回顾5

分类： HTML5

2016-11-01 14:56:45

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（30）—— JavaScript回顾5

一、查找

第一种方式：依据id查找

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

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  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.           
  26.         <a href="javascript:;" id="a1" onclick="f1();">click mea><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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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.   
  26.         <a id="a1" href="javascript:;" onclick="f1();">如何学好javaa>  
  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?在CODE上查看代码片派生到我的代码片
  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属性指向的地址发请求

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

禁止的方式

阅读(787) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（29）—— JavaScript回顾4

下一篇：HTML5移动开发之路（31）—— JavaScript回顾6

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6