JS

CSS: 层叠样式表

主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性

选择器:

元素选择器: 元素的名称{}

类选择器: . 开头

ID选择器: #ID选择器

后代选择器: 选择器1 选择器2

子元素选择器: 选择器1 > 选择器2

选择器分组: 选择器1,选择器2,选择器3{}

属性选择器: 选择器[属性的名称='属性的值']

伪类选择器:

浮动:

float 属性: left right

清除浮动:

clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

内边距: 控制的盒子内距离

边框: 盒子的边框

外边距: 控制盒子与盒子之间的距离

绝对定位: position : absolute; top: left

JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译 JS是由我们浏览器解释执行的

ECMAscript：核心部分，定义JS的语法规范

DOM：document object Model

文档对象模型，主要用来管理页面的

BOM：Browser object Model

浏览器对象模型，主要有前进，后退，页面刷线，地址栏，历史记录，屏幕宽高

JS语法：变量弱类型，区分大小写，语法结束后的分号可有可无，写在script标签里

数据类型：
基本数据类型：String字符串/number数字/Boolean布尔/undefined为赋值/null空对象

引用数据类型：对象/内置对象

类型转换：JS内部自动转换

运算符和语句：运算符和java一样

“===”全等号：值和类型都必须相等

“==”值相等就可以

语句和java一样

JS输出：

alert（）直接弹框

document.write（）向页面输出

console.log（）向控制台输出

innerHTML向页面输出

获取页面元素：document。getElementById("名称")；

JS声明变量: var 变量的名字;

JS声明函数: function 函数的名称(参数的名字){}

JS开发的步骤:

1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

定时器

setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval：关闭循环程序
clearTimeout：关闭一次
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

【HTML中innerHTML属性】

表单中常用的事件:

onfocus: 获取焦点事件

onblur : 失去焦点的事件

onkeyup: 按键抬起的事件

onclick: 单击事件

ondblclick: 双击事件

表格隔行换色,鼠标移入和移除要变色:

onmouseenter: 鼠标移入

onmouseout: 鼠标移出

onload: 文档加载完成事件

onsubmit: 提交

onchange: 下拉列表内容改变

checkbox.checked 选中状态

shift：删除并返回数组的第一个元素

slice：从某个已有的数组返回选定的元素（截取从指定下标开始到指定下标结束的子数组）

写法： arrayObject.slice(start,end) start end为元素下标

arrayObject.slice(start) 省略end时表示截取到尾部

start,end还可以为负数，表示从尾部开始截取

sort：对数组的元素进行排序

注意：无论是数字还是字符串，默认的排序都是按首字母顺序，如果数字想按照大小排序，需要写排序算法。
toString：把数组转换为字符串，并返回结果

push

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

push与concat作用相似，都能连接数组

不同之处：
1）返回值类型不同。concat返回连接后的数组 push返回新数组的长度
2）concat连接后原数组没变，实际变成了新的数组push是对改变原数组（****）

join与toString的异同

相同点：都可以将数组转换成字符串

不同点：join默认用逗号分隔，但可以通过调用有参构造指定分隔符

toString只能用逗号分隔。不可以定制

JavaScript内置对象

常用的内部对象
Array、Global、Date、Math、String、Number、Boolean

Array：见上面部分

Global: ECMAScript 中的Global 对象在某种意义上是作为一个终极的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是Global 对象的属性。本书前面介绍过的那些函数，诸如isNaN()、isFinite()、parseInt()以及parseFloat()等看起来都像独立的函数，实际上全都是Global对象的方法。还有就是常见的一些特殊值，

如：

NaN、undefined等都是它的属性。

encodeURI() 编码，加密

encodeURIComponent() 编码。支持中文和特殊字符

decodeURI() 解码，解密

decodeURIComponent() 解码

         <script>
        var box = '//张三';
        alert("加密的："+encodeURI(box));   //只编码了中文
        var box = '//张三';
        alert("加密的："+encodeURIComponent(box));//特殊字符和中文编码了
        var box = '//张三';
        alert("解密的"+decodeURI(encodeURI(box))); //还原    
        var box = '//张三';
        alert("解密的"+decodeURIComponent(encodeURIComponent(box)));//还原
        </script>

**eval：计算结果 **
alert(eval(2+2)); 也支持function定义

Date：

