分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery文档操作

发布时间:2023-09-06 02:28责任编辑:白小东关键词: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文档操作

原文地址:https://www.cnblogs.com/oden/p/10197828.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved