day72 jq學習
阿新 • • 發佈:2019-01-03
一.jq文件結構
var $sup = $('.sup');
console.log($sup.children()); // 子們
console.log($sup.parent()); // 父
console.log($sup.prev()); //上兄弟
console.log($sup.next()); // 下兄弟
console.log($sup.siblings()); // 兄弟們
二.文件操作
操作步驟
// 1.建立頁面元素 var $box = $('<div class = "box"></div>') // 2.設定頁面元素 $box.text('文字'); $box.click(fn); // 3.新增到指定位置 $box.appendTo($('body'));
內部操作
// append(); 父加子到最後
// prepend(); 父加子到最前
// appendTo(); 子加到父到最後
// prependTo(); 子加到父到最前
兄弟
$('.box').after('<b></b>'); // 在box後新增一個b標籤 $('.box').before('<b></b>'); // 在box前新增一個b標籤
包裹(新增父級)
$('.box').wrap('<div></div>'); // 為box新增一個div父級
替換
$('.box').replaceWith($('.ele')); // 把box替換為ele
$('p').replaceAll($('b')); //用p替換所有的b
刪除
// 1.清空所有自己 $('.box').empty(); // 將box的子級全部刪除,操作的返回值為自身 // 2.不保留事件的刪除 // remove()操作的返回值為 自身 $('.box').remove().appendTo($('body')); // 刪除自身再新增到body,原來box已有的事件不再擁有 // 3.保留事件的刪除 // detach()操作的返回值為 自身 $('.box').detach().appendTo($('body')); // 刪除自身再新增到body,原來box已有的事件依然擁有
三.表單
// form
// 屬性
// action: 請求的後臺介面
// method: get|post請求方式,get拼接介面方式傳輸資料(不安全),post攜帶資料包傳輸資料(安全)
表單元素型別
<div class = "row"> <! --普通輸入框--> <label>使用者名稱:</label> <input type = "text" id = "usr" name = "usr"> </div> <div class = "row"> <! --密文輸入框--> <label>密碼:</label> <input type = "password" id = "pwd" name = "pwd"> </div> <div class = "row"> <! --按鈕--> <input type = "button" value = "普通按鈕"> <button class = "btn1">btn按鈕</button> </div> <div class = "row"> <! --單選框--> <! --注: 通過唯一標識name進行關聯, checked布林型別屬性來預設選中> 男<input type = "radio" name = "sex" value = "male"> 女<input type = "radio" name = "sex" value = "female"> 哇塞<input type = "radio" name = "sex" value = "wasai" checked> </div> <div class = "row"> <! --複選框--> <! -- 注:使用者不能輸入內容,但是能標識選擇的表單元素需要明確value值--> 籃球<input type = "checkbox" name = "hobby" value = "lq"> 足球<input type = "checkbox" name = "hobby" value = "zq"> 乒乓球<input type = "checkbox" name = "hobby" value = "ppq"> 其他<input type = "checkbox" name = "hobby" value = "other"> </div> <div class = "row"> <! --文字域--> <textarea></textarea> </div> <div class = "row"> <! --下拉框--> <select name="place"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="sz">深圳</option> </select> </div> <div class="row"> <!--布林型別屬性--> <!--autofocus: 自動獲取焦點--> <!--required: 必填項--> <!--multiple: 允許多項--> <input type="text" autofocus required> <input type="file" multiple> <input type="range"> <input type="color"> </div> <div class="row"> <!--重置--> <input type="reset" value="重置"> </div>
四.正則
// 定義
var re = /\d{11}/ig
// 1.正則的語法書寫在//之間
// 2.i代表不區分大小寫
// 3.g代表全文匹配
// 匹配案例
"abcABCabc".search(/[abc]/); // 在字串abcABCabc匹配單個字元a或b或c,返回匹配到的第一次結果的索引, 沒有匹配到返回-1
"abcABCabc".match(/\w/); // 進行無分組一次性匹配, 得到得到結果構建的陣列型別[a, index:0, input:"abcABCabc"], 沒有匹配到返回null
"abcABC".match(/\w/g); // 進行全文分組匹配, 得到結果為結果組成的陣列[a, b, c, A, B, C]
"abcABC".match(/(abc)(ABC)/);
// RegExp.$1取第一個分組
// RegExp.$2取第二個分組