一、js的簡介
1、js是什麼
js是可以嵌入到html中，是 基于對象 和 事件驅動 的 腳本語言
特點：
(1)互動性
(2)安全性：js不能通路本地磁盤
(3)跨平台：浏覽器中都具備js解析器
2、js能做什麼
(1)js能動态的修改(增删)html和css的代碼
(2)能動态的校驗資料
3、js曆史及組成
ECMAScript BOM(浏覽器對象模型) DOM(文檔對象模型)
4、js被引入的方式
(1)内嵌腳本
<input type="button" value="button" onclick="alert('xxx')" />
(2)内部腳本
<script type="text/javascript">
alert("xxx");
</script>
(3)外部腳本
首先先建立一個js檔案
其次在html中引入
js代碼放在哪？
放在哪都行,在
的前提下 越不影響html功能
加載越好晚
二、js基本文法
1、變量
(1)
var x = ;
x = 'javascript';
var y = "hello";
var b = true;
(2)
x = ;
2、原始資料類型
介紹
(1)number:數字類型
(2)string：字元串類型
(3)boolean:布爾類型
(4)null:空類型
(5)underfind:未定義
注意：number、boolean、string是僞對象
類型轉換：
1）number\boolean轉成string
toString();
2）string\boolean轉成number
parseInt()
parseFloat()
boolean不能轉
string可以将數字字元串轉換成number 如果“123a3sd5” 轉成123
3）強制轉換
Boolean() 強轉成布爾
數字強轉成布爾 非零就是true 零就是false
字元串強轉成布爾 非“”(空字元串)就是true 空字元串“”就是false
Number() 強轉成數字
布爾轉數字 true轉成1 false轉成0
字元串轉數字 不能強轉
3、引用資料類型
java: Object obj = new Object();
js: var obj = new Object();
var num = new Number();
4、運算符
(1)指派運算符
var x = 5;
(2)算數運算符
+ - * / %
+: 遇到字元串變成連接配接
-：先把字元串轉成數字然後進行運算
*: 先把字元串轉成數字然後進行運算
/: 先把字元串轉成數字然後進行運算
(3)邏輯運算符
&& ||
(4)比較運算符
< > >= <= != ==
===:全等：類型與值都要相等
(5)三元運算符
3<2?"大于":"小于"
(6)void運算符
<a href="javascript:void(0);" target="_blank" rel="external nofollow" >xxxxxx</a>
(7)類型運算符
typeof:判斷資料類型 傳回我的資料類型
instanceof：判斷資料類型 是否是某種類型
var obj = new Object();
alert(typeof obj);//object
alert(obj instanceof Object);//true
5、邏輯語句
(1)if-else
//條件:
//數字非0 字元串非空====true
if(){
alert("true--");
}else{
alert("false--");
}
(2)switch
var x = "java";
switch(x){
case "css":
alert("css");
break;
case "js":
alert("js");
break;
case "java":
alert("java");
break;
default:
alert("def");
}
(3)for
for(var i = ;i<;i++){
alert(i);
}
(4)for in
var arr = [,,,,"js"];
for(index in arr){//index代表角标
//alert(index);
alert(arr[index]);
}
三、js内建對象
1、Number
建立方式：
var myNum=new Number(value);
var myNum=Number(value);
屬性和方法：
toString():轉成字元串
valueOf()：傳回一個 Number 對象的基本數字值
2、Boolean
建立方式：
var bool = new Boolean(value);
var bool = Boolean(value);
屬性和方法：
toString():轉成字元串
valueOf()：傳回一個 Boolean 對象的基本值(boolean)
3、String
建立方式：
var str = new String(s);
var str = String(s);
屬性和方法：
length:字元串的長度
charAt():傳回索引字元
charCodeAt:傳回索引字元unicode
indexOf():傳回字元的索引
lastIndexOf();逆向傳回字元的索引
split();将字元串按照特殊字元切割成數組
substr():從起始索引号提取字元串中指定數目的字元
substring():提取字元串中兩個指定的索引号之間的字元
toUpperCase();轉大寫
4、Array
建立方式：
var arr = new Array();//空數組
var arr = new Array(size);//建立一個指定長度的資料
var arr = new Array(element0, element1, ..., elementn);//建立數組直接執行個體化元素
var arr = [];//空數組
var arr = [,,,"java"];//建立數組直接執行個體化元素
屬性和方法：
length:數組長度
join()：把數組的所有元素放入一個字元串。元素通過指定的分隔符進行分隔一個
pop():删除并傳回最後元素
push()：向數組的末尾添加一個或更多元素，并傳回新的長度
reverse();反轉數組
sort();排序
5、Date
建立方式：
var myDate = new Date();
var myDate = new Date(毫秒值);//代表從1970-1-1到現在的一個毫秒值
屬性和方法：
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay()：星期 0-6
getTime():傳回1970年1月1日午夜到指定日期（字元串）的毫秒數
toLocalString();獲得本地時間格式的字元串
6、Math
建立方式：
Math 對象并不像 Date 和 String 那樣是對象的類，是以沒有構造函數 Math()，
像 Math.sin() 這樣的函數隻是函數，不是某個對象的方法。無需建立它，通過把 Math 作為對象使用就可以調用其所有屬性和方法。
屬性和方法
PI：圓周率
abs():絕對值
ceil():對數進行上舍入
floor():對數進行下舍入
pow(x,y)：傳回 x 的 y 次幂
random():0-1之間的随機數
round():四舍五入
7、RegExp
建立方式：
var reg = new RegExp(pattern);
var reg = /^正則規則$/;
規則的寫法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表資料
\D 非數字
\w 查找單詞字元
\W 查找非單詞字元
\s 查找空白字元
\S 查找非空白字元
n+ 出現至少一次
n* 出現0次或多次
n? 出現0次或1次
{5} 出現5
{2,8} 2到8次
方法：
test(str):檢索字元串中指定的值。傳回 true 或 false
需求：校驗郵箱
var email = [email protected]
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
四、js的函數
1、js函數定義的方式
(1)普通方式
文法：function 函數名(參數清單){函數體}
示例：
function method(){
alert("xxx");
}
method();
(2)匿名函數
文法：function(參數清單){函數體}
示例：
var method = function(){
alert("yyy");
};
method();
(3)對象函數
文法：new Function(參數1,參數2,…,函數體);
注意：參數名稱必須使用字元串形式、最後一個預設是函數體且函數體需要字元串形式
示例：
var fn = new Function("a","b","alert(a+b)");
fn(,);
2、函數的參數
(1)形參沒有var去修飾
(2)形參和實參個數不一定相等
(3)arguments對象 是個數組 會将傳遞的實參進行封裝
function fn(a,b,c){
//var sum = a+b+c;
//alert(sum);
//arguments是個數組 會将傳遞的實參進行封裝
for(var i=;i<arguments.length;i++){
alert(arguments[i]);
}
}
fn(,,,);
3、傳回值
(1)在定義函數的時候不必表明是否具有傳回值
(2)傳回值僅僅通過return關鍵字就可以了 return後的代碼不執行
function fn(a,b){
return a+b;
//alert("xxxx");
}
alert(fn(,));
4、js的全局函數
(1)編碼和解碼
encodeURI() decodeURI()
encodeURIComponet() decodeURIComponent()
escape() unescape()
三者差別：
進行編碼的符号範圍不同吧，實際開發中常使用第一種
(2)強制轉換
Number()
String()
Boolean()
(3)轉成數字
parseInt()
parseFloat()
(4)eval()方法
将字元串當作腳本進行解析運作, 代碼嵌入
var str = "var a=2;var b=3;alert(a+b)";
eval(str);
function print(str){
eval(str);
}
print("自定義邏輯");
五、js的事件
事件
事件源
響應行為
1、js的常用事件
onclick:點選事件
onchange:域内容被改變的事件
需求：實作二級關聯
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海澱</option>
<option>朝陽</option>
<option>東城</option>
</select>
<script type="text/javascript">
var select = document.getElementById("city");
select.onchange = function(){
var optionVal = select.value;
switch(optionVal){
case 'bj':
var area = document.getElementById("area");
area.innerHTML = "<option>海澱</option><option>朝陽</option><option>東城</option>";
break;
case 'tj':
var area = document.getElementById("area");
area.innerHTML = "<option>南開</option><option>西青</option><option>河西</option>";
break;
case 'sh':
var area = document.getElementById("area");
area.innerHTML = "<option>浦東</option><option>楊浦</option>";
break;
default:
alert("error");
}
};
</script>
onfoucus:獲得焦點的事件onblur:失去焦點的事件
需求： 當輸入框獲得焦點的時候，提示輸入的内容格式
當輸入框失去焦點的時候，提示輸入有誤
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "使用者名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//錯誤提示
var span = document.getElementById("action");
span.innerHTML = "對不起 格式不正确";
span.style.color = "red";
};
</script>
onmouseover:滑鼠懸浮的事件 onmouseout:滑鼠離開的事件
需求：div元素 滑鼠移入變為綠色 移出恢複原色
#d1{background-color: red;width:px;height: px;}
<div id="d1"></div>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>
onload:加載完畢的事件
等到頁面加載完畢在執行onload事件所指向的函數
<span id="span"></span>
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>
2、事件的綁定方式
(1)将事件和響應行為都内嵌到html标簽中
<input type="button" value="button" onclick="alert('xxx')"/>
(2)将事件内嵌到html中而響應行為用函數進行封裝
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)将事件和響應行為 與html标簽完全分離
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>
this關鍵字
this經過事件的函數進行傳遞的是html标簽對象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>
3、阻止事件的預設行為
IE：
window.event.returnValue = false;
W3c:
傳遞過來的事件對象.preventDefault();
例子
//ie：window.event.returnValue = false;
//W3c：傳遞過來的事件對象.preventDefault();
//W3c标準
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标簽
}else{
alert("ie");
window.event.returnValue = false;
}
//通過事件傳回false也可以阻止事件的預設行為
4、阻止事件的傳播
IE：
window.event.cancelBubble = true;
W3c:
傳遞過來的事件對象.stopPropagation();
例子
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标簽
}else{
alert("ie");
window.event.cancelBubble = true;
}
六、js的bom
1、window對象
彈框的方法：
提示框：alert("提示資訊");
确認框：confirm("确認資訊");
有傳回值：如果點選确認傳回true 如果點選取消 傳回false
var res = confirm("您确認要删除嗎？");
alert(res);
輸入框：prompt("提示資訊");
有傳回值：如果點選确認傳回輸入框的文本 點選取消傳回null
var res = prompt("請輸入密碼？");
alert(res);
open方法：
window.open("url位址");
open("../jsCore/demo10.html");
定時器：
1）setTimeout
setTimeout(函數,毫秒值);
clearTimeout(定時器的名稱);
setTimeout(
function(){
alert("xx");
},
);
例子：
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,);
};
var closer = function(){
clearTimeout(timer);
};
fn();
2）setInterval
setInterval(函數,毫秒值);
clearInterval(定時器的名稱)
var timer = setInterval(
function(){
alert("nihao");
},
);
var closer = function(){
clearInterval(timer);
};
需求：注冊後5秒鐘跳轉首頁
<script type="text/javascript">
var time = ;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
);
</script>
恭喜您注冊成功，<span id="second" style="color: red;">5</span>秒後跳轉到首頁
如果不跳轉請<a href="../jsCore/demo10.html">點選這裡</a>
2、location
location.href="url位址" target="_blank" rel="external nofollow" ;
3、history
back();
forward();
go();
<a href="demo7.html">後一頁</a>
<input type="button" value="上一頁" onclick="history.back()">
<input type="button" value="下一頁" onclick="history.forward()">
<input type="button" value="上一頁" onclick="history.go(-1)">
<input type="button" value="下一頁" onclick="history.go(1)">
七、js的dom
1、文檔對象模型
html檔案加載到記憶體之後會形成一顆dom樹，根據這些節點對象可以進行腳本代碼的動态修改
在dom樹當中 一切皆為節點對象
節點的類型：
- 元素節點
- 屬性節點
- 文本節點
2、dom方法和屬性
屬性
(1)nodeName
String 節點的名字；根據節點的類型而定義
如果是元素節點，nodeName傳回這個元素的名稱(标簽名)。
如果是屬性節點，nodeName傳回這個屬性的名稱(屬性名)。
如果是文本節點，nodeName傳回一個内容為#text 的字元串。
(2)nodeType
Number 節點的類型，常量值之一
Node.ELEMENT_NODE —1 – 元素節點
Node.ATTRIBUTE_NODE —2 – 屬性節點
Node.TEXT_NODE —3 – 文本節點
(3)nodeValue
String 節點的值；根據節點的類型而定義
如果給定節點是一個屬性節點，傳回值是這個屬性的值
如果給定節點是一個文本節點，傳回值是這個文本節點内容
如果給定節點是一個元素節點，傳回值是 null
(4)父節點： parentNode
parentNode 屬性傳回的節點永遠是一個元素節點，因為隻有元素節點才有可能包含子節點。
document 節點的沒有父節點。
(5)子節點
childNodes：擷取指定節點的所有子節點集合。
firstChild：擷取指定節點的第一個子節點。
lastChild：擷取指定節點的最後一個子節點。
(6)同輩節點
nextSibling: 傳回一個給定節點的下一個兄弟節點。
previousSibling：傳回一個給定節點的上一個兄弟節點。
1.建立
（1）createElement()
按照給定的标簽名建立一個新的元素節點。方法隻有一個參數：将被建立的元素的名字，是一個字元串.
var reference = document.createElement(element);
方法的傳回值：是一個指向建立節點的引用指針。傳回值是一個元素節點，是以它的 nodeType 屬性值等于 1。
新元素節點不會自動添加到文檔裡，新節點沒有 nodeParent 屬性，它隻是一個存在于 JavaScript 上下文的對象.
（2）createTextNode()
建立一個包含着給定文本的新文本節點。這個方法的傳回值是一個指向建立文本節點引用指針。
var textNode = document.createTextNode(text);
方法隻有一個參數：建立文本節點所包含的文本字元串
方法的傳回值：是一個指向建立節點的引用指針。它是一個文本節點，是以它的 nodeType 屬性等于 3.
新元素節點不會自動添加到文檔裡，新節點沒有 nodeParent 屬性
2.移除
removeChild()
從一個給定元素裡删除一個子節點
var reference = element.removeChild(node);
傳回值是一個指向已被删除的子節點的引用指針。
某個節點被removeChild()方法删除時,這個節點所包含的所有子節點将同時被删除。
如果想删除某個節點，但不知道它的父節點是哪一個，parentNode 屬性可以幫忙。
3.替換
replaceChild()
把一個給定父元素裡的一個子節點替換為另外一個子節點
var reference = element.replaceChild(newChild,oldChild);
傳回值是一個指向已被替換的那個子節點的引用指針。
如果被插入的子節點還有子節點，則那些子節點也被插入到目标節點中
4.查找
（1）getElementById()
尋找一個有着給定 id 屬性值的元素，傳回值是一個有着給定 id 屬性值的元素節點。如果不存在這樣的元素，它傳回 null.
var oElement = document.getElementById ( sID )
該方法隻能用于 document 對象
（2）getElementsByName()
尋找有着給定name屬性的所有元素，這個方法将傳回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等于目前文檔裡有着給定name屬性的所有元素的總個數。
（3）getElementsByTagName()
尋找有着給定标簽名的所有元素，這個方法将傳回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等于目前文檔裡有着給定标簽名的所有元素的總個數。
（4）hasChildNodes()
該方法用來檢查一個元素是否有子節點，傳回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本節點和屬性節點不可能再包含任何子節點，是以對這兩類節點使用 hasChildNodes 方法的傳回值永遠是 false.
如果 hasChildNodes 方法的傳回值是 false，則 childNodes,firstChild,lastChild 将是空數組和空字元串。
（5）getAttribute()
傳回一個給定元素的一個給定屬性節點的值
var attributeValue = element.getAttribute(attributeName);
給定屬性的名字必須以字元串的形式傳遞給該方法。
給定屬性的值将以字元串的形式傳回，如果給定屬性不存在，getAttribute() 将傳回一個空字元串.
通過屬性擷取屬性節點
getAttributeNode(屬性的名稱)–Node
（6）setAttribute()
将給定元素節點添加一個新的屬性值或改變它的現有屬性的值。
element.setAttribute(attributeName,attributeValue);
屬性的名字和值必須以字元串的形式傳遞給此方法
如果這個屬性已經存在，它的值将被重新整理；
如果不存在，setAttribute()方法将先建立它再為其指派。
5.插入
（1）appendChild()
為給定元素增加一個子節點：
var newreference = element.appendChild(newChild).
給定子節點 newChild 将成為給定元素節點 element 的最後一個子節點。
方法的傳回值是一個指向新增子節點的引用指針。
該方法通常與 createElement() createTextNode() 配合使用
新節點可以被追加給文檔中的任何一個元素
（2）insertBefore()
把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference = element.insertBefore(newNode,targetNode);
節點 newNode 将被插入到元素節點 element 中并出現在節點 targetNode 的前面.
節點 targetNode 必須是 element 元素的一個子節點。
該方法通常與 createElement() 和 createTextNode() 配合使用