小强的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 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
随机推荐
- CView::OnPreparePrinting
http://technet.microsoft.com/zh-cn/subscriptions/a59dff1e(v=vs.71).aspx CView::OnPreparePrinting Cal ...
- SpringMVC-如何接收各种参数（普通参数，对象，JSON, URL）
在交互的过程中,其中一个关键的节点就是获取到客户端发送过来的请求参数,本篇文章,我们来罗列下SpringMVC对于各种数据的获取方式: 说明:以下重点在讲解如何获取参数上,所以返回的数据不是重点 1, ...
- STL之vector容器的实现框架
说明:本文仅供学习交流,转载请标明出处,欢迎转载. 实现vector容器的思路等同于实现一个动态数组,以下我们參照源代码的相关资料,给出一个vector容器的大致框架,仅仅有声明,没给出详细的实现. ...
- NHibernate3剖析：Mapping篇之集合映射基础(2):Bag映射
系列引入 NHibernate3.0剖析系列分别从Configuration篇.Mapping篇.Query篇.Session策略篇.应用篇等方面全面揭示NHibernate3.0新特性和应用及其各种 ...
- java set转list，数组与list的转换
读zookeeper的源码(zookeeper.java)时发现的,平时没有怎么注意: private final ZKWatchManager watchManager; List<Strin ...
- Javascript和jquery事件--鼠标右键事件，contextmenu
右键点击触发是浏览器的默认菜单事件contextmenu,你可以选择阻止它,使用event.preventDefault();或者return false;. 想要定义右键点击事件,关注的是mouse ...
- Nginx TCP代理
nginx 在1.9.0 版本发布以前如果要想做到基于TCP的代理及负载均衡需要通过打名为nginx_tcp_proxy_module的第三方patch来实现,该模块的代码托管在github上 网址: ...
- （转）iptables常用规则：屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链
转自:http://lesca.me/archives/iptables-examples.html 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇ipt ...
- cpu信息
在linux系统下能够通过cat /proc/cpuinfo来查看本机上cpu的相关信息,通过processor能够推断逻辑cpu的个数,physical id能够推断物理cpu的个数,通过cpu c ...
- php中嵌套html代码和html代码中嵌套php方式
php中嵌套html代码和html代码中嵌套php方式 一.总结 拷贝的话直接html代码是极好的方式 1.php中嵌套html代码(本质是原生php):a.原生嵌套<?php .....?&g ...