学习blus老师js(1)--基础
1.网页换肤：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link id="l1" rel="stylesheet" type="text/css" href="css1.css" /> <script> function skin1() { var oL=document.getElementById('l1'); oL.href='css1.css'; } function skin2() { var oL=document.getElementById('l1'); oL.href='css2.css'; } </script> </head> <body> <input type="button" value="皮肤1" onclick="skin1()" /> <input type="button" value="皮肤2" onclick="skin2()" /> </body> </html>
css1.css
@charset "utf-8"; /* CSS Document */ body {background:black;} input {width:200px; height:100px; background:yellow;}
css2.css
@charset "utf-8"; /* CSS Document */ body {background:#CCC;} input {width:100px; height:50px; background:red;}
2.
任何标签都可以加ID，包括link
任何标签的任何属性，也都可以修改
HTML里怎么写，JS里就怎么写
但是有一个例外，html的class，js里面要写className，因为class在js里面是一个关键字；
除了class外，html里面和js里面属性都是统一。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:100px; border:1px solid black;} .box {background:red;} </style> <script> function toRed() { var oDiv=document.getElementById('div1'); oDiv.className='box'; } </script> </head> <body> <input type="button" value="变红" onclick="toRed()" /> <div id="div1"> </div> </body> </html>
3.
操作属性的方法：
第一种方法：使用xx.xx
oTxt.value = 'abc';
第二种方法：使用[]
oTxt['value'] = '123';
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> function setText(name) { var oTxt=document['getElementById']('txt1'); //第一种操作属性的方法 //oTxt.value='dsfasdfasdf'; //第二种操作属性的方法 oTxt[name]='dsfasdfasdf'; } </script> </head> <body> <input id="txt1" type="text" /> <input type="button" value="改变文字" onclick="setText('title')" /> </body> </html>
4.变量类型
1) typeof运算符
js里面常见的6种类型：
number、string、boolean、undefined、object、function
一个变量应该只存放一种类型的数据
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> var a=12; //alert(typeof a); //number a='asdfasd'; //alert(typeof a); //string a=true; //alert(typeof a); //boolean a=function () { alert('abca'); }; //alert(typeof a); //function a=document; //alert(typeof a); //object var b; alert(typeof b); //undefined //1.真的没定义 //2.虽然定义，没有给东西 </script> </head> <body> </body> </html>
2)数据类型转换：
- 显式类型转换(强制类型转换)
NaN Not a Number 非数字
var a = parseInt('abc');
alert(a) ; //NaN
alert(isNaN(a)) ; //true
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function () { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { var n1=parseInt(oTxt1.value); var n2=parseInt(oTxt2.value); if(isNaN(n1)) { alert('您输入的第一个数字有误'); } else if(isNaN(n2)) { alert('您输入的第二个数字有误'); } else { alert(n1+n2); } }; }; </script> </head> <body> <input id="txt1" type="text" /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="求和" /> </body> </html>
-
l隐式类型转换
==、===
var a=5; var b='5'; alert(a==b); //true 先转换类型，然后比较alert(a===b); //false 不转换类型，直接比
var a='12'; var b='5'; alert(a+b); //125 1.字符串连接 2.数字相加 alert(a-b); //7 1.数字相减
5.什么是闭包
简单的理解：
子函数可以使用父函数中的局部变量
之前一直在使用闭包
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> //子函数可以使用父函数的局部变量 function aaa() //父函数 { var a=12; function bbb() //子函数 { alert(a); } bbb(); } aaa(); </script> </head> <body> </body> </html>
但是闭包还有一些高级的应用；
6.命名规范：
命名规范及必要性
l可读性——能看懂
l规范性——符合规则
匈牙利命名法
l类型前缀
l首字母大写
7.什么是真、什么是假：
真：true、非零数字、非空字符串、非空对象 假：false、数字零、空字符串、空对象、undefined
8.json
var json={a: 12, b: 5, c: 7}; //循环json for(var key in json) { alert('第'+key+'个东西：'+json[key]); }
9.
------------------
