js中基本操作
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>
js中基本操作的更多相关文章
- node.js中对 redis 的安装和基本操作
一.win下安装redis https://github.com/MicrosoftArchive/redis/releases 下载Redis-x64-3.2.100.zip,然后解压,放到自定义目 ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- H5JS二维动画制作！two.js的基本操作class1
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: ...
- js中对象转化成字符串、数字或布尔值的转化规则
js中对象可以转化成 字符串.数字.布尔值 一.对象转化成字符串: 规则: 1.如果对象有toString方法,则调用该方法,并返回相应的结果:(代码通常会执行到这,因为在所有对象中都有toStrin ...
- JavaScript基础&实战（4）js中的对象、函数、全局作用域和局部作用域
文章目录 1.对象的简介 2.对象的基本操作 2.1 代码 2.2 测试结果 3.属性和属性值 3.1 代码 3.2 测试结果 4.对象的方法 4.1 代码 4.2 测试结果 5.对象字面量 5.1 ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
- js中几种实用的跨域方法原理详解（转）
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
随机推荐
- Android中手机号、车牌号正则表达式
手机号 手机号的号段说明转载自:国内手机号码的正则表达式|蜗牛的积累 手机名称有GSM:表示只支持中国联通或者中国移动2G号段(130.131.132.134.135.136.137.138.139. ...
- C++find函数
头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...
- java截取日期范围并计算相差月数
前两天,媳妇单位让整理excel的某一个单元格内两个日期范围的相差月数,本人对excel操作不是很熟练,便写了个小程序计算了一下,原始需求如下: 计算投资期限的范围,并得到期限范围的相差月数 思路1: ...
- NUL 与 NULL
NUL 与 NULL 在C语言中,字符串表示为字符的数组.字符串最后一个字符为空字符 ('\0'),官方将其定义为 NUL ,而 NULL 是一个宏,其定义如下: #define NULL ((voi ...
- UESTC 876 爱管闲事 --DP
题意:即求给定n个数字(a1,a2,……an),不改变序列,分成M份,使每一份和的乘积最大. 思路:dp[i][j]表示把前i个数字,分成j份所能得到的最大乘积. 转移方程:dp[i][j] = ma ...
- 2014 Super Training #1 F Passage 概率DP
原题: HDU 3366 http://acm.hdu.edu.cn/showproblem.php?pid=3366 本来用贪心去做,怎么都WA,后来看网上原来是一个DP题. 首先按P/Q来做排 ...
- UESTC 31 饭卡(Card) --背包问题
背包问题. 思路:如果m<5,此时也不能消费,所以此时答案为m m>=5: 求出背包容量为m-5,买前n-1样便宜的菜(排个序)的最大价值(即最大消费,即消费完后剩余值最接近5)最后减去最 ...
- 第2章 面向对象的设计原则（SOLID）：2_里氏替换原则（LSP）
2. 里氏替换原则(Liskov Substitution Principle,LSP) 2.1 定义 (1)所有使用基类的地方必须能透明地使用子类替换,而程序的行为没有任何变化(不会产生运行结果错误 ...
- 深入.NET框架 项目《魔兽登录系统》
创建魔兽系统相关窗体: 登录窗体(frmLogin) 注册窗体(frmRegister) 主窗体 (frmMain) 实现魔兽登录系统: 登录的界面如下 实现思路: 1.创建一个对象数组,长度为1 ...
- EZ GUI Button和Checkbox创建
第一次接触EZ GUI,记录学习过程 准备工作 导入资源 导入 EZ GUI 1.0795.unitypackage 和 SpriteManager2 v1.92.unitypackage EZGUI ...