参考网址：http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var date = new Date(“July 4,2004,6:25:22”)
var date = new Date(“July 4,2004”)
var date = new Date(2004,7,4,6,25,22)// 2004年8月4日
var date = new Date(2004,7,4)// 2004年8月4日
var date = new Date(“2004/7/4”)
var date = new Date(Milliseconds)
var date = new Date();
获取日期和时间的方法
getYear()：返回年数；（小于2000年返回两位）
getFullYear()：返回年数；
getMonth()：返回当月号数；（比实际小1）
getDate()：返回当日号数；
getDay()：返回星期几；（0表示星期日 1-6就是星期1至星期六）
getHours()：返回小时数；
getMinutes()：返回分钟数；
getSeconds()：返回秒数；
getTime()：返回毫秒数；
设置日期和时间的方法
setYear()：设置年数；
setMonth()：设置当月号数；（set7表示8月）
setDate()：设置当日号数；
setDay()：设置星期几；
setHours()：设置小时数；
setMinutes()：设置分钟数；
setSeconds()：设置秒数；
setTime()：设置毫秒数；
课堂练习：
在页面打印当前年月日时分秒和星期
yyyy年MM月dd日 HH:mm:ss 星期***

正则表达式语法

两种写法
第一种字面量方式
var reg = /abcd/g；
var box = /box/; //直接用两个反斜杠
var box = /box/ig;
第二种 new 对象的方式
var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符
这两种写法都是两部分参数，第一部分定义验证规则，第二部分是属性
属性就三个值 i g m
i-忽略大小写进行匹配
g-全局匹配
m-多行匹配
第一部分规则是正则的关键。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\w 用于匹配字母，数字或下划线字符。
\W W大写，可以匹配任何一个字母或者数字或者下划线以外的字符
[a-z] 字符范围。匹配指定范围内的任意字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。
x|y 匹配 x 或 y
{n} 表示前面的字符或者组合项连续出现n次
{n,} 表示前面出现的字符或者组合项，至少出现n次
{n,m} 表示前面出现的字符或者组合项，至少出现n次，至多出现m次，（n<＝m）
\d{4} 4个任意的数字[a-z]{6}
验证邮政编码：/^\d{6} /
验证固定电话：/^\d{3}-\d{8} | \d{4} - \d{7}/
验证身份证号码：/^\d{15} | \d{18} | \d{17}[x X] /
验证移动电话：/^\d13|\d15\d{9}/
验证电子邮箱地址：/^\w+((-\w+)|(.\w+))@[A-Za-z0-9] ((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+/ /^([\w.-]+)@(\w+).(\w+)/

BOM

BOM：浏览器对象模型(BrowserObjectModel)
window.open
window.open(URL,name,features,replace)
URL:地址
name：窗口名称
features：新窗口要显示的标准浏览器的特征
replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
窗口其他方法
moveTo(x,y)
方法格式：window.moveTo(x,y);
功能：将窗口移动到指定坐标(x,y)处;
resizeTo(x,y)
方法格式：window.resizeTo(x,y);
功能：将当前窗口放大或缩小到(x,y)指定大小，x、y分别为宽度和高度;
resizeBy(x,y)
方法格式：window.resizeBy(x,y);
功能：要使窗口宽度放大或缩小的像素数。可以是正、负数值。
将当前窗口改变到指定的大小(x,y),当x、y的值大于0时为扩大，小于0时为缩小。
moveBy（x,y）
功能：相对窗口的当前坐标把它移动指定的像素。
.focus .blur ## 得到或失去焦点
js中的三种消息对话框分别是alert()，confirm()，prompt()
1、alert():警告窗口
有一个确认按钮。
①写在script标签中

②括号中的内容为字符串或者整型

③点击确认即可关闭，无返回值

window.alert(“欢迎！请按“确定”继续。”)，

2、confirm():确认对话框,返回true/false，
有确认和取消两个按钮
①写在 script标签中
②括号中的内容为字符串和整型
③点击确认返回true，点击取消返回false

        <script type="text/javascript">
        function disp_confirm()
          {
          var r=confirm("确认删除吗")
          if (r==true)
        {
        document.write("You pressed OK!")
        }
          else
        {
        document.write("You pressed Cancel!")
        }
          }
        </script>
        <input type="button" onclick="disp_confirm()"
        value="Display a confirm box" />

3、prompt(？，？):弹出消息对话框
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
①写在script标签中
②str1: 要显示在消息对话框中的文本(提示语)，不可修改
str2：文本框中的内容，可以修改
③点击确认返回输入框中的内容，取消返回null

DOM

什么是DOM: Document Object Model : 管理我们的文档增删改查规则

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
DOM的文档操作:

添加节点: appendChild

创建节点: document.createElement

创建文本节点: document.createTextNode()

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
复制节点：
nodeObject.cloneNode（Boolean）true克隆当前节点以及所有子节点；false只克隆当前节点

DOM操作属性节点

属性是元素的一部分，所以只有获得元素节点后，才能获取和设置属性节点。
getAttribute("属性名") 通过指定属性名，获取属性值
setAttribute("属性名","新属性值") 如果属性名存在，则更改属性值。如果不存在，则创建一个新属性并赋值。
简便形式：element.属性名可以获取和设置指定属性的属性值。但该属性必须存在。
element.removeAttribute("属性") 删除元素节点的指定属性名
element.attributes 返回元素节点中包含所有属性的集合

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script>
        window.onload=function(){
        var inNode = document.getElementById("in");
         //获取元素节点
        //修改属性值
        inNode.setAttribute("value", "新用户");
        inNode.setAttribute("type", "button");
        console.log(inNode.getAttribute("value") + "," + inNode.getAttribute("type"));
        //添加新属性
        inNode.setAttribute("newAttr", "瞎搞的");
        //简便方式
        inNode.type = "radio";
        inNode.value = "单选框";
        console.log("简便方式：" + inNode.type + "," + inNode.value);
        
        inNode.removeAttribute("name"); //删除name属性
        //获取当前元素节点的所有属性
        var allAttr = inNode.attributes;
        for(var i = 0; i < allAttr.length; i++){
        console.log(allAttr[i]);//打印属性到控制台
        }
        }
        </script>
        
        </head>
        <body>
        <input type="text" id="in" name="username" value="用户">用户
        </body>
        </html>

DOM操作文本节点

DOM将元素中的文本内容当作节点层次之一，即文本节点，文本节点是TextNode对象。
下面文本节点的属性我只列出了一个文本节点独有属性data，但文本节点也是Node对象，所以依然可用其他节点属性，例如nodeName/Type/Value、获取相关层次节点等属性，而length属性和data.length差不多。
文本节点中最容易出现的兼容问题就是空白文本节点，后面会说到怎么解决。
除了通过文本节点的方法和属性来处理文本节点(前提是要获取到文本节点)；还可以将文本内容提取成字符串，处理后，再放回去。关于这两种操作的用法后面会依次介绍。

属性
data 设置或获取 TextNode 对象的值。
方法
appendData(string) 添加字符串到文本节点末尾处。
insertData(offset, string) 从offset指定位置插入string
deleteData(offset, count) 从offset起删除count个字符
replaceData(off,count,string) 从off起将count个字符用string替换
splitText(offset) 从offset起将文本节点分割
substringData(offset, count) 返回从offset起的count个字符
关于空白文本节点

导致空白文本节点的原因：当标签换行，就会产生一个换行符，或者打一个空格，浏览器解析时会把他们当做空白文本节点。
在获取第一个子节点时极容易获取到空白文本节点。那怎么避免空白文本节点呢？
一是所有标签写一行，但这不符合代码美感。
二是将文本内容单独存储在一个元素子节点中，避免元素子节点同时存在文本节点和元素节点，这样再通过firstElementChild和children等属性就只拿到元素节点，再单独对该节点进行处理。

解决空白节点后，下面开始操作文本节点，这里采用文本节点的方法来处理文本内容，使用方法类似于字符串。下面是一个综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

          </head>
        <body>
        <div id="p_2">
        <div>面朝大海</div>
        <p>春暖化开</p>
        <button onclick="appendStr()">添加文本</button>
        <button onclick="insertStr()">插入文本</button>
        <button onclick="deleteStr()">删除指定文本</button>
        <button onclick="replaceStr()">替换文本</button>
        <button onclick="split()">切割文本</button>
        <button onclick="subString()">截取前2个文本字符并返回</button>
        </div>
        <script>
        var cd = document.getElementById("p_2").children; //获取所有的有效元素子节点，全局变量
        //给所有的文本节点增加一段话
        function appendStr(){
        for(var i = 0; i < cd.length; i++){
        //获取每个元素子节点的第一个子节点，这里是文本节点
        var tmp = cd[i].firstChild;
        tmp.appendData("给文本节点中附加一小段话~");
        }
        }
        //从文本节点第一个字符开始插入
        function insertStr(){
        for(var i = 0; i < cd.length; i++){
        //拿到每个元素子节点的第一个子节点，这里是文本节点
        var tmp = cd[i].firstChild;
        tmp.insertData(0, "从第一个字符插入文本");
        }
        }
        //删除[0, 2)区间的字符文本
        function deleteStr(){
        for(var i = 0; i < cd.length; i++){
        var tmp = cd[i].firstChild;
        tmp.deleteData(0, 2);
        }
        }
        //[0,2)区间用replace字符串代替
        function replaceStr(){
        for(var i = 0; i < cd.length; i++){
        var tmp = cd[i].firstChild;
        tmp.replaceData(0, 2, "replace");
        }
        }
        //把文本节点从中间切割成两部分
        function split(){
        for(var i = 0; i < cd.length; i++){
        var tmp = cd[i].firstChild;
        tmp.splitText(tmp.data.length/2);
        }
        }
        //截取文本节点的[0, 2)区间字符
        function subString(){
        for(var i = 0; i < cd.length; i++){
        var tmp = cd[i].firstChild;
        tmp.data = tmp.substringData(0,2);
        //tmp.replaceData(0,tmp.length,tmp.substringData(0,2));
        }
        }
        </script>
        </body>
        </html>

有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换

技术分析:

切换图片:

每个三秒钟做一件事:

步骤分析:

1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
    1. 开启定时器: 执行切换图片的函数 changeImg()
4.  changeImg()
    1. 获得要切换图片的那个元素

1. 完成页面定时弹出广告

1.1 需求分析

一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！

1.2 技术分析

定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval：关闭循环程序
- clearTimeout：关闭一次
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

1.3 步骤分析

确定事件: 页面加载完成的事件 onload
事件要触发函数: init()
init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
  1. 再去开启一个定时5秒钟之后,关闭广告

1.4 代码实现

<script>
        
            function init(){
                setTimeout("showAD()",3000);
            }
            
            function showAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //显示广告
                img.style.display = "block";
                
                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }
            
            function hideAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //隐藏广告
                img.style.display = "none";
            }
        </script>

