JavaScript基础
一、Js的数据类型
Js的数据类型有五种： （1）undefined： 例如var age 定义一个年龄的变量，没有初始值，将被赋予undefined值
（2）null:表示空值,与undefined相等
(3) number:表示数值 可以定义整数 浮点数 例如 :var source=3 或 var source=4.5;
(4) Boolean 布尔值 true 和false
(5) String :字符串
二、Js的运算符有四种: (1) 算术运算符 +, -, *, /, %, ++, --
(2) 赋值运算符 :=
(3) 比较运算符: >,<, >=,<=,==,!=
(4) 逻辑运算符: &&,||,!
三、用Js操作Bom和Dom
1.Js的组成:(1)ECMAScript :简单的说这是一种Js的语法规范
(2)Bom:是浏览器的对象模型 提供了独立内容与浏览器的交互的对象
(3)Dom :是文档对象模型 定义的一套标准方法,用来访问 HTML的文档;
2.Bom的基本组成
(1)window:对象窗口,用来控制当前窗口 或者打开窗口
弹窗之警告框:window.alert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="myFunction()">点我</button> </body> </html> <script> /*alert()*/ function myFunction(){ alert("你好，我是一个警告框！") } /*myFunction();*/ </script>
弹窗之确认框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="myFunction()">点我</button> <p id="demo"></p> </body> </html> <script> function myFunction(){ var x; var r=confirm("按下按钮!"); if (r==true){ x="你按下了【确定】按钮!"; } else{ x="你按下了【取消】按钮!"; } document.getElementById("demo").innerHTML=x; } </script>
弹窗之输入框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="myFunction()">点我</button> <p id="demo"></p> </body> </html> <script> function myFunction(){ var x; var person=prompt("请输入你的名字","Harry Potter"); if (/*person!=null && */person!=""){ x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } } </script>
(2)screen屏幕对象,获取屏幕的相关信息
(3)navigator浏览器对象,通过这个对象,判定用户所使用的的浏览器
(4)history历史对象,可以用来前进和后退一个页面
(5)localtion地址对象,可以用来获取当前的URL的信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="加载新文档" onclick="newDoc()"> </body> </html> <script> document.write(location.href); document.write(location.pathname); function newDoc(){ window.location.assign("http://www.w3cschool.cc") } </script>
(6)Js的计时时间,在设定的时间间隔后来执行代码,而不再函数被调用后执行
情况一:定时一定的间隔一直弹出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="弹出" onclick="start()"> <input type="button" value="停止弹出" onclick="stop()"> </body> </html> <script> var flag; function start(){ flag=window.setInterval("alert('间隔1s后完成弹出内容');",1000); } function stop(){ window.clearInterval(flag); } </script>
情况二: 延迟一定时间去执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> </body> </html> <script> function myFunction(){ setTimeout(function(){alert("Hello")},3000); } </script>
(7)localStorageAessionStorage存储对象为了更大容量的存储设计的
3.操作Dom
1.查找html元素
(1).document.getElementById("id名");通过标签id属性名获取对象
(2).document.getElementsByClassName("class名")通过标签class属性名获取对象
(3).document.getElementsByName("标签名")通过标签名获取对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn">点我</button> <button class="btn3">点我</button> <button class="btn3">点我</button> </body> </html> <script> //var btn=document.getElementById("btn"); //var btn2=document.getElementsByTagName('button'); var btn3=document.getElementsByClassName('btn3')[1]; btn3.onclick=function(){ alert("1"); } </script>
改变Css属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="p">改变HTML</p> <img id="image" src="img/1.jpg" alt="" width="200" height="200"> </body> </html> <script> document.write("niha"); document.getElementById("p").innerHTML="哈哈哈哈"; document.getElementById("image").src="img/border.png"; document.getElementById("p").style.background="#ccc"; </script>
四、js的实现购物车的案例
创建html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <script src="js/gwc.js"></script> <link href="css/gouwu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div id="listdiv"> <h4>购物车</h4> <table width="750" cellpadding="0" cellspacing="0" id="gwcTable"> <tr> <td width="79"><input type="checkbox" id="checkAll" onclick="quanxuan()"/>全选</td> <td width="175">商品</td> <td width="92">单价</td> <td width="201">数量</td> <td width="96">小计</td> <td width="79">操作</td> </tr> <tr> <td><input type="checkbox" class="checkCss"/></td> <td><p><img src="images/shouji.jpg" /></p><p>华为手机P8</p></td> <td>2000</td> <td class="count"><input class="reduceCss" id="jia1" value="-" type="button " onclick="minus(0)"/> <input type="text" class="inputCountCss" id="inputCountCss1" value="1" size="8"/> <input class="addCss" id="jia2" value="+" type="button" onclick="plus(0)"/></td> <td class="stotal3">2000</td> <td><a href="#" class="a" onclick="rem('jia1')">删除</a></td> </tr> <tr> <td><input type="checkbox" class="checkCss" /></td> <td><p><img src="images/cfy.jpg"/></p><p>玫红色 女款 冲锋衣外套</p></td> <td>600</td> <td class="count"><input class="reduceCss" id="jia3" value="-" type="button" onclick="minus(1)"/> <input type="text" class="inputCountCss" id="inputCountCss2" value="1" size="8"/> <input class="addCss" id="jia4" value="+" type="button" onclick="plus(1)"/></td> <td class="stotal3">600</td> <td><a href="#" class="a" onclick="rem('jia3')">删除</a></td> </tr> <tr> <td><input type="checkbox" class="checkCss" /></td> <td><p><img src="images/tbx.jpg"/></p> <p>女款 防滑透气 徒步鞋</p></td> <td >200</td> <td class="count"><input class="reduceCss" id="jia5" value="-" type="button" onclick="minus(2)"/> <input type="text" class="inputCountCss" id="inputCountCss3" value="1" size="8"/> <input class="addCss" id="jia6" value="+" type="button" onclick="plus(2)"/></td> <td class="stotal3">200</td> <td><a href="#" class="a" onclick="rem('jia5')">删除</a></td> </tr> </table> </div> <div id="jiesuan"> <div class="t jisuanbtn"> <input type="submit" name="btnOrder" id="btnOrder" value="立即结算" /> </div> <div class="t TotalMoney">合计：￥<span id="priceTotal">0.00</span></div> <div class="t">已选商品 <span id="countTotal">0</span> 件</div> </div> </div> </body> </html>
编写Css样式
@charset "utf-8"; #page { width: 750px; margin:0 auto; text-align: center; } table { border: 1px solid #CCC;} #jiesuan{ height:50px; background-color: #CCC;} #jiesuan .t{width:130px;float:right;margin:10px;line-height:30px;} td{ text-align:center; border: 1px solid #CCC;} #btnOrder { background-color: #F3C; height: 30px; width: 100px;font-size: 16px;letter-spacing: normal; border: medium none;} .inputCountCss { text-align: center;} .count{padding-left:40px;} .count input{height:21px;} .count .addCss,.count input ,.count .reduceCss{float:left;} .count .addCss,.count .reduceCss{height:23px;width:27px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;float:left;} img{width:80px;height:80px; align:absmiddle;}
Js实现
window.onload=function(){ var check=document.getElementsByClassName("checkCss");//获取所有复选框为其添加单击事件 for (i=0;i<check.length;i++) { check[i].onclick=function(){ getprice(); pd(); } } } //创建全选和反选 function quanxuan(){ if((document.getElementById("checkAll").checked)){ var check=document.getElementsByClassName("checkCss"); for(i=0;i<check.length;i++){ check[i].checked=true; } getprice(); }else{ var check=document.getElementsByClassName("checkCss"); for(i=0;i<check.length;i++){ check[i].checked=false; } getprice(); } } //动态的改变金额和数量 function getprice(){ var counts=document.getElementById("countTotal")//获取总件数件数 var prices=document.getElementById("priceTotal")//获取总金额 var count=document.getElementsByClassName("inputCountCss");//或取每个商品选择的件数 var price=document.getElementsByClassName("stotal3")//获取每个商品的小计 var check=document.getElementsByClassName("checkCss");//获取所有复选框 var sum=0;//定义总金额 var con=0 for (i=0;i<check.length;i++) { if((check[i].checked)){ con+=parseInt(count[i].value); sum+=parseInt(price[i].innerText)*parseInt(count[i].value); } } counts.innerText=con; prices.innerText=sum; } //减操作 function minus(num){ nums=parseInt(num); if(parseInt(document.getElementsByClassName("inputCountCss")[num].value)==1){ alert("不能再减了") }else{ if(nums===0){ //数量 小计 var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)-1; //小计金额 var price4=document.getElementsByClassName("stotal3")[num]; price4.innerText=(parseInt(q.value)*2000) } if(nums===1){ var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)-1; var price5=document.getElementsByClassName("stotal3")[num]; price5.innerText=(parseInt(q.value)*600) } if(nums===2){ var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)-1; var price6=document.getElementsByClassName("stotal3")[num]; price6.innerText=(parseInt(q.value)*200) } } getprice(); } //加操作 function plus(num){ nums=parseInt(num); if(nums===0){ //数量 小计 var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)+1; //小计金额 var price4=document.getElementsByClassName("stotal3")[num]; price4.innerText=(parseInt(q.value)*2000) } if(nums===1){ var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)+1; var price5=document.getElementsByClassName("stotal3")[num]; price5.innerText=(parseInt(q.value)*600) } if(nums===2){ var q=document.getElementsByClassName("inputCountCss")[num] q.value=parseInt(q.value)+1; var price6=document.getElementsByClassName("stotal3")[num]; price6.innerText=(parseInt(q.value)*200) } getprice(); } //删除操作 function rem(id){ var tr=document.getElementById(id).parentNode.parentNode tr.parentNode.removeChild(tr); getprice(); } //如果全部复选框全部为true 全选框为true function pd(){ var count=0; var check=document.getElementsByClassName("checkCss");//获取所有复选框 var ch=document.getElementById("checkAll"); for(i=0; i<check.length;i++){ if(check[i].checked){ count++; } } if(count==check.length){ ch.checked=true; }else{ ch.checked=false; } }
