1、js和html的結合方式 (1)在html文件中寫js代碼: - <script type="text/javascript"> js代碼; </script> (2)引入外部文件 - <script type="text/javascript" src="js文件路徑"></script> - ...
1、js和html的結合方式
- (1)在html文件中寫js代碼:
- - <script type="text/javascript"> js代碼; </script>
- (2)引入外部文件
- - <script type="text/javascript" src="js文件路徑"></script>
2、js的原始類型和聲明變數
- js的原始類型: string, number, boolean, null, undifined
- js在定義變數時只有var
- 查看當前變數的數據類型:typeof();
2.1、比較
- ==: 會將兩邊轉換成相同類型,然後進行比較
- ===: 不會進行類型轉換,直接比較
3、js的數組
- 直接定義:
- - var arr = [1, 2, 3];
- 使用內置對象Array
- 創捷對象是可以指定大小,也可直接賦值
4、js的函數
- 定義函數(傳遞的參數保存到arguments數組裡面,即使函數的參數列表不指定,也可在 arguments 中拿到參數)
- 使用function關鍵字:
- function 方法名(參數列表){方法體; [return 返回值;]}
- 匿名函數:
- var 函數名 = function(參數列表){方法體; [return 返回值;]}
- 使用Function內置對象:
- var 函數名 = new Function("參數列表", "方法體和返回值");
- 使用function關鍵字:
4.1、js類
定義類
function Person(name, age){ // 定義構造函數,一般構造函數首字母大寫 this.name = name; this.age = age; } Person.prototype.getName = function(){ // 使用原型可以使所有對象共用一個方法,避免浪費記憶體 return this.name; }; var p = new Person('hujing', 20); // 創建定義的類 p.a = 10; // 給p對象添加屬性 delete p.a; // 將已添加的屬性刪除
實現繼承:
function Worker(name, age, sex){ Person.call(this, name, age); // 調用父類構造方法,就是為了繼承父類的屬性 this.sex = sex; } for(var i in Person.prototype){ // 通過原型繼承父類方法 Worker.prototype[i] = Person.prototype[i]; } Worker.prototype.getSex = function(){ return this.sex; };
4.2、js類原型
- prototype: 每個類的這個屬性為類的原型
- 添加變數/方法會影響所有創建的對象
- Array.prototype.sum = function(){};
4.3、js 實現方法分開管理
var a={}; a.abc = { // 定義方法 aa: function(){}, bb: function(){} } a.abc.aa(); // 調用方法
5、js的全局變數和局部變數
- 全局變數:在script標簽裡面定義一個變數,在本頁面的js部分都可以使用
- 局部變數:在方法內部定義一個變數,只能在方法內部使用
6、js對象
- String:字元串
- length: 長度
- bold():加粗
- fontcolor(): 設置字元串顏色
- fontsize(): 設置字體大小
- link(): 將字元串顯示成超鏈接
- sub(): 下標
- sup(): 上標
- concat(): 連接字元串
- charAt(): 返回指定位置的字元
- indexOf(): 返回指定字元串值在字元串中首次出現的位置
- split(): 把一個字元串分割成字元串數組
- splice(): 刪除/插入/替換元素
- replace(rep, str): 在字元串中查找匹配的子串, 並替換與正則表達式匹配的子串
- substr(): 抽取指定位置開始的指定數量的字元串
- substring(): 用於提取字元串中介於兩個指定下標之間的字元(前閉後開)
- Array:數組
- concat(): 連接數組
- sort(): 排序
- join(): 把數組元素放入一個字元串
- push(): 向數組末尾添加元素
- pop(): 刪除最後一個元素
- reverse(): 顛倒數組中元素順序
- Date:時間
- toLocaleString(): 根據本地時間格式,把 Date 對象轉換為字元串
- getFullYear(): 獲取年
- getMonth(): 獲取月
- getDay(): 獲取星期
- getDate(): 獲取日
- getHours(): 獲取時
- getMinutes(): 獲取分
- getSeconds(): 獲取秒
- getTime(): 獲取1970年1月1日至今的毫秒數。
- Math:數學運算(都是靜態方法)
- ceil(): 向上舍入
- floor(): 向下舍入
- round(): 四捨五入
- abs(): 返回絕對值
- max(): 返回最大值
- min(): 返回最小值
- random(): 得到隨機數
- submit(): 提交表單
- bom: 瀏覽器對象模型
- Navigator:獲取客戶端信息
- appName: 瀏覽器名字
- userAgent: 獲取發送的 user-agent
- screen:獲取屏幕的信息
- width:顯示器屏幕的寬度
- location: 頁面url地址
- href: 設置或返回完整的URL
- hostname: 設置或返回web主機功能變數名稱
- pathname: 設置或返回當前URL的路徑部分
- port: 設置或返回當前URL埠
- protocol: 設置或返回使用的web協議
- history: 請求的url歷史記錄
- back(): 載入前一個url
- forward(): 載入下一個url
- go(): 載入到某個url
- window: 視窗對象,頂層對象(這些方法可以直接使用)(js代碼中的全局變數和函數也在 window 對象中保存)
- document: 標簽樹
- alert(): 頁面彈框
- open(): 打開一個新的視窗, 返回新視窗的 window 對象
- close(): 關閉視窗(相容性差)
- setInterval(): 每次指定時間後執行js代碼
- setTimeout(): 指定時間後執行js代碼(一次)
- clearInterval(): 清除 setInterval 定時器
- clearTimeout(): 清除 setTimeout 定時器
- opener: 創建此視窗的視窗引用
- innerHeight: 瀏覽器視窗的內部高度
- innerWidth: 瀏覽器視窗的內部寬度
- Navigator:獲取客戶端信息
- dom:文檔對象模型(對標記型文檔進行操作)(都是內置對象)
- Document:標簽樹(像是所有標簽的父節點)
- documentElement: 文檔對象根元素
- cookie: 設置或返回當前的cookie
- write():可以輸出變數,固定值和html代碼(會清空當前頁面)
- 裡面是雙引號,如果設置標簽屬性使用單引號
- getElementById("id"): 返回指定id的標簽對象
- getElementsByName("name"): 返回指定名稱的對象集合
- getElementsByTagName("tagName"): 返回指定標簽名的對象集合
- createElement("tagName"): 為指定標簽創建一個元素的實例
- createTextNode("str"): 創建一個指定值的文本字元串
- Event: 事件對象
- 事件:
- onclick: 滑鼠點擊
- onmouseover: 滑鼠經過
- onmouseout: 滑鼠移出
- onchange: 內容改變
- onfocus: 得到焦點
- onblur: 失去焦點
- onkeyup: 某個鍵盤按鍵鬆開
- oncopy: 複製
- onpaste: 粘貼
- onload: 頁面或圖像載入完成的事件
- onresize: 視窗被重新調整大小
- onunload: 關閉網頁事件
- 方法屬性:
- type: 事件類型
- ctrlKey: 事件發生時,Ctrl 是否被按下
- shiftKey: 事件發生時,Shift 是否被按下
- altKey: 事件發生時,Alt 是否被按下
- stopPropagation(): 阻止事件冒泡,即不再向上層傳遞
- preventDefault(): 阻止預設事件執行(阻止超鏈接跳轉,表單提交等)(需要在調用時傳遞 event)
- 事件:
- Element: 元素對象,即通過 document.getElement*方法得到的對象(node)
- 屬性:
- value: 存儲的值(id等其他屬性相同)
- ['value']: 像數組一樣使用,也可以獲取與設置屬性值
- nodeName: 名稱
- nodeType: 類型
- nodeValue: 值
- parentNode: 父節點
- childNodes: 子節點集合
- firstChild: 第一個子節點
- lastChild: 最後一個子節點
- nextSiBling: 下一個兄弟節點
- previousSiBing: 上一個兄弟節點
- innerHTML:獲取節點的文本內容,也可以向標簽裡面添加內容(可以是html代碼)
- offsetLeft: 返回元素的水平偏移位置(相對父元素)
- offsetTop: 返回元素垂直偏移位置(相對父元素)
- offsetHeight: 返回元素高度
- offsetWidth: 返回元素寬度
- offsetParent: 返回偏移父節點(即相對於哪個父節點定位)
- scrollTop: 元素垂直滾動的像素(document.documentElement.scrollTop: 頁面向下滾動的距離)
- scrollLeft: 元素水平滾動的像素
- scrollHeight: 元素的整體高度(包括隱藏部分)
- scrollWidth: 元素整體寬度(包括隱藏部分)
- style: 設置或返回元素的 style 屬性
- 方法:
- getAttribute(): 通過名稱獲取屬性值
- setAttribute(): 設置屬性的值
- removeAttribute(): 刪除屬性(不能刪除value)
- getElementsByTagName(): 返回指定標簽名的對象集合
- appendChild(): 添加子節點到末尾,類似於剪切
- insertBefore(): 在某個節點之前插入一個新節點
- removeChild(): 刪除節點,只能刪除子節點,不能刪除自己
- replaceChild(): 替換節點,只能替換子節點,不能替換自己
- cloneNode(): 複製節點(參數為boolen,是否複製子節點)
- addEventListener('click', function, false): 添加事件綁定(綁定匿名函數會無法解除綁定)
- removeEventListener('click', function, false): 解除事件綁定
- 屬性:
- Attribute: 屬性對象
- Document:標簽樹(像是所有標簽的父節點)
- 全局函數:
- Infinity: 正無窮大數
- NaN: 非數字
- eval(): 執行js代碼,將字元串作為js代碼執行
- encodeURI(): 對字元進行編碼
- decodeURI(): 對字元進行解碼
- isNaN(): 判斷字元串是否為非數字
- isFinite(): 判斷是否為又窮大的數
- parseInt(): 將字元串轉換成整數
- parseFloat(): 將字元串轉換成浮點數
- typeof(): 查看當前變數的數據類型
- Number(): 將對象轉換成數字
- getComputedStyle(element): 拿到元素最終的style(不能設置)
- console: 瀏覽器控制台操作
- log(str): 輸出普通消息
- info(str): 輸出提示信息
- error(str): 輸出錯誤信息
- warn(str): 輸出警告信息
- debug(str): 輸出調試信息
- count(str): 統計本行代碼被執行的次數,str為要顯示的信息
- time(str): 開始計時器
- timeEnd(str): 結束計時器
- clear(): 清空控制台
7、AJAX
ajax發送非同步請求(四步操作)
第一步(得到XMLHttpRequest)
得到XMLHttpRequest
// 大多數瀏覽器都支持 var xmlHttp = new XMLHttpRequest(); // IE6.0 var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE5.5以更早版本的IE var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
第二步(打開與伺服器的連接)
xmlHttp.open():用來打開與伺服器的連接,它需要三個參數:
- 請求方式:可以是GET或POST
- 請求的URL:指定伺服器端資源,例如;/day23_1/AServlet
- 請求是否為非同步:如果為true表示發送非同步請求,否則同步請求!
例如: xmlHttp.open("GET", "/day23_1/AServlet", true);
如果是POST請求,需要設置Content-Type請求頭:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
第三步(發送請求)
xmlHttp.send(null):如果不給可能會造成部份瀏覽器無法發送!
參數:就是請求體內容!如果是GET請求,必須給出null。POST請求為參數,如: "name=hu&age=2"
第四步()
在xmlHttp對象的一個事件上註冊監聽器: onreadystatechange
xmlHttp對象一共有5個狀態:
- 0狀態:剛創建,還沒有調用open()方法;
- 1狀態:請求開始:調用了open()方法,但還沒有調用send()方法
- 2狀態:調用完了send()方法了;
- 3狀態:伺服器已經開始響應,但不表示響應結束了!
- 4狀態:伺服器響應結束!(通常我們只關心這個狀態!!!)
得到xmlHttp對象的狀態:
var state = xmlHttp.readyState;//可能是0、1、2、3、4 xmlHttp.onreadystatechange // xmlHttp的狀態改變事件
得到伺服器響應的狀態碼
var status = xmlHttp.status;//例如為200、404、500
得到伺服器響應的內容
var content = xmlHttp.responseText;//得到伺服器的響應的文本格式的內容 var content = xmlHttp.responseXML;//得到伺服器的響應的xml響應的內容,它是Document對象!
8、json
json的語法
- {}:是對象!
- 屬性名必須使用雙引號括起來!單引不行!!!
- 屬性值:
- null
- 數值
- 字元串
- 數組:使用[]括起來
- boolean值:true和false
- 屬性值:
- 屬性名必須使用雙引號括起來!單引不行!!!
var person = {"name":"zhangSan", "age":18, "sex":"male"}; //將字元串轉換成json對象 var str = "{\"name\":\"zhangSan\", \"age\":18, \"sex\":\"male\"}"; var person = eval("(" + str + ")");
從json中取出屬性:
person.name; person.age; person.sex;
將java對象轉換成json對象
- JSONObject: 相當於Map
- toString(): 將對象轉換成json串
- JSONObject.fromObject(person):把對象轉換成JSONObject對象
- put("", ): 想map中添加鍵值對
- toBean(JSONObject, class): 將json串轉換成java對象
- JSONArray: 相當於List
- toString(): 將對象轉換成json串
- JSONArray.fromObject(list):把list轉換成JSONArray對象
- add(person): 想list中添加對象
- toList(): json對象轉換成list
js中將對象轉換成json:
- JSON.stringify(obj[, parame]): 將obj轉成json字元串
- parame: 數組, 指定將obj中的什麼屬性轉成json字元串
- JSON.parse(str): 將str轉成json對象
9、jQuery
基礎語法: $(selector).action()
- selector: "查詢"和"查找" HTML 元素
- "p": 所有<p>標簽
- "#test": 所有id="test"的標簽
- ".test": 所有class="test"的標簽
- "*": 所有標簽
- this: 當前標簽
- "p.first": 第一個<p>標簽
- "ul li:first": 選取第一個 <ul> 元素的第一個 <li> 元素
- "ul li:first-child": 選取每個 <ul> 元素的第一個 <li> 元素
- "[href]": 選取帶有 href 屬性的元素
- "a[target='_blank']": 選取所有 target 屬性值等於 "_blank" 的 <a> 元素
- "a[target!='_blank']": 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
- ":button": 選取所有 type="button" 的 <input> 元素 和 <button> 元素
- "tr:even": 選取偶數位置的 <tr> 元素
- "tr:odd": 選取奇數位置的 <tr> 元素
- action: 執行對元素的操作
- 動作;
- hide(): 消失
- 事件:事件需要傳入觸發後執行的方法
- click(): 滑鼠點擊
- dblclick(): 滑鼠雙擊
- focus(): 獲取焦點時
- blur(): 失去焦點時
- 動作;
引用jQuery
本地導入jQuery
<head> <script type="text/javascript" src="jquery-1.10.2.min.js路徑"></script> </head>
線上引用jQuery
<!-- 菜鳥教程 --> <head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <!-- 百度 --> <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head> <!-- 新浪 --> <head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <!-- Google --> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <!-- Microsoft --> <head> <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script> </head>
保證在文檔載入完成後執行JQuery代碼
$(document).ready(function(){ // 開始寫 jQuery 代碼... });
10. 其他第三方js
- chart: 利用h5畫布制作圖表
- bootstrap-table: 表格, 分頁、獲取數據等
- bootstrapValidator: 用於表單驗證