2. 完成完成表单的校验

2.1 需求分析

我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。

2.2 技术分析

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus 事件: 获得焦点事件

onblur : 失去焦点

onkeyup : 按键抬起事件

2.3 步骤分析

2.4 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            /*
                1. 确定事件 : onfocus
                2. 事件要驱动函数
                3. 函数要干一些事情: 修改span的内容
            */
            function showTips(spanID,msg){
                //首先要获得要操作元素 span
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }
            /*
                校验用户名:
                1.事件: onblur  失去焦点
                2.函数: checkUsername()
                3.函数去显示校验结果
            */
            function checkUsername(){
                //获取用户输入的内容
                var uValue = document.getElementById("username").value;
                //对输入的内容进行校验
                //获得要显示结果的span
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    //显示校验结果
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }
            }
            
            /*
             密码校验
             */
            function checkPassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                var span = document.getElementById("span_password");
                //对密码输入进行校验
                if(uPass.length < 6){
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                    return true;
                }
            }
            
            /*
             确认密码校验
             * */
            function checkRePassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                
                //获取确认密码输入
                var uRePass = document.getElementById("repassword").value;
                var span = document.getElementById("span_repassword");
                
                //对密码输入进行校验
                if(uPass != uRePass){
                    span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                    return false;
                }else{
                    span.innerHTML = "";
                    return true;
                }
            }
            
            /*
             校验邮箱
             * */
            function checkMail(){
                var umail = document.getElementById("email").value;
                var flag = checkEmail(umail);
                
                var span = document.getElementById("span_email");
                //对邮箱输入进行校验
                if(flag){
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }else{
                    span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                    return false;
                }
            }
            
            function checkForm(){
                var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
                return flag;
            }
            
        </script>
    </head>
    <body>
        <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
            用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
            密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
            确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
            邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
            手机号:<input type="text" id="text" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

