小强的HTML5移动开发之路（30）—— JavaScript回顾5
一、查找
第一种方式：依据id查找
var obj = document.getElementById(id); //document是HTMLDocument的实例
<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;">
<!--javascript:; 表示是一个空白的js语句-->
<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>
<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>
<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 href="javascript:alert('hello');">如何学好java</a> -->
<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>
<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="" onclick="return false;"></a>
<from onsubmint="return false;"></form>
小强的HTML5移动开发之路（30）—— JavaScript回顾5的更多相关文章
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（33）—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- 小强的HTML5移动开发之路（17）——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
随机推荐
- leetCode解题报告5道题(十)
题目一:Valid Number Validate if a given string is numeric. Some examples: "0" => true &quo ...
- 学习笔记：_lodash.js常用函数
_lodash.js 文档:https://www.lodashjs.com/docs/4.17.5.html _.compact(array) 创建一个移除了所有假值的数组 什么是假值?false, ...
- (转) 如何取消Linux下，vi中显示的^M符号
转自:http://www.cnblogs.com/dkblog/archive/2012/02/03/2337187.html [背景知识] ^M 是ascii中的'\r', 回车符,是16进制的0 ...
- Monkey (压力测试)-移动端手机压力测试工具 monkey以及monkeyrunner
4. Monkey (压力测试) 这个是Android提供的系统工具.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试.Monkey测试是一种 ...
- 使用H5 formData对象上传图片和视频的文件时，必填的属性
async : false,cache : false,contentType : false,// 告诉jQuery不要去设置Content-Type请求头processData : false,/ ...
- 微服务实战（四）：服务发现的可行方案以及实践案例 - DockOne.io
原文:微服务实战(四):服务发现的可行方案以及实践案例 - DockOne.io 这是关于使用微服务架构创建应用系列的第四篇文章.第一篇介绍了微服务架构的模式,讨论了使用微服务架构的优缺点.第二和第三 ...
- android 登录和设置IP/端口功能
本人第一个Android开发功能:登录以及设置IP/端口. 本人是j2ee开发工程师,所以这个可能有一些处理不太完善的地方,欢迎评论在下面,我会认真改进的. 首先是配置strings.xml文件添加用 ...
- 在Qtcreator中，KDE的Hello World（安装kdelibs5-dev）
我刚开始为KDE编程,我面临的问题是我不知道KDE项目的pro文件是什么,我有一个想法. 我还尝试了 file: 库 += -lkdeui 我还是找不到KApplication的问题 代码 main. ...
- Android多线程研究（9）——读写锁
一.什么是锁 在Java的util.concurrent.locks包下有关于锁的接口和类如下: 先看一段代码: package com.codeing.snail.test; public clas ...
- complex query几个原则
1.一般来说in比exists更有利(更容易变成join). 2.尽量避免union,使用union all代替,避免sort. 3,绝对不能在没有on条件下使用join(除非有特殊目的). 4.ou ...