【jQuery】1、jQuery的二把利器
阿新 • • 發佈：2019-01-09
一、概括
1. jQuery核心函式 * 簡稱: jQuery函式($/jQuery) * jQuery庫向外直接暴露的就是$/jQuery * 引入jQuery庫後, 直接使用$即可 * 當函式用: $(xxx) * 當物件用: $.xxx() 2. jQuery核心物件 * 簡稱: jQuery物件 * 得到jQuery物件: 執行jQuery函式返回的就是jQuery物件 * 使用jQuery物件: $obj.xxx()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery的二把利器</title> </head> <body> <button>測試</button> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> // 1.jQuery函式：直接可用 console.log($,typeof $) // ƒ(selector, context){} 'function' console.log(jQuery===$) // true // 2.jQuery物件：執行函式得到它 console.log($(),$() instanceof Object) // jQuery.fn.init 'true' //jQuery庫實際整體模型 /* (function (window) { var jQuery = function () { return new xxx() } window.$ = window.jQuery = jQuery })(window) */ </script> </body> </html>
二、jQuery核心函式
1. 作為一般函式呼叫: $(param) 1). 引數為函式 : 當DOM載入完成後，執行此回撥函式 2). 引數為選擇器字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件 3). 引數為DOM物件: 將dom物件封裝成jQuery物件 4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件 2. 作為物件使用: $.xxx() 1). $.each() : 隱式遍歷陣列 2). $.trim() : 去除兩端的空格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>03_jQuery核心函式</title> </head> <body> <div> <button id="btn">測試</button> <br/> <input type="text" name="msg1"/><br/> <input type="text" name="msg2"/><br/> </div> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框 需求2. 遍歷輸出陣列中所有元素值 需求3. 去掉" my onedean "兩端的空格 */ /*需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框*/ //1.1). 引數為函式 : 當DOM載入完成後，執行此回撥函式 $(function () { // 繫結文件載入完成的監聽 // 1.2). 引數為選擇器字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件 $('#btn').click(function () { // 繫結點選事件監聽 // 事件回撥函式中的this是什麼? 發生事件的dom元素(<button>) // alert(this.innerHTML) // 1.3). 引數為DOM物件: 將dom物件封裝成jQuery物件 alert($(this).html()) // 1.4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件 $('<input type="text" name="msg3"/><br/>').appendTo('div') }) }) /*需求2. 遍歷輸出陣列中所有元素值*/ var arr = [2, 4, 7] // 1). $.each() : 隱式遍歷陣列 $.each(arr, function (index, item) { console.log(index, item) }) /*需求3. 去掉" my onedean "兩端的空格*/ // 2). $.trim() : 去除兩端的空格 var str = ' my onedean ' // console.log('---'+str.trim()+'---') console.log('---'+$.trim(str)+'---') </script> </body> </html>
二、jQuery核心物件
1. jQuery物件是一個包含所有匹配的任意多個dom元素的偽陣列物件 2. 基本行為 * size()/length: 包含的DOM元素個數 * [index]/get(index): 得到對應位置的DOM元素 所有DOM元素 * index(): 得到* each(): 遍歷包含的在所在兄弟元素中的下標
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>04_jQuery物件</title> </head> <body> <button>測試一</button> <button>測試二</button> <button id="btn3">測試三</button> <button>測試四</button> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 需求1. 統計一共有多少個按鈕 需求2. 取出第2個button的文字 需求3. 輸出所有button標籤的文字 需求4. 輸出'測試三'按鈕是所有按鈕中的第幾個 */ //需求1. 統計一共有多少個按鈕 var $buttons = $('button') /*size()/length: 包含的DOM元素個數*/ console.log($buttons.size(), $buttons.length) //需求2. 取出第2個button的文字 /*[index]/get(index): 得到對應位置的DOM元素*/ console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML) //需求3. 輸出所有button標籤的文字 /*each(): 遍歷包含的所有DOM元素*/ /*$buttons.each(function (index, domEle) { console.log(index, domEle.innerHTML, this) })*/ $buttons.each(function () { console.log(this.innerHTML) }) //需求4. 輸出'測試三'按鈕是所有按鈕中的第幾個 /*index(): 得到在所在兄弟元素中的下標*/ console.log($('#btn3').index()) //2 /* 1. 偽陣列 * Object物件 * length屬性 * 數值下標屬性 * 沒有陣列特別的方法: forEach(), push(), pop(), splice() */ console.log($buttons instanceof Array) // false // 自定義一個偽陣列 var weiArr = {} weiArr[0] = 'abc' weiArr[1] = 123 weiArr[2] = false weiArr.length = 3 for (var i = 0; i < weiArr.length; i++) { var obj = weiArr[i] console.log(i, obj) } console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined </script> </body> </html>