jQuery文档操作

Posted oden

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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取第二个分组

以上是关于jQuery文档操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段

jquery基本操作

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段