jQuery文檔操做

jQuery文檔操做

1.jq文檔結構

var $sup = $('.sup');

$sup.children();        // sup全部的子級們

$sup.parent();          // sup的父級(一個，parents爲所有父級)

$sup.prev();            // sup的上兄弟

$sup.next();            // sup的下兄弟

$sup.siblings();        // sup的兄弟們

2.文檔操做

• 操做步驟

// 1.建立頁面元素

var $box = $('<div class = "box"></div>')

// 2.設置頁面屬性

$box.text('text content');      // 給box添加內容

$box.click(fn);                 // 給box添加事件

// 3.添加到指定位置

$box.appendTo($('body'));

• 內部操做

sup.append(sub)     // 父級中添加子級，添加到最後

sup.prepend(sub)    // 父級中添加子級到最前

sub.appendTo(sup)   // 子級加到父級的最後

sub.prepend(sup)    // 子級加到父級的最前

• 兄弟

$('.box').after('<b></b>');     // 在box後面添加一個b標籤

$('box').before('<b></b>');     // 在box前面添加一個b標籤

• 包裹(添加父級)

$('box').wrap('<div></div>');   // 爲box添加一個父級div

• 替換

$('.box').repleaceWith($('.ele'));      // 把box都替換爲ele

$('p').repleaceAll($('b'));             // 把用p標籤替換全部的b標籤

• 刪除

// 1.清空全部子級

$('.box').empty();      // 將box子級(包括內容)所有刪除，返回值爲自身

// 2.不保留事件的刪除   remove()

$('.box').remove().appendTo($('body')); 

// 刪除自身再添加到body，原來box中已有的事件再也不擁有

// 3.保留事件的刪除    detach()

$('.box').detach().appendTo($('body'));

// 刪除自身，再添加到body中，原來box中以由的事件依然擁有，刪除的返回值爲自身

3.表單

// 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">
    <!--提交按鈕, 完成的是表單數據的提交動做, 就是爲後臺提交數據的 動做-->
    <input type="submit" value="提交">
    <button type="submit">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>

4.正則

// 定義
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取第二個分組