利用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开发的三个步骤:

    1. 确定事件
    2. 确定事件触发的函数
    3. 函数内进行某些交互性操作

以上三个实例都遵循这三个开发步骤,不同的是触发事件和操作元素的不同。查看js使用手册会有帮助

javascript--实现几个简单的操作的更多相关文章

  1. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  2. SequoiaDB 系列之二 :SequoiaDB的简单CRUD操作

    上一篇通过一系列的操作,终于把SequoiaDB的集群部署到单台机器上了. 建议去安装体验一下吧. 在整个环境的部署的体验来看,并没有MongoDB的部署简单,但是比MongoDB的部署要清晰.Mon ...

  3. 用javascript来实现前端简单路由

    WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...

  4. JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  5. Python中json的简单读写操作

    Python中json的简单读写操作 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的 ...

  6. 用25行JavaScript语句实现一个简单的编译器

    原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...

  7. JavaScript面向对象—对象的创建和操作

    JavaScript面向对象-对象的创建和操作 前言 虽然说在JavaScript编程语言中,函数是第一公民,但是JavaScript不仅支持函数式编程,也支持面向对象编程.JavaScript对象设 ...

  8. salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)

    salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesforce中的数据库使用的是Force.com 平台的数据库,数据表一行数据可以理解成一个sObject变量 ...

  9. 下面介绍一下 Yii2.0 对数据库 查询的一些简单的操作

    下面介绍一下 Yii2.0 对数据库 查询的一些简单的操作 User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的 ...

  10. js实用方法记录-简单cookie操作

    js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...

随机推荐

  1. cpu_relax

    https://blog.csdn.net/justlinux2010/article/details/8533451

  2. xml 解析参考文档

    https://www.cnblogs.com/a1656344531/archive/2012/11/28/2792863.html

  3. 高斯消元part2

    今天整一整高斯消元的模板,正经的 高斯消元主要用于解n元一次线性方程组与判断是否有解 主要思想? 就是高斯消元啊 主要思想是理想状态下消为每行除最后一项外只有一个1,并且每行位置互异,具体看下面. 这 ...

  4. <TCP/IP原理> (一)

    1.协议和标准 2.标准化组织 3.Internet标准:RFC 4.Internet的管理机构 一.协议和标准 1.协议(Protocol) 一组控制数据通信的规则 三要素:语法(syntax).语 ...

  5. 【简】题解 AWSL090429 【数塔问题】

    因为每次只ban一个点 而且不是永久性的 预处理出每个点从上往下和从下往上的最大值 每次询问直接暴力 被ban掉点那行去掉那点的最大值 也可以直接预处理出每行的最大值和次大值 还有种做法貌似可以过 预 ...

  6. pwn-GUESS

    参考了其他wp之后才慢慢做出来的 记录一下 首先checksec一下 有canary 放到IDA看下源码 运行流程大概是 有三个fork 即三次输入机会,于是无法爆破cannary 本题用的是SSP ...

  7. Tomcat系列(1)——Tomcat安装配置

    核心步骤 1. 安装JAVA(因为tomcat依赖于java) 配置:JAVA_HOME D:\Program Files (x86)\Java\jdk1.7.0 path  %JAVA_HOME%\ ...

  8. R语言入门(1)-初识R语言

    设置R语言环境为英文环境 其实不设置也行...就是报错提示的内容是中文的话, 会不太好理解.. 1. 首先在用户根目录下cat查看一下, 发现没有.Renviron文件, 这个是R语言的环境配置文件. ...

  9. HBase基本概念与基本使用

    1. HBase简介 1.1 什么是HBase HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. HBASE ...

  10. redis---------AOF文件异常导致的redis无法载入

    AOF损坏时的对策1.若在写AOF文件时Server崩溃则可能导致AOF文件损坏而不能被Redis载入.可通过如下步骤修复: 创建一个AOF文件的备份: cp appendonly.aof appen ...