HTML5移动开发之路（30）—— JavaScript回顾5

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

一、查找

第一种方式：依据id查找

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

[html] view plain copy

print?

<html>

<head>

<script>

function f1(){

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

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

//alert(obj.innerHTML);

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

}

function f2(){

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

alert(obj.innerHTML);

}

function f3(){

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

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

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

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

}

</script>

</head>

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



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

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

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

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

</body>

</html>

第二种方式

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

[html] view plain copy

print?

<html>

<head>

<style>

ul{

list-style-type:none;

}

ul li{

float:left;

border:1px solid black;

margin-left:10px;

width:100px;

height:40px;

background-color:red;

cursor:pointer;

}

.selected{

background-color:#ff88ee;

}

</style>

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

<script>

function doAction(index){

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

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

arr[i].className = ‘‘;

}

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

obj.className = ‘selected‘;

}

</script>

</head>

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

<ul id="u1">

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

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

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

</ul>

</body>

</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?

<html>

<head>

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

<script>

function f1(){

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

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

obj.className = ‘s1‘;

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

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

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

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

}

</script>

<style>

.s1{

width:200px;

height:100px;

background-color:red;

}

</style>

</head>

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



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

</body>

</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?

<html>

<head>

<style>

#d1{

width:80px;

height:80px;

background-color:blue;

position:relative;

}

</style>

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

<script>

function f1(){

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

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

}

</script>

</head>

<body>

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

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

onclick="f1();"/>

</body>

</html>

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

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

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

禁止的方式

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

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

时间： 2024-12-20 19:42:36

HTML5移动开发之路（30）—— JavaScript回顾5的相关文章

HTML5移动开发之路（29）—— JavaScript回顾4

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(29)-- JavaScript回顾4 一.变量的作用域 JavaScript脚本的执行过程分为两个阶段: 第一阶段,js引擎()先扫描整个javascript代码.当碰到<script>时,会先创建一个全局的活动对象,将<script>中出现的变量的声明,函数的定义保存在活动对象里面.如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面. 第二阶段

HTML5移动开发之路（27）—— JavaScript回顾2

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(27)-- JavaScript回顾2 JavaScript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 [javascript] view plain copy print? function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个

HTML5移动开发之路（28）—— JavaScript回顾3

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型 //前三个都有对应的包装类 null:空类型 undefined:未定义类型测试一: [html] view plain copy print? <html>  <head> <

HTML5移动开发之路（26）—— JavaScript回顾1

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(26)-- JavaScript回顾1 很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天.今天很重要,明天会更重要.现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧. 一.JavaScript的作用

HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(42)--HTML4与HTML5文档结构比较一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head> </head> <body> <h1>第一章小强的HTML5移动开发之路</h1> <h2>1.1 HTM

HTML5移动开发之路（8）——坦克大战游戏2

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(8)--坦克大战游戏2 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接着上一篇来实现我们的坦克大战游戏吧. 一.将JS文件分离出来使用OO的思想,我们已经对坦克进行了封装,对画坦克也进行了封装,下面我们将这两个对象提取到外部的js文件中,文件内容如下: [javascript] view plain copy print? //定义一个Hero类(后面还要改进) //x表示

HTML5移动开发之路（7）——坦克大战游戏1

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(7)--坦克大战游戏1 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片,在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏,下面我们开始吧一.用Canvas画出我们的坦克我们设计的坦克结构如下图所示,如果有的朋友有更好的设计,希望分享和交流一下. 如上图所示,我们的坦克基本上是由三个矩形和一个圆形一个线段组成,每个部件的尺寸进行了标记,单位为px,下面我们用上一篇中

HTML5移动开发之路（9）——坦克大战游戏3

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(9)--坦克大战游戏3 上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹. 前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克,仿照这种方式我们是不是也应该封装一个Bullet,答案是肯定的.好吧,那么我们再想想这个Bullet"类"都应该封装什么东西呢?位置应该有吧.子弹飞行的方向应该有吧.飞行的速

HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限