JQ基础2
Posted lujiachengdelu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ基础2相关的知识,希望对你有一定的参考价值。
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取第二个分组
以上是关于JQ基础2的主要内容,如果未能解决你的问题,请参考以下文章