定时器:

setInterval("test()",3000) 每隔多少毫秒执行一次函数

setTimeout("test()",3000) 多少毫秒之后执行一次函数

timerID 上面定时器调用之后

clearInterval()

clearTimeout()

切换图片

img.src = "图片路径"

事件: 文档加载完成的事件 onload事件

显示广告 : img.style.display = "block"

隐藏广告: img.style.display ="none"

引入一个外部js文件

<script src="js文件的路径"  type="text/javascript"/>

表单校验中常用的事件:

获得焦点事件: onfocus

失去焦点事件 onblur

按键抬起事件: onkeyup

JS开发步骤

1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互:  点击, 修改图片,  动态修改innerHTML属性...  innerTEXT

3.表格隔行换色

3.1 需求分析

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色

3.2 技术分析

改变行的颜色

3.3 步骤分析

确定事件: 文档加载完成 onload
事件要触发函数: init()
函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色

3.4 代码实现

<script >
            function init(){
                //得到表格
                var tab = document.getElementById("tab");
                //得到表格中每一行
                var rows = tab.rows;
                //便利所有的行,然后根据奇数 偶数
                for(var i=1; i < rows.length; i++){
                    var row = rows[i];  //得到其中的某一行
                    if(i%2==0){
                        row.bgColor = "yellow";
                    }else{
                        row.bgColor = "red"
                    }
                }
            }
