javascript--实现几个简单的操作
利用JS实现几个简单的功能
--还有省市联动,商品的左右选择,表单的校验。但在学了jQuery之后,感觉这个没那么重要了,就不写了
- 表格的全选和全不选
- 表格的动态隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的全选操作and表格的隔行换色操作</title>
<script>
<!--全选和全不选函数,触发事件为onclick-->
function checkAll(){
<!--找到第一个checkbox,获取checked属性-->
var topcheck=document.getElementById("topcheck");
var state=topcheck.checked;
<!--获取其他所有的checkbox,将checked属性改为第一个的checked属性-->
var otherchecks=document.getElementsByName("otherchecks");
for(var i=0;i < otherchecks.length;i++){
otherchecks[i].checked=state;
}
} <!--表格的隔行换色,可以在表格中用属性设置颜色,但如果行数太多会增加代码复杂度。触发事件为onload-->
function init(){
var table=document.getElementById("table1");
var rows=table.rows;
for(var i=0;i<rows.length;i ++){
if(i%2==0){
rows[i].bgColor="red";
}
else{
rows[i].bgColor="green";
}
}
}
</script>
</head>
<body onload="init()">
<table border="2" id="table1" >
<tr>
<td><input type="checkbox" id="topcheck" onclick="checkAll()"></td>
<td>商品名称</td>
<td>商品种类</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>华为p30</td>
<td>手机</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>macbookpro</td>
<td>电脑</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>AppleTv</td>
<td>电视</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>iphoneX</td>
<td>手机</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>sony1000XM3</td>
<td>耳机</td>
</tr>
<tr>
<td><input type="checkbox" name="otherchecks"></td>
<td>kindle</td>
<td>电子书</td>
</tr>
</table>
</body>
</html>
以下涉及到HTML DOM树的知识
HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。下面是常用的一些方法:
document.createElement(元素节点)
document.createAttribute(属性节点)
document.createTextNode(文本节点)
elementName.appendChild(将两个节点关联。比如元素和属性 元素和文本 元素和元素)
- 商品的左右选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品的左右选择</title>
<script>
<!--flag属性用于区分是右移一个还是全部-->
function moveRight(flag){
var left=document.getElementById("left_goods");
var right=document.getElementById("right_goods");
var goods=left.options;
<!-- 如果正序遍历,会出现一边删除一边遍历的情况,所以采取倒序遍历-->
for(var i=goods.length-1;i >=0;i--){
if(goods[i].selected || flag==1){
right.appendChild(goods[i]);
}
}
} </script>
</head>
<body>
<div style="float:left">
<select multiple="multiple" id="left_goods" style="width:80px;height:100px;">
<option>华为mate</option>
<option>ipad</option>
<option>mbp</option>
<option>kindle</option>
<option>1000xm3</option>
</select>
<br/>
<input type="button" value="右移" onclick="moveRight(0)"><br />
<input type="button" value="全部右移" onclick="moveRight(1)">
</div>
<div style="float:left">
<select multiple="multiple" id="right_goods" style="width:80px;height:100px;">
<option>applewatch</option>
<option>airpods</option>
<option>ipadpro</option>
<option>iphonexrmax</option>
</select>
</div>
</body>
</html>
利用JS开发的三个步骤:
- 确定事件
- 确定事件触发的函数
- 函数内进行某些交互性操作
以上三个实例都遵循这三个开发步骤,不同的是触发事件和操作元素的不同。查看js使用手册会有帮助
javascript--实现几个简单的操作的更多相关文章
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- SequoiaDB 系列之二 :SequoiaDB的简单CRUD操作
上一篇通过一系列的操作,终于把SequoiaDB的集群部署到单台机器上了. 建议去安装体验一下吧. 在整个环境的部署的体验来看,并没有MongoDB的部署简单,但是比MongoDB的部署要清晰.Mon ...
- 用javascript来实现前端简单路由
WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- Python中json的简单读写操作
Python中json的简单读写操作 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的 ...
- 用25行JavaScript语句实现一个简单的编译器
原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...
- JavaScript面向对象—对象的创建和操作
JavaScript面向对象-对象的创建和操作 前言 虽然说在JavaScript编程语言中,函数是第一公民,但是JavaScript不仅支持函数式编程,也支持面向对象编程.JavaScript对象设 ...
- salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)
salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesforce中的数据库使用的是Force.com 平台的数据库,数据表一行数据可以理解成一个sObject变量 ...
- 下面介绍一下 Yii2.0 对数据库 查询的一些简单的操作
下面介绍一下 Yii2.0 对数据库 查询的一些简单的操作 User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的 ...
- js实用方法记录-简单cookie操作
js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...
随机推荐
- Python爬虫beautifulsoup4常用的解析方法总结
摘要 如何用beautifulsoup4解析各种情况的网页 beautifulsoup4的使用 关于beautifulsoup4,官网已经讲的很详细了,我这里就把一些常用的解析方法做个总结,方便查阅. ...
- CentOS_7下安装Nginx服务
安装make: yum -y install gcc automake autoconf libtool make make是一个命令工具,是一个解释makefile中指令的命令工具.它可以简化编译过 ...
- odoo Model字段的参数
odoo Model字段的参数 class Field(object): """ The field descriptor contains the field defi ...
- 前端知识之jQuery
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). http://www.runoob.com/jquery/jquery ...
- ImageMagick 安装 window10与错误总结
一般默认安装最新的版本(目前是7.0.8),但是通过测试发现这个版本会报错(ImportError: MagickWand shared library not found.)所以建议安装 im6版本 ...
- NSParagraphStyle 的属性
UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 20, 20)]; label.font = [UIFont sys ...
- 关于bytes和bytearray
背景 平时工作因为有批量线上数据进行更新,通过Python程序连接数据库,利用连接池和gevent的并发性能,处理大量数据. 因为数据方提供的数据表结构中带有varbinary类型字段,并非全部,所以 ...
- Spring事务管理——基础会用篇
之前说到Spring的事务管理 一直很懵逼 ,只知道事务管理大概是干嘛的. 网上的博客都是用 银行转账来解释 事务管理,哈哈哈 那我也用这个吧,这个例子的确是最好的. 说是两个人相互转账,A转500块 ...
- ES6.3.2 副本失败处理
ES6.3.2 副本失败处理 副本的失败处理对理解ES的数据副本模型很有帮助.在ES6.3.2 index操作源码流程的总结中提到:ES的写操作会先写主分片,然后主分片再将操作同步到副本分片.本文给出 ...
- docker常用命令总结
1.docker ps 查看当前正在运行的容器 2.docker ps -a 查看所有容器的状态 3.docker start/stop id/name 启动/停止某个容器 4.docker ...