jq中文档的操作及正则的应用

1.jq文档结构

var $sup = $('.sup');
console.log($sup.children());  // 子们
console.log($sup.parent());  // 父
console.log($sup.prev());  // 上兄弟
console.log($sup.next());  // 下兄弟
console.log($sup.siblings());  // 兄弟们

2.文档操作

• 操作步骤

// 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').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取第二个分组

​