</script>

4. 复选框的全选和全不选

4.1 需求分析

商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品

4.2 技术分析

事件 : onclick点击事件

4.3 步骤分析

全选和全不选步骤分析:

1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态

代码实现

function checkAll(){
//              获得当前第一个checkbox的状态
                var check1 = document.getElementById("check1");
                //得到当前checked状态
                var checked = check1.checked;
//                  获得所有分类项的checkbox
//              var checks = document.getElementsByTagName("input");
                var checks = document.getElementsByName("checkone");
//              alert(checks.length);
                for(var i = 0; i < checks.length; i++){
//                  修改每一个checkbox的状态
                    var checkone = checks[i];
                    checkone.checked = checked;
                }
            }

6. 使用JS控制下拉列表左右选择

6.1 需求分析:

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品

6.2 步骤分析:

6.3 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            步骤分析
                1. 确定事件: 点击事件 :onclick事件
                2. 事件要触发函数 selectOne
                3. selectOne要做一些操作
                    (将左边选中的元素移动到右边的select中)
                    1. 获取左边Select中被选中的元素
                    2. 将选中的元素添加到右边的Select中就可以
        -->
        <script>
            
            function selectOne(){
//              1. 获取左边Select中被选中的元素
                var leftSelect = document.getElementById("leftSelect");
                var options = leftSelect.options;
                
                //找到右侧的Select
                var rightSelect = document.getElementById("rightSelect");
                //遍历找出被选中的option
                for(var i=0; i < options.length; i++){
                    var option1 = options[i];
                    if(option1.selected){
        //              2. 将选中的元素添加到右边的Select中就可以
                        rightSelect.appendChild(option1);
                    }
                }
            }
            
            //将左边所有的商品移动到右边
            function selectAll(){
//              1. 获取左边Select中被选中的元素
                var leftSelect = document.getElementById("leftSelect");
                var options = leftSelect.options;
                
                //找到右侧的Select
                var rightSelect = document.getElementById("rightSelect");
                //遍历找出被选中的option
                for(var i=options.length - 1; i >=0; i--){
                    var option1 = options[i];
                    rightSelect.appendChild(option1);
                }
            }
            
            
            
        </script>
    </head>
    <body>
        
        <table border="1px" width="400px">
            <tr>
                <td>分类名称</td>
                <td><input type="text" value="手机数码"/></td>
            </tr>
            <tr>
                <td>分类描述</td>
                <td><input type="text" value="这里面都是手机数码"/></td>
            </tr>
            <tr>
                <td>分类商品</td>
                <td>
                    <!--左边-->
                    <div style="float: left;">
                        已有商品<br />
                        <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                            <option>华为</option>
                            <option>小米</option>
                            <option>锤子</option>
                            <option>oppo</option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右边-->
                    <div style="float: right;"> 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option>苹果6</option>
                            <option>肾7</option>
                            <option>诺基亚</option>
                            <option>波导</option>
                        </select>
                        <br />
                        <a href="#"> &lt;&lt; </a> <br />
                        <a href="#"> &lt;&lt;&lt; </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
    </body>
</html>