- 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 取第二个分组
JQ 基础 2
来源: http://www.bubuko.com/infodetail-2900815.html