javaScript基础
来源：互联网 发布：2016网络梗 编辑：程序博客网 时间：2024/05/24 23:12
//review:
数据类型的隐式转换
字符串>数字>布尔值
强制类型转换
toString parseInt parseFloat 无法转换的时候会返回NaN
typeof传入一个参数判断是什么类型
JS中5/2的结果是2.5
多了===和!== 比较的是值和类型
一. 流程控制
表达式的值 对应的布尔值
true true
false false
0 false
null false
“” false
undefined false
NaN false
“非空值” true
//5.条件表达式
//js中的条件表达式可以是任意类型的值
//当以非布尔值作为条件的时候，空值等价于false，非空的值等价于true
//空值: 0、null、""、NaN、undefined
//目的:简化JS的编程代码
//假设:判断某变量，当它非空时输出OK
var k = NaN;
if(k){
console.log("OK");
}else{
console.log("NOT OK");
}
var w ="0";
w && console.log("hi");
//常用内置对象
-String对象:
-Number对象:
-Boolean对象:
-Array对象:
-Math对象:
-Date对象:
-RegExp对象:
-Function对象:
//String对象
x.charCodeAt(index):返回指定位置字符的Unicode编码
-JS中的String有length属性,java中是length方法。
-JS中多出一个方法s.charCodeAt(index)。
-JS比java少了一个replaceAll()方法。
-JS中的String和java基本类似
//Number对象
-toFixed(index)重要
var n = 3.1415926;
console.log(n.toFixed(3));
var s = 3.1;
console.log(s.toFixed(3));
//Boolean对象
没有API需要了解
//Array对象(重要)
-如何创建数组
-数组倒转方法
-数组排序方法(重要)
-vars = [100,200,300]
-vara1 = new Array();
//Array.sort();
两两相比假如:a和b，是一个迭代的过程。
有一个专门的方法:
functioncompare(a,b){
return a.unidecode – b. unidecode;
//如果返回值>0，ab互换位置
//如果返回值<0，位置不变
}
排序规则:按照有小到大排序，该规则不能改动。
默认的比较方法是按照字符串进行比较，该方法可以置换。
//2.Array
//1)如何创建数组
//理解:JS中的数组都是Object数组
var a1 = ["zhangsan","23",true];
console.log(a1[0]);
var a2 =new Array();
a2.push("lisi");
a2.push(25);
a2.push(false);
console.log(a2[2]);
//2)数组倒转与排序,数组的方法直接修改原数组
var a3 = [5,1,8,12,6,3];
a3.reverse();
console.log(a3.toString());
//3)数组排序
a3.sort(function(a,b){
return a-b;
});
console.log(a3);
//Math对象
//Date对象
var d1 = new Date();
var d2 =new Date("2016/10/112:12:12");
console.log(d1);
console.log(d2);
console.log(d1.toLocaleDateString());
console.log(d1.toLocaleTimeString());
console.log(d1.getFullYear());
console.log(d1.getMonth()+1);
console.log(d1.getDate());
//RegExp
1. 若何创建正则对象
a. /\d/g g表示全局模式
b. new RegExp(\\d,”g”) 需要转义
2. 检测模式
a. g:global,全局模式
b. i:ignore，忽略大小写模式
3. 正则对象的方法
a. reg.test(str) 相当重要
b. reg.exec(str)
//5.1正则对象的方法
//1)reg.test(str),检查str中是否包含和reg匹配的子串
console.log(reg.test(str));
//2)reg.exec(str)
//非全局模式，在str中找出第一个和reg匹配的子串
console.log(reg.exec(str));
//全局模式下，第N次调用该方法，则返回str中与reg匹配的子串
reg = /no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
//5.2 String中支持正则的方法
//1）str.replace(reg ,目标)重要
//将str中和正则reg匹配的子串替换成目标
//不会改变原来字符串，会产生一个新的字符串
console.log(str.replace(reg,"bu"));
//2) str.match(reg)
//从str中找出和正则匹配的子串
console.log(str.match(reg));
//3) str.search(reg)
//从str中找出第一个和reg匹配的子串的索引
console.log(str.search(reg));
//onblur=” ”;失去焦点事件
//给元素加样式，一般是 元素.className=”xxx”
//onsubmit
form上有此事件，该时间触发时表单就提交数据。
在点击提交(submit)按钮时自动触发onsubmit事件。
onsubmit事件内默认返回true，若设置返回false，则取消事件，数据不提交。
//
<style>
.ok {
color: green;
}
.error {
color: red;
}
</style>
<script>
function checkCode() {
//获取账号
var code =document.getElementById("code").value;
//写正则
var span_code =document.getElementById("codemsg");
var reg_code = /^\w{5,10}$/;
if (reg_code.test(code)) {
//正确，将span设置绿色，否则红色
span_code.className= "ok";
returntrue;
} else {
span_code.className= "error";
returnfalse;
}
}
function checkPwd() {
var psssword =document.getElementById("password").value;
var span_msg =document.getElementById("psdmsg");
var reg_msg = /^\w{10,20}$/;
if (reg_msg.test(psssword)){
span_msg.className= "ok";
returntrue;
} else {
span_msg.className="error";
returnfalse;
}
}
</script>
</head>
<body>
<formaction="http://w3.tedu.cn/sql/sql_default.html"onsubmit="return checkCode()+checkPwd()==2;">
<p>
账号:<inputtype="text"id="code"onblur="checkCode()">
<spanid="codemsg">5-10位字母、数字、下划线</span>
</p>
<p>
密码:<inputtype="password"id="password"onblur="checkPwd()">
<spanid="psdmsg">10-20位字母、数字、下划线</span>
</p>
<p>
<inputtype="submit"value="登录">
</p>
</form>
</body>
//function关键字(重要)
function对象
//6.Function
//打开网页时,浏览器执行到此处，仅仅是创建了一个函数对象，并
//没有调用这个函数,不传参数的时候调用时候几个就加几个
function sum(a,b,c){
var s =0;
if(arguments.length!=0){
for(vari=0;i<arguments.length;i++){
s+= arguments[i];
}
}
return s;
}
//打开网页时直接调用
console.log(sum(1,2));
-arguments(重要)
-eval(重要)
//匿名函数
数组排序的sort需要匿名函数
JS自带函数
-eval:
var s ="2+3";
console.log(s);//2+3
console.log(eval(s));5
作用是将字符串变为整数类型的加减
一般常用作计算器
一. 外部对象
BOM和DOM
浏览器对象
window:
-location:操作地址栏
--history:操作历史记录
-document:文档，代表浏览器显示的整个网页
DOM
-screen:获取屏幕宽高、颜色等等
-navigator:基础
BOM（Browser ObjectModel）:window和他的操作对象
document:
-html:
head:meta 、title
body:div:<p><h>
文档操作模型。
1. 外部对象就是浏览器提供的API
2. BOM包含了DOM
//window
//弹出框
<script>
function f1(){
//如果调用window属性或方法可省略对象名(window)
//我们直接调用的属性或方法浏览器默认为调用window的。
//1.弹出框
alert("好久不见!");
}
function f2(){
var b = confirm("确认删除?");
console.log(b);
}
function f3(){
var v = prompt("好久不见了不是吗?");
console.log(v);
}
</script>
</head>
<body>
<p>
<inputtype="button"value="按钮1"onclick="f1()"/>
<inputtype="button"value="按钮2"onclick="f2()"/>
<inputtype="button"value="按钮3"onclick="f3()"/>
</p>
</body>
//定时器
//周期性定时器
//setInterval(exp,time);
exp:周期性触发代码,习惯写匿名函数
time:单位为毫秒
clearInterval(tID):停止启动的定时器
//2.周期性定时器
functionf4(){
//启动周期性定时器，让它每隔1000毫秒调用一次函数，返回的是定时器的id，用来停止此定时器
var n = 5;
var id = setInterval(function(){
console.log(n--);
if(!n){
//通过定时器id来停止它
console.log("DUANG");
clearInterval(id);
}
},1000);
//启动定时器相当于启动了一个线程，当前方法f4()相当于主线程，而定时器相当于支线程，
//二者并发执行不会等待，所以主线程在启动支线程之后立刻执行此行
console.log("duang");
}
var id;
//3.一次性定时器
function f5(){
//启动一次性定时器，让它在3000毫秒之后调用函数，返回定时器的ID。一次性定时器会在执行一次后自动停止，
//若在未执行前希望手动停止，则需要使用ID。
id =setTimeout(function(){
console.log("dingdingdingding");
},3000);
}
function f6(){
//若定时器已经执行完成，则停止无效
//若定时器未执行，则提前将其停止
clearTimeout(id);
}
</script>
//一次性定时器
<script>
var id;
function send() {
if (id) {
//id非空，则定时器已启动，不要再次启动
return;
}
var p =document.getElementById("msg");
p.innerHTML= "正在发送...";
id =setTimeout(function() {
p.innerHTML= "已发送!"
//此时定时器自动停止,清空id
id= null;
},3000);
}
function cancel() {
if (id) {
//id非空，则定时器已启动，可以停止
var p =document.getElementById("msg");
p.innerHTML= "已撤销!"
clearTimeout(id);
//清空id
id= null;
}
}
</script>
<style>
#msg {
width: 200px;
height: 40px;
line-height: 40px;
text-align: left;
font-size: 20px;
}
input {
height: 30px;
width: 40px;
font-size: "微软雅黑";
}
</style>
</head>
<body>
<inputtype="button"value="发送"onclick="send()"/>
<inputtype="button"value="撤销"onclick="cancel()"/>
<pid="msg"></p>
</body>
//常用属性
//location对象
-reload():重新载入当前网址，同按下刷新按钮
<script>
//1. location
function f1() {
var b = confirm("您确定要离开本页面吗?");
if (b) {
location.href= "http://tmooc.cn/web/index_new.html?tedu";
}
}
function f2(){
location.reload();
}
</script>
</head>
<body>
<inputtype="button"value="tarena"onclick="f1()"/>
<inputtype="button"value="刷新"onclick="f2()"/>
</body>
//history对象
//back()后退、forward()前进、go(num)前进几步
<script>
//1. location
function f1() {
var b = confirm("您确定要离开本页面吗?");
if (b) {
location.href= "http://tmooc.cn/web/index_new.html?tedu";
}
}
function f2(){
location.reload();
}
function f3(){
history.forward();
}
function f4(){
history.back();
}
</script>
</head>
<body>
<inputtype="button"value="tarena"onclick="f1()"/>
<inputtype="button"value="刷新"onclick="f2()"/>
<inputtype="button"value="前进"onclick="f3()"/>
<inputtype="button"value="后退"onclick="f4()"/>
</body>
//screen
width:
height:
availWidth:
availHeight:
//navigator
"Mozilla/5.0(Windows NT 6.1; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0"
项目名
//BOM外部对象
浏览器对象模式，浏览器提供的API
//定时器
有规律的动画都是定时器做的。
java Timer底部就是线程
setInterval(exp,time);
setTimeOut(exp,time);
//navigator对象
包含浏览器信息
判断是什么客户端，PC或者手机终端
//实现秒表的小程序
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
//毫秒数
var ms = 0;
//计次的次数
var n = 0;
//启动秒表
var id =null;
function start() {
if (id) {
return;
}
id =setInterval(function() {
//毫秒累加
ms+= 10;
//换算出分、秒、毫秒
var min = parseInt(ms / 1000/ 60);
var second = parseInt(ms /1000 % 60);
var milli = parseInt(ms %1000 / 10);
//分别写入对应的span
var span1 =document.getElementById("min");
var span2 =document.getElementById("second");
var span3 =document.getElementById("milli");
span1.innerHTML= prepend(min);
span2.innerHTML = prepend(second);
span3.innerHTML= prepend(milli);
}, 10)
}
//填0占位
function prepend(m){
return m.toString().length==1?"0"+m:m;
}
//暂停秒表
function stop(){
if(id){
clearInterval(id);
id= null;
}
}
//复位秒表
function reset(){
if(id){
return;
}
var span1 =document.getElementById("min");
var span2 =document.getElementById("second");
var span3 =document.getElementById("milli");
span1.innerHTML= "00";
span2.innerHTML= "00";
span3.innerHTML= "00";
ms =0;
n = 0;
}
//记录次数
function record(){
if(!id){
return;
}
//次数累加
n++;
//获取span中的分、秒、毫秒
var span1 =document.getElementById("min");
var span2 =document.getElementById("second");
var span3 =document.getElementById("milli");
//将上述信息记录到p内
var p =document.getElementById("record");
p.innerHTML+= "计次:" + n +" "+
span1.innerHTML+ ":" +
span2.innerHTML+ "." +
span3.innerHTML+"<br>";
}
</script>
</head>
<body>
<p>
<inputtype="button"value="启动"onclick="start()"/>
<inputtype="button"value="暂停"onclick="stop()"/>
<inputtype="button"value="复位"onclick="reset()"/>
<inputtype="button"value="计次"onclick="record()"/>
</p>
<p>
<spanid="min">00</span>:<spanid="second">00</span>.<spanid="milli">00</span>
</p>
<pid="record"></p>
</body>
</html>
//DOM内部对象
文档对象模型
一. DOM对象
1. 浏览器获取网页内容并解析成对象，其目的是为了面向对象编程，而不是面向字符串编程。
2. 由于这套对象具有树型结构，称其为DOM树。
3. 树型结构的对象中，每一级对象称为一个节点。
4. 根据节点所对应的网页内容的而不同，给他们分类。
结论:学习DOM就是学习他的结构和每类对象上的API
DOM操作
增删改查
//读写节点
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
//页面加载时间，在浏览器加载完页面后
//自动触发，触发时调用对应的函数
window.onload= function(){
//1.读写节点
//1.1读取节点的名称和类型
var p1 =document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//1.2读写节点的内容(<a>内容</a>)
//只要是双标签大部分都可以,单标签没有内容,例如:<br> <input>
//1.2.1 innerHTML,显示的内容包含子标签
console.log(p1.innerHTML);
p1.innerHTML="1.<u>读写</u>节点";
//1.2.2 innerText,显示的内容不包含子标签
var p2 =document.getElementById("p2");
console.log(p2.innerText);
p2.innerText= "2.<u>查询</u>节点";
//1.3 读写节点的值
//只有表单控件有值(input/select/textarea)
var btn =document.getElementById("btn1");
console.log(btn.value);
btn.value="BUTTON";
//1.4 读写节点的属性
//1.4.1 通过方法读写
//它们都是标准API，任何浏览器都支持
//读：getAttribyte("class")
//写：setAttribute("class"," ")
//删：removeAttribute("class")
var img =document.getElementById("img1");
console.log(img.getAttribute("src"));
img.setAttribute("src","../images/06.jpg");
//移出src属性，图片就消失
img.removeAttribute("src");
//1.4.2 通过属性名读写
//1)使用标准的属性名(w3c规定)
//常用属性名:className(最常用),style,id
var p6 =document.getElementById("p6");
console.log(p6.style);
p6.style.fontSize= "30px";
console.log(p6.className);
//2)使用不标准属性名(简单了解即可)
//其他的属性几乎都是非标准的
//如src、href、name等等
}
</script>
</head>
<body>
<pid="p1"><b>1.读写</b>节点</p>
<pid="p2"><b>2.查询</b>节点</p>
<pid="p3"><b>3.增删</b>节点</p>
<p><inputtype="button"value="按钮"id="btn1"/></p>
<p><imgsrc="../images/01.jpg"id="img1"/></p>
<pid="p6"class ="ss"style="color:red">最常用的是className属性</p>
</body>
</html>
//图片轮播
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
//页面加载后
var count = 0;
var id =null;
window.onload=function(){
start();
}
function start(){
//启动定时器每两秒换一张图片
id = setInterval(function(){
//累加轮播次数
count++;
//获取所有图片
var imgs =document.getElementsByTagName("img");
//遍历数组
for(vari=0;i<imgs.length;i++){
//将每个图片隐藏
imgs[i].className="hide";
}
//找出本次轮播要显示的图片
var n = count%imgs.length;
//将这个图片显示
imgs[n].className="show";
},500);
}
//停止轮播
function stop(){
clearInterval(id);
}
</script>
<style>
div{
width:218px;
height:218px;
border:1px solid #666;
}
/*让元素以行内块的形式来显示*/
.show{
display:inline-block;
}
/*隐藏元素*/
.hide{
display:none;
}
</style>
</head>
<body>
<!-- onmouseover是鼠标悬停事件 hover是css中的伪类选择器
onmouseout是鼠标离开事件
-->
<divonmouseover="stop()"onmouseout="start()">
<imgsrc="../images/01.jpg"/>
<imgsrc="../images/02.jpg"class="hide"/>
<imgsrc="../images/03.jpg"class="hide"/>
<imgsrc="../images/04.jpg"class="hide"/>
<imgsrc="../images/05.jpg"class="hide"/>
<imgsrc="../images/06.jpg"class="hide"/>
</div>
</body>
</html>
节点信息
1. 节点名称:nodeName
2. 节点类型:nodeType
节点属性
1. getAttribute()
2. setAttribute()、removeAttribute()
document.getElementById(“id”).style.color;
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
window.onload= function(){
//1.根据标签名查询节点
//1.1在整个文档(网页)内查询
var lis =document.getElementsByTagName("li");
console.log(lis);
//1.2在某个节点查询
var ul =document.getElementById("city");
var lis =ul.getElementsByTagName("li");
console.log(lis);
//2.根据层次查询节点
//查询某节点的亲戚(父亲、孩子、兄弟)
//2.1查询父亲
var gz =document.getElementById("gz");
console.log(gz.parentNode);
//2.2查询孩子
//2.2.1查询所有的孩子(带空格，了解)
console.log(ul.childNodes);
//2.2.2查询类型为元素的孩子(常用)
lis =ul.getElementsByTagName("li");
console.log(lis);
//2.3查询兄弟
//节点.父亲.孩子们[i]
var li =gz.parentNode.getElementsByTagName("li")[1];
console.log(li);
//根据name查询节点
var radios =document.getElementsByName("sex");
console.log(radios);
}
</script>
</head>
<body>
<ol>
<li>河北省</li>
<li>山东省</li>
<li>江苏省</li>
</ol>
<ulid="city">
<li>北京</li>
<li>上海</li>
<liid="gz">广州</li>
<li>深圳</li>
<li>天津</li>
</ul>
<p>
<inputtype="radio" name="sex"/>男
<inputtype="radio"name="sex"/>女
</p>
</body>
</html>
//增加和删除节点
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
//1.创建新节点li
//2.将它追加到ul的最后
function f1(){
//创建的新节点无任何内容和属性
var li =document.createElement("li");
//设置内容、值或属性
li.innerHTML="连云港";
//将其挂到DOM树下以显示
var ul =document.getElementById("city");
ul.appendChild(li);
}
//1.创建一个新节点li
//2.将它插入到ul之下，广州之前
function f2(){
var li =document.createElement("li");
li.innerHTML="连云港";
//插入节点需要两个条件:父亲、弟弟
var ul =document.getElementById("city");
var gz =document.getElementById("gz");
ul.insertBefore(li,gz);
}
//删除节点
function f3(){
var ul =document.getElementById("city");
var gz =document.getElementById("gz");
ul.removeChild(gz);
}
</script>
</head>
<body>
<p>
<inputtype="button"value="追加"onclick="f1()"/>
<inputtype="button"value="插入"onclick="f2()"/>
<inputtype="button"value="删除"onclick="f3()"/>
</p>
<ulid="city">
<li>北京</li>
<li>上海</li>
<liid="gz">广州</li>
<li>深圳</li>
</ul>
</body>
</html>
//联动菜单
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
window.onload= function(){
cities= [
["石家庄","廊坊","唐山"],
["郑州","开封","洛阳"],
["济南","青岛","烟台"]
];
}
//onchange是值改变事件，只有当控件的值发生变化时才会触发
function chg(){
//获取选中的省
var sel1 =document.getElementById("province");
//select.value 1.默认返回选中的option内容
//2.当给option设置value后，它返回的是选中的option值,value值随便设置(由程序员看情况决定)
var index = sel1.value;
//通过序号查找对应的一组城市
var pcities = cities[index];
//删除城市下拉选内旧的城市
var sel2 =document.getElementById("city");
/* var options =sel2.getElementsByTagName("option");
for(vari=options.length-1;i;i--){
sel2.removeChild(options[i]);
} */
//从内容角度实现删除
sel2.innerHTML="<option>请选择</option>"; //将城市追加到城市下拉选内
if(pcities){
for(vari=0;i<pcities.length;i++){
var option =document.createElement("option");
option.innerHTML= pcities[i];
sel2.appendChild(option);
}
}
}
</script>
</head>
<body>
省份:
<selectonchange="chg()"id="province">
<optionvalue="-1">请选择</option>
<optionvalue="0">河北省</option>
<optionvalue="1">河南省</option>
<optionvalue="2">山东省</option>
</select>
城市:
<selectid="city">
<option>请选择</option>
</select>
</body>
</html>
//购物车
onclick=”add(this)”;
this就是你正在点的元素。比如button。
<!DOCTYPEhtml>
<html>
<head>
<title>购物车</title>
<metacharset="utf-8"/>
<styletype="text/css">
h1 {
text-align: center;
}
table {
margin: 0 auto;
width: 60%;
border: 2px solid #aaa;
border-collapse: collapse;
text-align: center;
}
tableth, tabletd {
border: 2px solid #aaa;
padding: 5px;
}
th {
background-color: #eee;
}
tr:hover {
background-color: rgb(231, 231, 231);
}
</style>
<script>
//加入购物车
//参数名不能是关键字，调用此函数时传入了this，声明参数来接受它，参数名不能叫this
function add_shoppingcart(btn) {
//获取按钮的爷爷
var tr =btn.parentNode.parentNode;
//获取tr的所有孩子(td)
var tds =tr.getElementsByTagName("td");
//获取第一个td的内容(商品名)
var name = tds[0].innerHTML;
//获取第二个td的内容(单价)
var price = tds[1].innerHTML;
//测试
//创建一个新的行
var ntr =document.createElement("tr");
//获取库存
var kc = tds[3].innerHTML;
tds[3].innerHTML=kc-1;
//给这个行设置内容
ntr.innerHTML='<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<tdalign="center"><input type="button"value="-" onclick="decrease(this)"/> '+
'<inputtype="text" size="3" readonly value="1" /> '+
'<inputtype="button" value="+"onclick="increase(this)"/></td>'+
'<td>'+price+'</td>'+
'<tdalign="center"><input type="button"value="x" onclick="dele(this)"/></td>';
//将这个行追加到tbody下
var tbody =document.getElementById("goods");
tbody.appendChild(ntr);
}
function dele(btn){
var tr =btn.parentNode.parentNode;
var tbody =document.getElementById("goods");
tbody.removeChild(tr);
//增加库存
var name =tr.getElementsByTagName("td")[0].innerHTML;
console.log(name);
var table =document.getElementById("things");
var trs =table.getElementsByTagName("tr");
console.log(trs);
for(var i =1;i<trs.length;i++){
if(name==(trs[i].getElementsByTagName("td")[0].innerHTML)){
var amount =trs[i].getElementsByTagName("td")[3].innerHTML;
amount++;
trs[i].getElementsByTagName("td")[3].innerHTML=amount;
}
}
}
//加法
function increase(btn){
//获取按钮的父亲(td2)
var td2 = btn.parentNode;
//获取td2内的文本框
var text =td2.getElementsByTagName("input")[1];
//获取框内的值，+1后写回文本框
/* text.value = parseInt(text.value)+1;*/
var amount = text.value;
//字符串没有++运算，默认是算数运算
text.value= ++amount;
var td1 =td2.parentNode.getElementsByTagName("td")[1];
var price = td1.innerHTML;
//计算金额
var total = price*amount;
var td3 = td2.parentNode.getElementsByTagName("td")[3];
td3.innerHTML= total;
}
//减法
//数量不能小于1
function decrease(btn){
var td2 = btn.parentNode;
var text =td2.getElementsByTagName("input")[1];
var amount = text.value;
if(parseInt(amount)<=1){
return;
}else{
text.value= --amount;
var td1 =td2.parentNode.getElementsByTagName("td")[1];
var price = td1.innerHTML;
//计算金额
var total = price*amount;
var td3 =td2.parentNode.getElementsByTagName("td")[3];
td3.innerHTML= total;
}
}
</script>
</head>
<body>
<h1>真划算</h1>
<tableid="things">
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<tdalign="center"><inputtype="button"value="加入购物车"
onclick="add_shoppingcart(this);"/></td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<tdalign="center"><inputtype="button"value="加入购物车"
onclick="add_shoppingcart(this);"/></td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<tdalign="center"><inputtype="button"value="加入购物车"
onclick="add_shoppingcart(this);"/></td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<tdalign="center"><inputtype="button"value="加入购物车"
onclick="add_shoppingcart(this);"/></td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<tdalign="center"><inputtype="button"value="加入购物车"
onclick="add_shoppingcart(this);"/></td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbodyid="goods">
<!-- <tr>
<td>罗技M185鼠标</td>
<td>80</td>
<tdalign="center"><input type="button"value="-" /> <input
type="text"size="3"readonly value="1" /> <inputtype="button"
value="+"/></td>
<td>80</td>
<tdalign="center"><input type="button"value="x" /></td>
</tr>-->
</tbody>
<tfoot>
<tr>
<tdcolspan="3"align="right">总计</td>
<tdid="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
查询节点
--通过ID
--通过层次(节点关系)查询
parentNode
childNodes
--通过标签名称查询
--通过name属性查询
设置name=”sex”
document.getElementByName(“xxx”);
//创建新节点
newNode.type=”text”;
newNode.value=””;
newNode.style.color=””;
appendChild();
insertBefore(newBode,node);
//删除节点
node.removeChild();
一. 自定义封装
相对于实现类的DAO
--直接创建对象
--使用构造器创建对象
--使用json创建对象
1.直接量(JSON)
-var a = {“name”: “zs”,”age”:”25”}
-一个{}代表一个对象，内含多个键值对，key一般是字符串，value是任意类型的数据。
采用直接量方式创建出来的对象也叫JSON对象
2.构造器(new的函数)
function Hello()
function hi()
名字首字母大写的时候表示构造器，需要new，小写的话就是一个方法。
2.1 内置构造器
--特定:Date、RegExp、Array
--通用:Object
2.2 自定义构造器
--自定义一个函数，首字母大写
--该函数上声明需要调用者传入的参数
--调用者new这个函数来获得一个对象。
3.结论
--无论用哪种方式创建出来的对象本质是一样的
--若创建对象给别人用，建议用2.2
--若创建对象给自己用，看个人喜好选择1或是2.1
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
<script>
//1.采用直接量的方式创建对象
function f1(){
var student = {"name":"zhangsan","age":25,"job":function(){alert("我学PHP")}}
alert(student.name);
alert(student.age);
student.job();
}
//2.1采用JS内置构造器创建对象
//在JS里用来new的函数就是构造器
function f2(){
var teacher =new Object();
teacher.name= "cang";
teacher.age= 18;
teacher.job= function(){
alert("我教PHP");
};
alert(teacher.name);
alert(teacher.age);
teacher.job();
}
//2.2采用自定义构造器创建对象
//1)定义构造器
//2)声明参数
function Coder(name,age,job){
//this代表当前对象
//this.name是给此对象加一个属性叫name
//=name是将参数name赋值给这个属性
this.name = name;
this.age = age;
this.work = job;
}
//3)new这个构造器，获得一个对象
function f3(){
var coder =new Coder("yannis",18,function(){alert("我写PHP")});
alert(coder.name);
alert(coder.age);
coder.work();
}
</script>
</head>
<body>
<inputtype="button"value="按钮1"onclick="f1()"/>
<inputtype="button"value="按钮2"onclick="f2()"/>
<inputtype="button"value="按钮3"onclick="f3()"/>
</body>
</html>
二. 事件
指页面元素改变，用户在操作鼠标或键盘时触发的动作
--鼠标事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
--键盘事件
onkeydown
onkeyup
--状态改变事件
onload
onchange
onfocus
onblur 失去闪烁光标
onsubmit
event对象
--事件出发后将会产生一个event对象
1.事件概述
1.1什么是事件
-就是用户的动作、操作
-就是js被调用的时机
用户在做出什么操作时才出发调用JS
1.2事件分几类
鼠标事件，键盘事件，状态事件：某条件达成时自动触发
2.如何定义事件
2.1直接定义事件
在元素上通过属性直接定义事件
优点：直观、方便
缺点：HTML和JS耦合度高了
2.2后绑定事件
在页面加载后，用JS获取某节点，给它绑定事件。
优点：HTML和JS耦合度低
缺点：不直观
2.3 取消事件
在事件函数内returnfalse即可。
3.事件对象
3.1 什么是事件对象
事件触发时很多信息可以固定，比如坐标、比如按键等
这些信息可能在开发时要用，用的场景不是很多
浏览器为了便于程序员获取这些信息方便，
将他们统一封装到了一个对象里，叫做事件兑现event
3.2 如何获得事件对象
1)直接定义事件时
onclick=”f1(event)”
在函数f1(e)中增加参数接收event
2)后绑定事件时
事件触发并调用函数时，浏览器会自动传入event
只需要在函数f2(e)中增加参数接收event
4.事件处理机制
body-div-p-button
是从botton由内向外进行触发的。
4.1 冒泡机制
事件时由内向外传播的
这个规律就叫做冒泡机制
event.stopPropagation();
event.cancelBubble= true;
4.2 冒泡机制的作用
可以简化事件的定义
如果有很多元素都需要定义事件
可以只在他们父亲上定义一次事件即可
按照冒泡机制最终事件会传播到它们父亲上
4.3 使用冒泡机制时需要解决的问题
需要知道事件产生在哪个具体子元素上
事件产生的具体位置叫做事件源
通过事件对象可以获取事件源
e.srcElement|| e.target
//nodeName返回的是大写的节点名
<!DOCTYPEhtml>
<html>
<head>
<title>计算器</title>
<metacharset="utf-8"/>
<styletype="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panelp, .panelinput {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panelp {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panelinput {
width: 40px;
height: 40px;
border: 1px solid #ddd;
}
</style>
<script>
window.onload= function() {
//绑定单机事件
var div =document.getElementById("jsq");
div.onclick= function(e) {
var obj = e.srcElement ||e.target;
//筛选出按钮
if ("INPUT" == obj.nodeName) {
var p =document.getElementById("screen");
if ("C" == obj.value) {
p.innerHTML= "";
}elseif ("=" == obj.value) {
try {
var result =eval(p.innerHTML);
p.innerHTML= result;
}catch (ex) {
p.innerHTML= "Error";
}
}else {
p.innerHTML+= obj.value;
}
}
}
}
</script>
</head>
<body>
<divid="jsq"class="panel">
<div>
<pid="screen"></p>
<inputtype="button"value="C">
<divstyle="clear:both"></div>
</div>
<div>
<inputtype="button"value="7"><input type="button"
value="8"><input type="button"value="9"><input
type="button"value="/"><input type="button" value="4">
<inputtype="button"value="5"><input type="button"
value="6"><input type="button"value="*"><input
type="button"value="1"><input type="button" value="2">
<inputtype="button"value="3"><input type="button"
value="-"><input type="button"value="0"><input
type="button"value="."><input type="button" value="=">
<inputtype="button"value="+">
<divstyle="clear:both"></div>
</div>
</div>
</body>
</html>
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- javascript基础
- JavaScript基础
- javascript基础
- javascript基础
- Javascript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- javascript基础
- 基于OpenCV的Gabor变换及特征提取
- 汇编指令大全（有注释）
- POJ 2135 Farm Tour
- linux内核里的GPIO操作函数
- MySQL学习笔记9：MySQL存储引擎
- javaScript基础
- 不错的性能指标参考
- HTML&CSS特性(CSS权威指南)
- Android几种进程
- 一元二次方程复习
- C语言OJ项目参考（2681）求三角形面积
- 对jsf框架中文件分层的理解
- 如何用file_put_contents找出程序开发中的错误位置
- 补坑计划——ARM（二）
