小强的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>
最新文章
- 重新梳理HTML基础知识
- Yii2 rules 添加时间比较功能
- [Java 基础]运算符和表达式
- EntityFramework 基础的crud
- ztree点击文字勾选checkbox,radio实现方法
- web app 自适应 弹性布局之rem
- 【BZOJ】【1025】【SCOI2009】游戏
- Python能做什么
- python 标准模块shlex
- DOS系统常用命令
- SpringBoot使用事务
- noip第18课资料
- Linux学习笔记之七————Linux常用命令之编辑器、服务器
- delphi 隐藏标题栏
- 安装APK的错误码(PackageManager.java)
- wireshark提取gzip格式的html
- Theme.AppCompat无全屏主题解决办法
- 【转】Java多线程编程(十)-并发编程原理(分布式环境中并发问题)
- Linux:安装Zookeeper
- 微信小程序之页面之间传递值
热门文章
- poi完美word转html(表格、图片、样式)
- MySQL主从复制之Mycat简单配置和高可用
- nginx源代码分析--事件模块 &;amp; 琐碎
- ubuntu下安装phpredis的模块扩展
- Codeforces #28 C.Bath Queue (概率dp)
- 当数据库没有备份,redo或undo损坏
- 第一个hello word 驱动载入失败--------
- 使用Profiles分析SQL语句运行时间和消耗资源
- js匿名函数(变量加括号就是函数)
- HDU 1874 畅通工程续 SPFA || dijkstra||floyd