文章目录
JS
script
<script src="01.js"></script>
<script> </script>
输入、输出、转换
| 函数 | 说明 | 举例 |
|---|---|---|
| alert | 警告对话框 | alert(“Hello World”); |
| console.log() | 控制台输出 | console.log(‘01’); |
| document.write() | 页面输出 | document.write(‘********’); |
document.write('<br />') | 输出换行 | |
document.write(' '); | 输出空格 | |
| String.fromCharCode(65) | 数字转字符 | document.write(String.fromCharCode(65)); |
| prompt | 输入对话框 | prompt(‘请输入:’, ‘苹果’); 前者提示，后者为默认参数 |
确认对话框——confirm()——true
<body>
<script>
var r = confirm("确认对话框");
if (r==true){
document.write("You pressed OK!")
}else{
document.write("You pressed Cancel!")
}
</script>
</body>
判断数据不是一个数据——true
<body>
<script>
var r = isNaN(2);
if (r==true){
document.write("You pressed OK!")
}else{
document.write("You pressed Cancel!")
}
</script>
</body>
变量
变量的声明语句： var 变量名
js中只有一种数据类型：可变类型
子类型：setring,number,undefined,Object
变量的具体类型由变量中的数据来决定
typeof 变量名：取出变量的数据类型名
var age;
console.log(typeof age); // typeof 变量名：取出变量的数据类型名
age = 'beijing';
console.log(typeof age);
age = 30.5;
console.log(typeof age);
age = true;
console.log(typeof age);
age = new Object();
console.log(typeof age);
age = [1,2,3]
console.log(typeof age);
运算符
20+1=201或21
数据类型转换——parseInt，parseFloat
var age = prompt('请输入你的年龄','20');
// age = age + 1; // 为字符型结果20+1=201
age = parseInt(age) + 1; // 计算一年后的年龄 20+1=21
// age = parseFloat(age) + 1; // 浮点型 21
alert("1年后的年龄是"+age);
算术运算
var num = 302;
alert(num/3);// js只有number数据类型，包括了整数和小数
// 取出数据的每位上的数字
var bai = parseInt(num/100); // bai = (num-num%100)/100;
自加自减
判等全等
console.log(18 == '18'); // 判断 true
console.log(18 === '18'); // 全等 false
var x = 0;
if(x == 0){
console.log('zero');
}
else{
console.log('ok');
} // zero
逻辑&&或||非！
根据运算符的运算数不同，运算符分为单目运算符，双目运算符，三目运算符
如果一个表达式中存在多个运算符，存在运算符的优先级
单目运算符 > 双目运算符 > 三目运算符
算术运算符 > 比较运算符 > 逻辑运算符
当进行逻辑与计算式，第一个计算结果为false，就不需要计算第二个数
当进行逻辑或计算式，第一个计算结果为true，就不需要计算第二个数
var x = 30;
var result = 1<0 && ++x>10; // ++x不执行
console.log(x);
+=,-=,*=
+=,-=,*=等复合赋值运算，是将右边作为一个整体
var x = 10;
x*=2+3; // x = x*(2+3)
顺序结构
分支结构——switch-case-default
多分支
switch语句条件表达式的值和case的常量值判断是否相等是，用的是“===”
switch语句中default分支一般写在最后，但是可以写在任何位置
break语句用于跳出某个结构，switch语句每个case部分的break用于跳出switch
如果某个case部分省略部分
switch(条件表达式){
case 情况1: 语句块1;break;
case 情况2: 语句块2;break;
...
case 情况n: 语句块n;break;
default: 语句块n;break;
}
循环结构：当型循环，直到型循环
数组
var arr = new Array();
var arr = [元素1,元素2,...];
// 取数组元素 数组名[下标]
数组名.push(元素) // 添加元素
数组名.pop() // 默认删除末尾元素
数组名.length //数组长度
数组名.unshift(元素); // 头部添加元素
数组名.shift(); // 头部删除元素
数组名.splice(2,3); // 从序号2开始删除3个元素
数组名.slice(2,6); // 拷贝序号2~5的位置
数组名.concat([1,2],[3,4]) // 合并数组
数组名.join(字符串); // 将数组中的元素用指定的连接符号连接成一个字符串
数组添加删除splice
<body>
<script>
var a=[0,1,2,3,4,5,6];
a.splice(2,1);
alert(a); // 0,1,3,4,5,6
a.splice(2,0,'a','b');
alert(a); // 0,1,a,b,3,4,5,6
</script>
</body>
var a = [];
a.unshift('beijing'); // 头部添加元素
a.unshift(1,2,3);
a.unshift([1,2,3]);
a.shift(); // 删除头部元素
var b = a.slice(2,6); // 拷贝序号2~5的位置
var c = [];
c = c.concat([1,2],[3,4]) // 合并多个小数组成为一个大数组
var a = ['ab','cd','cd'];
var b = a.join(','); // ab,cd,cd 将数组中的元素用指定的连接符号连接成一个字符串
函数——function 函数名()
可以有return
function 函数名([形式参数名1,...]){函数体} //[]表示可有可无参数
<script>
function ad(a){ // 函数
alert(a);
}
ad('OK'); // 函数调用
</script>
定时循环输出
<body>
<script>
function work(){
setInterval(function(){
console.log('a'); // 循环输出
},100);
}
work();
</script>
</body>
window
console.log(window.x); // undefined 没有x
var x = 10; // 在全局范围内声明一个变量，其实就是给window对象声明一个变量
console.log(window.x); // 10
window.alert('OK'); // 等价于alert('OK')
按钮
<body>
<input type="button" value = "获取地址" id="btnRead">
</body>
查(id、标签、选择器)
document.getElementById('id名'):根据id获取网页中的一个标签
document.getElementsByTagName('标签名'):根据标签名获取网页中的所有同名标签，元素对象也有此方法
document.querySelector('选择器') :按照选择器选取第一个满足选择器的元素对象
document.querySelectorAll('选择器') :按照选择器选取第所有满足选择器的元素对象，返回元素对象数组
常用选择器：#id名：id选择器 .类名：类选择器 标签名：标签选择器
nodeName:节点名，如果对象是标签，就是标签名，如果对象是文本，就是#text，
nodeType:节点类型，标签为1 ，文本为3
长度
//var alla = document.getElementsByTagName('a');
var alla = document.querySelectorAll('a');
alert(alla.length);
按钮单击事件（获取、跳转地址）——location.href
location,地址属性 location.href读取浏览器中打开网页的地址或设置
<body>
<input type="button" value = "获取地址" id="btnRead">
<input type="button" value = "获取地址" id="btnWrite">
<script>
var btnRead = document.getElementById('btnRead'); // 获取网页中的两个按钮
btnRead.onclick = function(){ // 定义地址按钮的单击事件的处理代码
alert(location.href); // 显示当前页面的地址
}
var btnWrite = document.getElementById('btnWrite');// 获取网页中的两个按钮
btnWrite.onclick = function(){ // 定义地址按钮的单击事件的处理代码
location.href = 'http://www.baidu.com'; // 跳转到百度的首页：根据程序运行结果进行动态的跳转
}
</script>
</body>
html属性的读和写：
getAttribute(属性值):读HTML属性值
setAttribute(属性名，值):写HTML属性值
如果HTML属性是系统定义的，则可以使用建党方式进行HTML属性的读写：对象名.属性名
标签的内容（开始标签和结束标签中间的内容）
innerHTML:内容中可以包含子标签
innerText:内容是为本
读样式属性：对象名.style.css样式属性名
写样式属性：对象名.style.css样式属性名 = 值；
获取、修改属性标签、内容、style、类名
<body>
<div id="div1">
<p>段落中的文字</p>
<a href="http://www.baidu.com">百度</a>
</div>
<p>
<button id="btnRa">获取第一个超链接的href属性</button>
<button id="btnSa">设置第一个超链接的href属性值</button>
</p>
<script>
var btn2 = document.querySelector('#btnRa');
btn2.onclick = function(){
//读取第一个超链接的href属性值
var target = document.querySelector('a');
//显示href属性值
//console.log(target.getAttribute('href'));
console.log(target.href);
console.log(target.nodeName); // 标签名
console.log(target.nodeType); // 类型
console.log(target.innerHTML); // 内容
console.log(target.style.backgroundColor); //读取层的样式属性
}
var btn3 = document.querySelector('#btnSa');
btn3.onclick = function(){
//读取第一个超链接的href属性值
var target = document.querySelector('a');
//设置href属性值
//target.setAttribute('href','http://www.sina.com')
target.href='http://www.sina.com';
target.innerHTML='新浪'; // 修改内容
target.style.backgroundColor="red"; // 修改样式style
target.className = 'one'; //设置类样式
}
</script>
</body>
对象名.className='类样式名'
对象名.classLlist 类样式的list集合
classList的方法
add:添加类样式
remove：删除类样式
length:类样式个数
删除class样式
<body>
<div class="a" id="div1">
<p>段落中的文字</p>
<a href="http://www.baidu.com">百度</a>
</div>
<a href="http://www.cnblogs.com">博客</a>
<script src="01.js"></script>
<p>
<button id="btnRemove">删除层的第一个类样式</button>
</p>
<script>
var btn9 = document.querySelector('#btnRemove');
btn9.onclick = function(){
//读取第一个超链接
var target = document.querySelector('#div1');
//删除第一个类样式
if(target.classList.length>0){
target.classList.remove(target.classList[0])
}
}
</script>
</body>
history,历史属性
history,历史属性，记录浏览器窗口中一次打开的网页的浏览历史记录，AJAX技术
back(n):在历史记录中后退n步
forward(n):在历史记录中前进n步
go(n):在历史记录中后退或前进|n|步
定时器函数
setTimeout(回调函数，定时的长度) 只计时一次
setInterval(回调函数，定时的长度) 循环计时
时间长度：毫秒单位
回调函数：处理函数，定时的时间到了就执行
停止计时me
clearTimeout(定时对象)
clearInterval(定时对象)
进入后3秒返回上一页
html1
<body>
<a href="javascript:void(0);"><img src="a.jpeg" alt="风景"></a>
<a href="javascript:void(0);"><img src="b.jpeg" alt="风景"></a>
<a href="javascript:void(0);"><img src="c.jpg" alt="风景"></a>
<a href="javascript:void(0);"><img src="d.jpg" alt="风景"></a>
<script>
// 获取到网页中所有的超链接元素
var as = document.getElementsByTagName('a');
as[2].onclick = function(){
// 单击第三张图片跳转进去该页面
location.href = "02.html";
}
</script>
</body>
html2
<body>
<p id="info">页面还有<span id="time">3</span>秒就跳转到首页</p>
<img src="c.jpg" alt="" width="258" height="39">
<a hrtf = "javascript:history.back(1);">回到首页</a>
<script>
var span = document.getElementById('time');
var val = 3;
setInterval(function(){// 停留3秒回到首页
val--;// 时间变化
span.innerHTML = val;// 改变时间显示
if(val === 0){// 跳转
history.back(1);
}
},1000);
</script>
</body>
点击开始暂停
<p id="st"></p>
<input type="button" value = "开始" id="btnStart">
<input type="button" value = "暂停" id="btnPause">
<script>
//获取到网页中的开始和暂停按钮
var btnStart = document.getElementById('btnStart');
var btnPause = document.getElementById('btnPause');
var p = document.getElementById('st');//获取到网页中的st段落
var timer; // 记录定时器对象的变量
btnStart.onclick = function(){
timer = setInterval(function(){ //开始计时
var time = new Date(); // 将当前的时间显示到p段落中
p.innerHTML = time.toLocaleTimeString();
},1000);
}
btnPause.onclick = function(){
if(timer){
clearInterval(timer); // 停止计时
}
}
</script>
对象的层级关系属性
父节点parentNode
子节点children
前面的兄弟节点:previousSibling
后面的兄弟节点:nextSibling
<body>
<div id="div1">
<div>内部的层</div>
<p id="p1">内部的段落</p>
<a href="#">百度</a>
</div>
<p>
<button id="btnParent">获取内部段落的父节点</button>
<button id="btnSibling">获取内部段落的兄弟节点</button>
</p>
<script>
var btn1 = document.querySelector('#btnParent');
btn1.onclick = function(){
var p = document.querySelector('#p1');
var div = p.parentNode;//获取父节点
var ns = p.children; // 孩子节点
var xd = p.previousSibling; // 前兄弟节点
}
</script>
</body>
显示、隐藏
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
<body>
<p class="hide">1</p>
<p class="show">2</p>
</body>
this节点
<script>
li.onclick = function(){
var x = parseInt(this.innerHTML); // 获取li节点内容
}
</script>
悬停
<body>
<input type="button" value = "悬停" id="btn">
<script>
var lbt = document.getElementById('btn')
var dsq;
function work(){
dsq = setInterval(function(){
//找出现在在显示的图片
console.log('a');
},100);
}
//悬停暂停
lbt.onmouseover = function(){
clearInterval(dsq);
}
lbt.onmouseleave = function(){
//离开输出
work();
}
</script>
</body>
轮播图案例
<style>
#lbt{
width:500px;
height:500px;
}
#lbt img{
width:500px;
height: 500px;
}
.hide{
display: none;
}
.show{
display: block;
}
#lbt li{
display:inline-block;
list-style:none;
width:20px;
height: 20px;
text-align:center;
line-height: 20px;
color:white;
position:relative;
top:-60px;
left: 250px;
}
.current{
background-color:red;
}
.nocurrent{
background-color:#999;
}
</style>
</head>
<body>
<!-- 轮播图案例 -->
<!-- 一般而言，独立的单元都会封装在一个独立的容器中 -->
<div id="lbt">
<div class="imgs">
<img src="a.jpeg" class = "show" alt="">
<img src="b.jpeg" class ="hide" alt="">
<img src="c.jpg" class ="hide" alt="">
<img src="d.jpg" class ="hide" alt="">
</div>
<ul>
<li class="current">1</li>
<li class="nocurrent">2</li>
<li class="nocurrent">3</li>
<li class="nocurrent">4</li>
</ul>
</div>
<script>
//轮播图思路：定时显示相关图片，并且隐藏已经显示的图片
//找出所有的图片和所有的li
var lbt = document.getElementById('lbt');
var imgs = lbt.getElementsByTagName('img');
var lis = lbt.getElementsByTagName('li');
var dsq;
function work(){
dsq = setInterval(function(){
//找出现在在显示的图片
var index=0;
for(;index<imgs.length;index++){
if(imgs[index].className==='show'){
break;
}
}
//计算需要显示的图片的下标
var next = index+1;
if(next==imgs.length){
next = 0;
}
imgs[index].className = 'hide';//隐藏现在显示的图片
imgs[next].className = 'show';//显示下一张图片
lis[index].className = 'nocurrent';
lis[next].className = 'current';
},1000)
}
work();//开始轮播
//给每个li订阅单击事件的处理函数
for(var i=0;i<lis.length;i++){
var li = lis[i];
li.onclick = function(){
// 隐藏所有的图片
for(var j=0;j<imgs.length;j++){
imgs[j].className='hide';
}
//设置所有的li都是非当前的
for(var j=0;j<lis.length;j++){
lis[j].className="nocurrent";
}
//获取被单击的li中的数字
var x = parseInt(this.innerHTML);
x--;
//显示对应的图像
imgs[x].className = "show";
lis[x].className = 'current';
}
}
//悬停到轮播图上暂停
lbt.onmouseover = function(){
clearInterval(dsq);
}
lbt.onmouseleave = function(){
//重新开始轮播
work();
}
</script>
</body>
事件驱动
| 函数 | 说明 |
|---|---|
| onclick | 鼠标单击事件（使用频繁） |
| dblclick | 鼠标双击 |
| onmousedown | 按下鼠标 |
| onmouseup | 鼠标弹出来 |
| onmousemove | 鼠标移动（使用频繁） |
| onmouseover | 鼠标悬停（使用频繁） |
| onmouseenter | 鼠标进入 |
| onmouseleave | 鼠标离开（使用频繁） |
| onkeypress | 按键按键（使用频繁） |
| onkeydown | 按键按下 |
| onkeyup | 按键弹起 |
| onchange | 文本框中的文本改变了 |
| onfocus | 表单元素获得焦点（提示信息） |
| onblur | 表单元素失去焦点（是否合法）（使用频繁） |
| onsubmit | 表单将要提交 |
| noload | 加载完毕 |
| resize | 改变浏览器窗口的大小 |
事件处理函数
对象名.事件名 = function(){} 该方法有兼容性
<body>
<button id="btn1">普通</button>
<script>
var btn1 = document.getElementById('btn1');
btn1.onclick = function(e){ // e为事件参数
alert('已经订阅了处理函数');
}
</script>
</body>
对象名.addEventListenter(事件类型,处理函数); 没有兼容性问题，几乎所有浏览器可用事件类型就是事件名去掉on，写成字符串格式
<body>
<button id="btn2">addEventListenter</button>
<script>
// 使用addEventListener订阅处理函数
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click',function(){
alert('使用addEventListener订阅了处理函数');
});
</script>
</body>
文本插入innerHTML
<body>
<div id="div1">
<p id="p1">
<button id="btn3">单击我</button>
</p>
</div>
<script>
var div = document.getElementById('div1');
div.onmousemove = function(e){
var info = 'X='+e.screenX+'px;y='+e.screenY+'px';
this.innerHTML=info;
}
</script>
</body>
事件捕获
事件捕获方式一般有两种：冒泡方式 捕获方式
一般使用冒泡方式：从事件源开始沿着父子关系向父元素蔓延，一一的触发对应事件
事件处理函数中可以阻止冒泡：事件参数.stopPropagation()
<body>
<div id="div1">
<p id="p1">
<button id="btn3">单击我</button>
</p>
</div>
<input type="text" id="txtInfo" value="" /></imput>
<script>
var div = document.getElementById('div1');
var p = document.getElementById('p1');
var btn3 = document.getElementById('btn3');
div.onclick = function(){
console.log('div被点击了');
}
p.onclick = function(){
console.log('p被点击了');
}
btn3.onclick = function(e){
console.log('btn3被点击了');
e.stopPropagation(); // 阻止冒泡
}
</script>
</body>
新增元素
传统的正式的方式
创建新的元素：document.createElement('标签名')
丰富新元素的信息：setAttribute等方式去添加HTML属性，innerHTML(innerTEXT)设置元素的内容，StyleSheet,className,classList设置元素的样式
将新元素添加到页面中
父元素对象名.append(新元素)：将新元素作为父元素的最后一个子元素
父元素对象名.insertBefore(新元素，参考位置的兄弟元素)：将新元素插入到兄弟元素前面
常用新增元素的方式
用字符串方式去拼接HTML代码
将拼接出来的HTML代码作为内容赋值给元素的innerHTML
添加li元素
<body>
<h3>水果市场</h3>
<ul id="ul1">
<li>苹果</li>
<li>香蕉</li>
<li>火龙果</li>
</ul>
<div id="div1"></div>
<button id="btn1">添加新水果</button>
<script>
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
var fname = prompt('请输入水果的名称');
var li = document.createElement('li');// 创建li元素
li.innerText = fname;// 设置li的内容为新水果名称
li.setAttribute('pricce','100');
li.style.color = 'red';
var ul = document.querySelector('#ul1');// 在ul中追加新的li元素
// ul.append(li); // 插入末尾
var pos=ul.children[1]; //插到第二个之前
ul.insertBefore(li,pos);
});
</script>
</body>
在DIV中新增文本框
<body>
<div id="div1"></div>
<button id="btn2">在DIV中添加文本框</button>
<script>
//在DIV中新增文本框
var btn2 = document.querySelector('#btn2');
btn2.onclick = function(){
//给div新增一个文本框子元素
var text = document.createElement('input');
text.type='text';
text.value='';
// var text = '<input type="text" value="" />'; // 等价于上面三行？？？？？？？？？？
var div = document.querySelector('#div1');
div.append(text);
}
</script>
</body>
删除元素
找到需要删除的元素以及它的父元素
删除：父元素.removeChild(需要删除的元素);
删除按钮
<body>
<table id="ps">
<tr>
<td>笔记本</td>
<td>500</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>空调</td>
<td>3000</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<script>
var table = document.querySelector('#ps');
var as = table.getElementsByTagName('a');
for(var index in as){//foreach循环，遍历数组中的每个元素 for(var i=0;i<as.length;i++){}
as[index].onclick = function(){
var tr = this.parentNode.parentNode;
if(confirm('确定要删除本行吗')){
tr.parentNode.removeChild(tr);
}
}
}
</script>
</body>
隔行换色
<body>
<table id="ps">
<tr>
<td>菜单</td>
<td>价格</td>
</tr>
<tr>
<td>笔记本</td>
<td>500</td>
</tr>
<tr>
<td>空调</td>
<td>3000</td>
</tr>
</table>
<script>
var table = document.getElementById('ps');
var btn = table.getElementsByTagName('tr');
for(var i=0;i<btn.length;i++){
if(i%2==1){
btn[i].style.backgroundColor='#ccc';
}else{
btn[i].style.backgroundColor='#999';
}
}
</script>
</body>
复选框
<body>
<table id="mytable">
<tr>
<td><input type="checkbox" /></td>
<td>菜单</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>笔记本</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>空调</td>
</tr>
</table>
<script>
var table = document.getElementById('mytable');
var chks = table.getElementsByTagName('input');
var chkAll = chks[0];//第一个复选框就是全选复选框
chkAll.onclick = function(){//给全选复选框订阅click事件的处理函数
for(var i=1;i<chks.length;i++){
chks[i].checked = chkAll.checked;
}
}
//其他复选框中单击，全部其他复选框都选中，则全选复选框需要设置为选中,否则，全选复选框设置为没有选中
for(var i=1;i<chks.length;i++){
chks[i].onclick = function(){//计算所有其他复选框的checked属性的逻辑与的结果
var result=true;
for(var j=1;j<chks.length;j++){
result = result && chks[j].checked;
}
chkAll.checked = result;
}
}
</script>
</body>
案例————手风琴效果
<style>
*{
padding:0px;
margin: 0px;
}
#sfq{
width: 200px;
height: auto;
border:1px solid #666;
text-align: center;
}
.group h3{
background-color:#666;
color:white;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<body>
<div id="sfq">
<div class="group">
<h3>同学</h3>
<div class="content show">
<p>张三</p>
<p>李四</p>
</div>
</div>
<div class="group">
<h3>朋友</h3>
<div class="content hide">
<p>Tom</p>
<p>Rose</p>
</div>
</div>
<div class="group">
<h3>陌生人</h3>
<div class="content hide">
<p>ABC</p>
<p>李四</p>
</div>
</div>
</div>
<script>
//查找所有的组标题
var sfq = document.querySelector('#sfq');
var h3s = sfq.getElementsByTagName('h3');
//每个组标题订阅click事件的处理函数
for(var i=0;i<h3s.length;i++){
h3s[i].onclick = function(){
// 隐藏所有组的数据
var contents = document.querySelectorAll('.content');
for(var j=0;j<contents.length;j++){
contents[j].classList.remove(contents[j].classList[1]);
contents[j].classList.add('hide');
}
//显示被单击的组的数据
var div = this.nextSibling;
while(div.nodeType==3){
div = div.nextSibling;
}
div.classList.remove(div.classList[1]);
div.classList.add('show');
}
}
</script>
</body>
案例——购物车
<body>
<h2>我的购物车</h2>
<hr>
<table id="cart">
<tr>
<th><input type="checkbox" /></th>
<th>商品名称</th>
<th>单价</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr class="data">
<td><input type="checkbox" /></td>
<td>华硕笔记本</td>
<td>4300</td>
<td>1</td>
<td>4300</td>
<td>
<a class="edit" href="javascript:void(0);">修改</a>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" /></td>
<td>苹果IPAD</td>
<td>4500</td>
<td>2</td>
<td>9000</td>
<td>
<a class="edit" href="javascript:void(0);">修改</a>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" /></td>
<td>格力空调</td>
<td>2000</td>
<td>1</td>
<td>2000</td>
<td>
<a class="edit" href="javascript:void(0);">修改</a>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" /></td>
<td>春兰空调</td>
<td>1600</td>
<td>1</td>
<td>1600</td>
<td>
<a class="edit" href="javascript:void(0);">修改</a>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="info" style="display:none;">
<td colspan="6" style="color:red;font-size: 20px;">购物车为空，没有购买数据</td>
</tr>
<tr>
<td>总计</td>
<td colspan="5" class="total">16900</td>
</tr>
</table>
<script>
var oldquantity;//记录原来的购买数量
//查找到所有的删除和修改按钮
var edits = document.querySelectorAll('.edit');
var deletes = document.querySelectorAll('.delete');
for(var i=0;i<edits.length;i++){//给每个按钮订阅click事件的处理函数
edits[i].onclick = function(){
//找到购买数量的td
var tr = this.parentNode.parentNode;
var tds = tr.getElementsByTagName('td');
if(this.innerText == '修改'){
oldquantity = parseInt(tds[3].innerHTML);//记录原来的购买数量
var html = '<input type="text" value="'+tds[3].innerHTML+'" />';//拼接文本的html代码
tds[3].innerHTML = html;//将文本框的html代码设置到购买数量单元格中
this.innerText='确定';//将按钮上的文字从修改设置为确定
}else{
//将文本框中修改后的数量写回到购买数量单元格中
//获取到购买数量单元格中的文本框
var text = tds[3].children[0];
var val = parseInt(text.value);
if(val<=0){
//询问是否删除
if(confirm('购买数量小于等于0，你是需要删除这个购买商品吗？')){
del(this.parentNode.parentNode);
}else{
//取消删除，就要还原购买数量
tds[3].innerHTML = oldquantity;
}
}else{
//将文本框的value属性值设置到单元格的内容中
tds[3].innerHTML = val;
}
//重新计算总价和小计
calc();
//按钮上的文字设置成修改
this.innerText = '修改';
}
}
}
for(var i=0;i<deletes.length;i++){
deletes[i].onclick = function(){
var tr = this.parentNode.parentNode;
if(confirm('确定要删除这项购买商品吗？')){
del(tr);
}
}
}
//tr形参就是需要删除的行
function del(tr){
tr.parentNode.removeChild(tr);
//调用计算价格的函数
calc();
//判断是否清空了全部购买数据，是的，显示提示信息
var datas = document.querySelectorAll('.data');
if(datas.length==0){
var info = document.querySelector('.info');
info.style.display="block";
}
}
function calc(){
var total=0,cnt=0;
//查找多有的数据行
var datas = document.querySelectorAll('.data');
//遍历每行
for(var i=0;i<datas.length;i++){
var tds = datas[i].getElementsByTagName('td');
// 计算每行的小计：读取到单价和购买数量，计算它们的积，即小计
var price = parseFloat(tds[2].innerText);
var quantity = parseInt(tds[3].innerText);
cnt = price*quantity;
// 将小计设置到行中显示
tds[4].innerText = cnt;
// 将小计加入到总价格中
total +=cnt;
}
//将总计设置到最后一行中显示
var tt = document.querySelector('.total');
tt.innerText=total;
}
</script>
</body>
获取输入框内容
this.value 输入框内容
<body>
<form action="#" method="post">
<p>确认密码：<input type="password" id="qpwd" name="qpwd"><span color="red">*</span></p>
</form>
<script>
var qpwd = document.querySelector('#qpwd');
qpwd.onblur = function(){
alert(this.value);// 输出输入框内容
}
</script>
</body>
表单
var info = "hello";
console.log(info.length);
console.log(info.indexOf('@')); // @是否在info中，在则返回序号，不在返回-1
console.log(info.toUpperCase()); // 转大写字母
console.log(info.toLowerCase()); // 转小写
console.log(info.substring(0,3)); // 取子串
登入验证
账号不能为空，密码必须大于6位
法1：不能立即验证
<body>
<form id="myform" action="#" method="post">
<p>账号：<input type="text" id="account" name="account"><span style="color:red;">*</span></p>
<p>密码：<input type="password" id="pwd" name="pwd"><span style="color:red;">*</span></p>
<p><input type="submit" value="提交"></p>
</form>
<script>
//验证：账号不能为空；密码的长度必须>=6
//1 获取需要验证的表单或者表单元素
var form = document.querySelector('#myform');
//2 订阅onsubmit事件的处理函数
form.onsubmit = function(e){//验证账号不能为空
var acc = document.querySelector('#account');
var span1 = acc.nextSibling;
if(acc.value.length<=0){//不合法,显示错误提示信息
span1.innerHTML="账号不能为空";
span1.style.color="red";
// 阻止提交，阻止默认行为
e.preventDefault();
}else{
span1.innerHTML="有效的账号";
span1.style.color="green";
}
var pwd = document.querySelector('#pwd');
var span2 = pwd.nextSibling;
if(pwd.value.length<=5){//不合法,显示错误提示信息
span2.innerHTML="密码长度必须大于等于6";
span2.style.color="red";// 阻止提交，阻止默认行为
e.preventDefault();
}else{
span2.innerHTML="有效的密码";
span2.style.color="green";
}
}
</script>
</body>
法二：失去焦点立即验证 onblur
<body>
<form action="#" method="post">
<p>账号：<input type="text" id="account" name="account"><span color="red">*</span></p>
<p>密码：<input type="password" id="pwd" name="pwd"><span color="red">*</span></p>
<p><input type="submit" value = "提交"></p>
</form>
<script>
var acc = document.querySelector('#account');
var span1 = acc.nextSibling;
acc.onblur = function(){
if(this.value.length<=0){
span1.innerHTML = '账号不能为空';
span1.style.color="red";
}else{
span1.innerHTML = '有效账号';
span1.style.color="green";
}
}
var pwd = document.querySelector('#pwd');
var span2 = pwd.nextSibling;
pwd.onblur = function(){
if(this.value.length<=5){
span2.innerHTML = '密码不能少于6位';
span2.style.color="red";
}else{
span2.innerHTML = '有效密码';
span2.style.color="green";
}
}
</script>
</body>
法三利用正则表达式？？？？？？？？？？？
创建正则表达式对象
var reg = new RegExp(表达式，附加参数)
var reg = 正则表达式，i为忽略大小写，g全局匹配
调用表达式对象的方法验证
reg.test(检验目标)：true 合法 false 不合法
<script>
var reg = new RegExp(/^\w{6,10}$/ig); // 不能少于6到9位 i为忽略大小写 g全局匹配
console.log(reg.test('bei')); // false
console.log(reg.test('beijin')); // true
console.log(reg.test('beijingbeijing')); // false
console.log(reg.test('beijingbei')); // true
</script>
<!-- <form action="#" method="post">
<p>账号：<input type="text" id="account" name="account"><span color="red">*</span></p>
<p>密码：<input type="password" id="pwd" name="pwd"><span color="red">*</span></p>
<p>确认密码：<input type="text" id="pwd" name="qpwd"><span color="red">*</span></p>
<p>电子邮箱：<input type="text" id="pwd" name="email"><span color="red">*</span></p>
<p>手机号码：<input type="text" id="pwd" name="phone"><span color="red">*</span></p>
<p><input type="submit" value = "注册"></p>
</form>
<script>
// var acc1 = new RegExp(/^\w{1,}$/ig);
// var acc = document.querySelector('#account');
// var span1 = acc.nextSibling;
// acc.onblur = function(){
// if(acc1.test(this.value)){
// span1.innerHTML = '账号不能为空';
// span1.style.color="red";
// }else{
// span1.innerHTML = '有效账号';
// span1.style.color="green";
// }
// }
// var pwd1 = new RegExp(/^\w{5,10}$/ig);
// var pwd = document.querySelector('#pwd');
// var span2 = pwd.nextSibling;
// pwd.onblur = function(){
// if(pwd1.test(this.value)){
// span2.innerHTML = '密码长度为6到10位';
// span2.style.color="red";
// }else{
// span2.innerHTML = '有效密码';
// span2.style.color="green";
// }
// }
var acc1 = new RegExp(/^\w{0,10}$/ig);
console.log(acc1.test(''));
console.log(acc1.test('a'));
console.log(acc1.test('aa'));
console.log(acc1.test('aaa'));
console.log(acc1.test('aaaa'));
console.log(acc1.test('aaaaa'));
console.log(acc1.test('aaaaaa'));
</script> -->
JavaScript高级编程
定义对象：var 对象名
var 对象名={
属性名：值，...,
方法名：function(){
//方法体
}
}
<script>
var stu={
name:'Zhansan',
age:12,
sayHello:function(name){
console.log(this.name+' hello '+name)
}
}
stu.sayHello('tom'); //Zhansan hello tom
</script>
通过new Object()创建正则表达式对象，添加对象自己的属性和方法
var 对象名=new Object();
对象名.属性名=值;
对象名.方法名=function(){}
<body>
<script>
var stu = new Object();
stu.name='Zhansan';
stu.age=12;
stu.sayHello=function(name){
console.log(this.name+' hello '+name)
}
stu.sayHello('tom'); //Zhansan hello tom
</script>
</body>
通过构造函数创建对象
构造函数
function 类名([形参序列]){
this.属性名 = 值; // 定义属性
this.方法名 = function(){} //定义方法
}
类名：一般首字母大写
函数体中的代码是定义属性和方法
创建对象：
var 对象名 = new 类名([形参序列])
<body>
<script>
// 书写够着函数
function Student(name,age){
this.name=name;
this.age=age;
this.sayHELLO = function(name){
console.log(this.name+' hello '+name)
}
}
var s1=new Student('Zhansan', 12);
s1.sayHELLO('Wan'); // Zhansan hello Wan
</script>
</body>
直接在构造函数中定义的方法，每个对象都有自己的这样的方法,浪费空间
一般而言，类的方法需要定义在构造函数的原型对象上定义类的方法，节省空间
类名.prototype.方法名=function(){}
<body>
<script>
// 书写构造函数
function Student(name,age){
this.name=name;
this.age=age;
}
// 在构造函数的原型对象上定义类的方法
Student.prototype.sayHELLO = function(name){
console.log(this.name+' hello '+name)
}
var s1=new Student('Zhansan', 12);
s1.sayHELLO('Wan'); // Zhansan hello Wan
</script>
</body>
通过构造函数创建了对象，内存存在如下3个对象：
构造函数：prototype 属性引用构造函数的原型对象
对象：proto 属性引用构造函数的原型对象
构造函数的原型对象：constructor属性：引用构造函数
通过对象调用方法，现在对象的内存空间查找方法，如果有就执行对象上的方法，
如果没有，则到原型对象上查找方法并执行
<body>
<script>
// 书写构造函数
function Student(name,age){
this.name=name;
this.age=age;
}
// 在构造函数的原型对象上定义类的方法
Student.prototype.sayHELLO = function(name){
console.log(this.name+' hello '+name)
}
var s1=new Student('Zhansan', 12);
s1.sayHELLO=function(name){
console.log('OK');
}
s1.sayHELLO('Wan'); // OK
</script>
</body>
实体类的继承
JavaScript中调用函数：1、函数名([形参序列])
2、函数名.call|apply:可以改变函数中的this引用
使用call|apply来实现属性的继承
写代码将子类的原型对象设置为父类对象，再在子类的原型上电泳仪子类特有的方法
这样，子类对象就可以调用父类中定义的方法，实现继承方法
<body>
<script>
// 父类构造函数
function Person(name){
this.name=name;
}
Person.prototype.sayHi=function(){
console.log('Hi');
}
// 子类构造函数
function Employee(name,salary){
// 继承父类的name属性
// 通过使用call来调用父类构造含，使子类对象拥有父类属性，从而实现继承属性
Person.call(this,name);
// 定义子类特有属性
this.salary=salary;
}
// 创建一个父类对象作为子类的构造函数的原型对象
Employee.prototype = new Person();
Employee.prototype.work=function(){
console.log('work');
}
var emp=new Employee('Wan', 1000);
console.log(emp);
emp.sayHi();
emp.work();
</script>
</body>
读者类
<body>
<script>
function Reader(name,readnumber,book){
this.name=name;
this.readnumber=readnumber;
this.book=book;
}
Reader.prototype.prin = function(){
console.log(this.book);
}
Reader.prototype.le = function(na){
this.book.push(na);
}
Reader.prototype.fe = function(){
if(this.book.length>0){
this.book.pop();
}else{
alert('没有书籍');
}
}
var read = new Reader('liu',123,['a','b','c']);
read.prin();
read.le('e');
read.prin();
read.fe();
read.prin();
</script>
</body>
闭包
三个按钮点击哪个返回哪个
<body>
<script>for(var i=0;i<btns.length;i++){
btns[i].onclick = (function(x){
return function(){
console.log(x);
}
})(i);
}
</script>
</body>
执行表单验证的通用函数
target: 需要验证的表单元素
reg: 正则表达式
pos: 显示提示信息的元素
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
