js中基本操作
2016-05-11 10:13
393 查看
1.操作标签值
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
function changeValue(id){
var oTxt = document.getElementById(id);
if(id == "in1")
oTxt.value = "This is a input1!";
else
oTxt['value'] = "This is a input2"
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<input type="text" id="in1">
<button type="button" onclick="changeValue('in1')">设置值</button>
<input type="text" id="in2">
<button type="button" onclick="changeValue('in2')">设置值</button>
</body>
</html>结果：
2.标签的样式操作
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.box{
background-color: green;
}
</style>
<script type="text/javascript">
function toRed(){
var oDiv = document.getElementById("div1");
oDiv.style.background = "red";
}
function toGreen(){
var oDiv = document.getElementById("div1");
oDiv.className = "box";
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button type="button" onclick="toRed()">变红</button>
<button type="button" onclick="toGreen()">变绿</button>
<div id="div1"></div>
</body>
</html>通过style属性或者是className可以操作一个标签的样式，但是两者是有区别的sytle修改的是标签的行间样式，而className则为一个标签添加了一个class类而已。
下图中先点变绿后点变红会起作用，但是先点变红后点变绿则没有效果。
3.提取行间事件
通常可以在行间添加某个事件 <button type="button" onclick="toRed()">变红</button> ,但是在开发过程中基本上是将html css 和分离的，所以我们最好将行间的css和js提取出来<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function (){
oDiv.style.background = 'red';
}
oBtn2.onclick = function (){
oDiv.style.background = 'green';
}
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button id="btn1" type="button">变红</button>
<button id="btn2" type="button">变绿</button>
<div id="div1"></div>
</body>
</html>浏览器在解析页面时，是没读一行解释一行，而代码中window.onload是当页面加载完后才执行js代码。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
window.onload = function (){
var oBtn = document.getElementById('btn');
var flage = false;
oBtn.onclick=function (){
var oDiv = document.getElementById('div1');
var oTags = oDiv.getElementsByTagName('input');
var i=0;
if(flage == false){
while(i < oTags.length)
oTags[i++].checked = true;
flage = true;
}else{
while(i < oTags.length)
oTags[i++].checked = false;
flage = false;
}
}
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button id="btn" type="button">全选</button><br>
<div id="div1">
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</div>
</body>
</html>4.选项卡的实现
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2 div{
width: 100px;
height: 100px;
background-color: gray;
display: none;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oBtns = oDiv1.getElementsByTagName('button');
var oDivs = oDiv2.getElementsByTagName('div');
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = '';
oDivs[j].style.display = 'none';
}
this.className = 'active';
oDivs[this.index].style.display = "block";
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">
<div style="display:block;">111</div>
<div >222</div>
<div >333</div>
<div >444</div>
</div>
</body>
</html>
更加简单的方式
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = ['1111', '2222', '3333', '4444'];
var oDiv1 = document.getElementById('div1');
var oBtns = oDiv1.getElementsByTagName('button');
var oDiv2 = document.getElementById('div2');
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = '';
}
this.className = 'active';
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html> <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = ['1111', '2222', '3333', '4444'];
var oDiv1 = document.getElementById('div1');
var oBtns = oDiv1.getElementsByTagName('button');
var oDiv2 = document.getElementById('div2');
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = '';
}
this.className = 'active';
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html>5.数组的使用
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = ['1111', '2222', '3333', '4444'];
var oDiv1 = document.getElementById('div1');
var oBtns = oDiv1.getElementsByTagName('button');
var oDiv2 = document.getElementById('div2');
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = '';
}
this.className = 'active';
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript基础(1)
- js读取并解析excel文件，之后上传json到服务器
- [JS]HTML中把图片划分成多个作用区域的区域标记
- 12个非常实用的JavaScript小技巧
- json-cpp在ubuntu14.04下编译方法
- js 跳转问题
- javascript复习第二天经典灯泡开关案例
- Canvas——认识CreateJs库
- 在jsp页面page指令中pageEncoding怎么设置默认编码方式为utf-8?
- JSON数据乱码问题
- Extjs4.0 ComboBox如何实现三级联动
- javascript简单判断输入内容是否合法的方法
- js实现a标签超链接提交form表单的方法
- javaScript的闭包
- JavaScript停止冒泡和阻止浏览器默认行为
- Javascript 动态合并table单元格
- 实现一个简单的Javascript级联下拉菜单
- JavaScript的DOM操作
- JavaScript 事件管理
- [转载]js正则表达式语法