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函数里面做一件事:
- 启动一个定时器 : setTimeout()
- 显示一个广告
- 再去开启一个定时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()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </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="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
定时器:
setInterval
setTimeout
clearInterval
clearTimeout
控制图片显示隐藏
img.style.display = "block"
img.style.display = "none"
表单中常用的事件:
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
节点种类
- 元素节点：标签
- 属性节点：标签的属性
- 文本节点：标签里夹的文本
DOM的文档操作:
添加节点: appendChild
创建节点: document.createElement
创建文本节点: document.createTextNode()
JS开发步骤:
1. 确认事件
2. 事件触发函数
3. 函数里面要做一些交互
网友评论