JavWeb筆記:JavaScript總結

?

目錄

JavWeb筆記:JavaScript總結

一、js簡介

二、基本語法

三、js內建對象

四、js的函數

五、js的事件

六、js的bom

七、js的dom

---

一、js簡介

?? ?1、js是什么
?? ?2、js作用
?? ?3、組成
?? ?4、引入方式

二、基本語法

?? ?1、變量
?? ?2、原始數據類型
?? ?3、引入數據類型
?? ?4、運算符
?? ?5、邏輯語句
?? ?
?? ?

三、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 = [1,2,5,"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 = haohao_827@163.com
?? ??? ??? ?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,5);
?? ?2、函數的參數
?? ??? ?(1)形參沒有var去修飾
?? ??? ?(2)形參和實參個數不一定相等
?? ??? ?(3)arguments對象 是個數組 會將傳遞的實參進行封裝
?? ??? ?function fn(a,b,c){
?? ??? ??? ?//var sum = a+b+c;
?? ??? ??? ?//alert(sum);
?? ??? ??? ?//arguments是個數組 會將傳遞的實參進行封裝
?? ??? ??? ?for(var i=0;i<arguments.length;i++){
?? ??? ??? ??? ?alert(arguments[i]);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?fn(1,2,4,8);
?? ??? ?
?? ?3、返回值
?? ??? ?(1)在定義函數的時候不必表明是否具有返回值
?? ??? ?(2)返回值僅僅通過return關鍵字就可以了 return后的代碼不執行
?? ??? ?function fn(a,b){
?? ??? ??? ?return a+b;
?? ??? ??? ?//alert("xxxx");
?? ??? ?}
?? ??? ?alert(fn(2,3));
?? ?
?? ?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:200px;height: 200px;}
?? ??? ??? ?<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" ?οnclick="alert('xxx')"/>
?? ??? ?(2)將事件內嵌到html中而響應行為用函數進行封裝
?? ??? ??? ?<input type="button" value="button" οnclick="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" οnclick="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也可以阻止事件的默認行為
?? ??? ?<a href="demo11.html" οnclick="return false">點擊我吧</a>
?? ?
?? ?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");
?? ??? ??? ?
?? ??? ?定時器：
?? ??? ??? ?setTimeout(函數,毫秒值);
?? ??? ??? ??? ?setTimeout(
?? ??? ??? ??? ??? ?function(){
?? ??? ??? ??? ??? ??? ?alert("xx");
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?3000
?? ??? ??? ??? ?);
?? ??? ??? ?clearTimeout(定時器的名稱);
?? ??? ??? ??? ?var timer;
?? ??? ??? ??? ?var fn = function(){
?? ??? ??? ??? ??? ?alert("x");
?? ??? ??? ??? ??? ?timer = setTimeout(fn,2000);
?? ??? ??? ??? ?};
?? ??? ??? ??? ?var closer = function(){
?? ??? ??? ??? ??? ?clearTimeout(timer);
?? ??? ??? ??? ?};
?? ??? ??? ??? ?fn();
?? ??? ??? ?setInterval(函數,毫秒值);
?? ??? ??? ?clearInterval(定時器的名稱)
?? ??? ??? ??? ?var timer = setInterval(
?? ??? ??? ??? ?function(){
?? ??? ??? ??? ??? ?alert("nihao");
?? ??? ??? ??? ?},
?? ??? ??? ??? ?2000
?? ??? ??? ?);
?? ??? ??? ?var closer = function(){
?? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ?};
?? ??? ??? ?
?? ??? ?需求：注冊后5秒鐘跳轉首頁
?? ??? ?恭喜您注冊成功，<span id="second" style="color: red;">5</span>秒后跳轉到首頁，如果不跳轉請<a href="../jsCore/demo10.html">點擊這里</a>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?var time = 5;
?? ??? ??? ?var timer;
?? ??? ??? ?timer = setInterval(
?? ??? ??? ??? ?function(){
?? ??? ??? ??? ??? ?var second = document.getElementById("second");
?? ??? ??? ??? ??? ?if(time>=1){
?? ??? ??? ??? ??? ??? ?second.innerHTML = time;
?? ??? ??? ??? ??? ??? ?time--;
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ??? ??? ?location.href="../jsCore/demo10.html";
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?1000
?? ??? ??? ?);
?? ??? ?</script>
?? ??? ?
?? ?(2)location?? ?
?? ??? ?location.href="url地址";
?? ?(3)history
?? ??? ?back();
?? ??? ?forward();
?? ??? ?go();
?? ??? ?<a href="demo7.html">后一頁</a>
?? ??? ?<input type="button" value="上一頁" οnclick="history.back()">
?? ??? ?<input type="button" value="下一頁" οnclick="history.forward()">
?? ??? ?
?? ??? ?<input type="button" value="上一頁" οnclick="history.go(-1)">
?? ??? ?<input type="button" value="下一頁" οnclick="history.go(1)">
?? ??? ?

七、js的dom

?? ?1、理解一下文檔對象模型
?? ??? ?html文件加載到內存之后會形成一顆dom樹，根據這些節點對象可以進行腳本代碼的動態修改
?? ??? ?在dom樹當中 一切皆為節點對象
?? ?2、dom方法和屬性
?? ??? ?筆記見代碼
?? ?

總結

以上是生活随笔為你收集整理的JavWeb笔记:JavaScript总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。