day72 jq学习

　　一.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取第二个分组

猜你喜欢