web开发：jquery之DOM
一、文档结构
二、文档操作
三、文档操作案例
四、form表单
五、正则
六、form案例
一、文档结构
```js
var $sup = $('.sup');
console.log($sup.children()); // 子们
console.log($sup.parent()); // 父
console.log($sup.prev()); // 上兄弟
console.log($sup.next()); // 下兄弟
console.log($sup.siblings()); // 兄弟们
```
二、文档操作
- 操作步骤
```js
// 1.创建页面元素
var $box = $('<div class="box"></div>')
// 2.设置页面元素
$box.text('文本');
$box.click(fn);
// 3.添加到指定位置
$box.appendTo($('body'));
```
// 1.创建页面元素
var $box = $('<div class="box"></div>')
// 2.设置页面元素
$box.text('文本');
$box.click(fn);
// 3.添加到指定位置
$box.appendTo($('body'));
```
- 内部操作
```js
// append(): 父 加 子 到最后
// prepend(): 父 加 子 到最前
// appendTo(): 子 加到 父 到最后
// prependTo(): 子 加到 父 到最前
```
// append(): 父 加 子 到最后
// prepend(): 父 加 子 到最前
// appendTo(): 子 加到 父 到最后
// prependTo(): 子 加到 父 到最前
```
- 兄弟
```js
$('.box').after('<b></b>'); // 在box后添加一个b标签
$('.box').before('<b></b>'); // 在box前添加一个b标签
```
$('.box').after('<b></b>'); // 在box后添加一个b标签
$('.box').before('<b></b>'); // 在box前添加一个b标签
```
- 包裹(添加父级)
```js
$('.box').wrap('<div></div>'); // 为box添加一个div父级
```
$('.box').wrap('<div></div>'); // 为box添加一个div父级
```
- 替换
```js
$('.box').repleaceWith($('.ele')); // 把box替换为ele
$('p').repleaceAll($('b')); // 用p替换所有的b
```
$('.box').repleaceWith($('.ele')); // 把box替换为ele
$('p').repleaceAll($('b')); // 用p替换所有的b
```
- 删除
```js
// 1.清空所有子级
$('.box').empty(); // 将box的子级全部删除, 操作的返回值为 自身
// 2.不保留事件的删除
// remove()操作的返回值为 自身
$('.box').remove().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件不再拥有
// 1.清空所有子级
$('.box').empty(); // 将box的子级全部删除, 操作的返回值为 自身
// 2.不保留事件的删除
// remove()操作的返回值为 自身
$('.box').remove().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件不再拥有
// 3.保留事件的删除
// detach()操作的返回值为 自身
$('.box').detach().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件依然拥有
```
// detach()操作的返回值为 自身
$('.box').detach().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件依然拥有
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作</title>
<style>
.ele1 {
border: 1px solid black;
}
.ele2 {
border: 1px solid orange;
}
.ele2 .div {
background-color: pink;
}
.ele2 .div span {
float: right;
cursor: pointer;
} .ele3 {
width: 200px;
height: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<p class="p1">你是P</p>
<div class="ele1">
<p>原文本</p>
</div> <div class="ele2"></div> <div class="ele3"><span>1</span><span>2</span><span>3</span></div> <div class="ele4">ele4 ele4 ele4</div> <!--需求: .wrap-ele5>.ele5 -->
<div class="ele5">
<div class="wrap"></div>
</div> <!--repleaceWith-->
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div> <!--repleaceAll-->
<p>Hello</p><p>cruel</p><p>World</p>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 一.内部插入
var $p1 = $('.p1');
var $ele1 = $('.ele1'); // 父添加子
// $p1就是一个对象, 所以不管操作几次,或是如何操作, 最终只有一种位置结果
$ele1.append($p1); // 父 加 子 到最后
$ele1.append($p1); $ele1.prepend($p1); // 父 加 子 到最前 $p1.appendTo($ele1); // 子 加到 父 到最后
$p1.prependTo($ele1); // 子 加到 父 到最前
</script>
<script>
// 二.操作文档三步骤
// 1.创建页面元素对象
// 2.设置页面元素对象(样式|属性|内容|事件...)
// 3.添加到指定位置
$ele2 = $('.ele2'); // 1.
var $div = $('<div class="div">我是div</div>');
// 2.
// $div.on('click', function () {
// alert('div被点击了!');
// });
// 委派添加事件
$ele2.on('click', 'div', function () {
alert('div被点击了!');
});
// 3.
// $ele2.append($div);
// 将div中假如一个span标签,在将自身添加到ele2中
$div.append("<span>x</span>").appendTo($ele2); // 需求: 点击span的小x,删除$div
// 思路: 给span绑定一个点击事件 => 操作让父级$div删除
/* ① 通过选择器找到目标span
$('.ele2 span').click(function (ev) {
// 阻止冒泡
ev.stopPropagation();
// 删除操作
// console.log(this)
// 原生js操作 父删子
// this.parentElement.parentElement.removeChild(this.parentElement);
// jq操作 自删
$(this).parent().remove();
})
*/
// ② 通过事件委派直接绑定给目标span
$ele2.on('click', 'span', function (ev) {
ev.stopPropagation();
$(this).parent().remove();
});
</script> <script>
// 三.删除操作 // 1.清空所有子级
// empty()操作的返回值为 自身
$('.ele3').append("<span>4</span>").click(function () {
// 打印子级所有文本
// $(this).children().text() | $(this).text()
console.log($(this).text())
}).empty().text("00000"); // 2.不保留事件的删除
// remove()操作的返回值为 自身
// $('.ele3').remove().appendTo($('body')); // 3.保留事件的删除
// detach()操作的返回值为 自身
// $('.ele3').detach().appendTo($('body')); </script> <script>
// 四.兄弟结构操作
$('.ele4').after('<b>after ele4</b>').before('<i>before ele4</i>')
</script> <script>
// 五.包裹操作(为自身添加父级)
/*
$('.ele5').wrap(function () {
// this指的是ele5
var _this = this;
return $('.wrap').attr('class', function () {
// this指的是wrap
return this.className + "-" + _this.className;
});
}).empty();
*/
var $wrap = $('.wrap');
var $ele5 = $('.ele5').empty();
$ele5.wrap($wrap);
var tg_class = $wrap.attr('class') + "-" + $ele5.attr('class');
console.log(tg_class)
$ele5.parent().attr('class', tg_class); </script> <script>
// 六.替换 // 把third用裁剪的first来替换
$('.third').replaceWith($('.first')); // 用b标签替换所有的p标签
$("<b>Paragraph. </b>").replaceAll("p");
</script> <!--DOM操作需求:
1.一个输入框,一个提交按钮,提交留言到一个列表中
2.每条留言可以删除
3.每条留言可以修改
-->
</html>
三、文档操作案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作案例</title>
<style>
input {
vertical-align: middle;
}
ul, p {
margin: 0;
padding: 0;
list-style: none;
}
.msg, .show {
width: 260px;
/*background-color: red;*/
}
.show li:hover {
background-color: #aaa;
}
.show {
margin-top: 14px;
}
.show li {
line-height: 40px;
position: relative;
}
.show span {
cursor: pointer;
position: absolute;
right: 10px;
top: 0;
}
</style>
</head>
<body>
<div class="msg">
<input class="inp" type="text"><input class="btn" type="button" value="留言">
</div>
<ul class="show">
<!--<li>-->
<!--<p>第一条留言</p>-->
<!--<span>×</span>-->
<!--</li>-->
<!--<li>-->
<!--<p>一楼说的对</p>-->
<!--<span>×</span>-->
<!--</li>-->
</ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 提交按钮的事件
$('.btn').click(function () {
// 输入框的内容
var msg = $('.inp').val();
// 输入框有内容才提交
if (msg.length != 0) {
addMsg(msg);
} // 只要留言按钮点击后, 就应该清空输入框
$('.inp').val("");
}); function addMsg(msg) {
$('<li></li>')
.append('<p>' + msg + '</p>') // 为li添加子级p, p内容为留言内容
.append('<span>×</span>') // 为li添加子级span, 内容就是x
.appendTo($('.show')) // 将li添加到父级show最后
.on('click', 'span', function (ev) { // 通过li为子级span委派点击事件
ev.stopPropagation();
console.log(this); // span
$(this).parent().remove(); // span找到父级li,进而删除当前li
})
.on('click', function () { // 为li添加点击事件 => 进入编辑状态
console.log(this); // li
// 将当前li的p内容取出 => 给编辑状态下的输入框
var txt = $(this).children('p').text();
// 如何才可以变为编辑方式 => 将p替换为input
// $(this).children('p').replaceWith($('<input>').val(txt));
$('<input>').val(txt) // 进入编辑状态,新建input输入框,内容是当前留言p的内容
.attr('autofocus', 'true') // ?
.replaceAll($(this).children('p')) // 来替换显示内容的p标签
.blur(function () { // 为当前编辑框添加失去焦点的事件
var edit_txt = $(this).val(); // 存储修改后的文本
if (edit_txt.length == 0) edit_txt = "null"; // 修改后的内容为空的安全处理
$('<p></p>').text(edit_txt).replaceAll(this); // 将编辑完成后的input重新替换为p标签来显示
})
}) } </script>
</html>
四、form表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单</title>
<style>
label {
display: inline-block;
width: 80px;
text-align: right;
}
textarea {
width: 300px;
height: 200px;
/*horizontal | vertical*/
resize: none;
font-size: 30px;
}
</style>
</head>
<body>
<!--什么是form表单: form组合标签, 用来接收前端用户录入的数据信息 提交 给后台语言-->
<!--表单元素:
input: 基本上都是输入框, 通过type全局属性决定input类型, 默认为text
label: 普通文本框(类似于span), 一般用来为紧跟其后的input框做文本提示
--> <!--form属性:
action: 后台处理请求的接口(往哪提交数据)
method: 请求方式
-- get: 将数据拼接在请求的接口之后, 拼接的长度是有限的,所有传输数据的大小也是有限的,且不安全
-- post: 将数据作为数据包打包有请求携带给后台, 没有数据大小的限制, 安全
-->
<form action="" method="get">
<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>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 取消btn1的默认动作
$('.btn1').click(function () {
return false;
}); // 取消表单的默认提交动作 => type="submit"所有标签的提交事件都取消了
$('form').submit(function () {
// return false;
})
</script>
</html>
五、正则
var re = /\d{11}/ig
// 1.正则的语法书写在//之间
// 2.i代表不区分大小写
// 3.g代表全文匹配
// 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取第二个分组
"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取第二个分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则</title>
</head>
<body> </body>
<script>
// 正则: 有语法规则的字符串, 用来匹配目标字符串
// 定义正则 // 第一种: 通过构造函数来创建正则对象, 特殊字符需要转义
// var re = new RegExp('\\d');
// 第二种
var re = /\d{2}/; // 可以用正则的字符串方法
var res = "#abc1abc56".search(re);
console.log(res);
// str.search(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-1 var target = 'abc123你好ABC';
var re = /((abc)((123)你好ABC))/;
var res = target.match(re);
console.log(res);
// 取第四个分组
console.log(res[4]);
console.log(RegExp.$4); // str.match()
// 匹配失败返回null, 匹配成功,如果非全文匹配, 返回匹配到的信息的数组形式
// i: 不区分大小写 eg: /a/i 可以匹配a | A
// g: 匹配匹配 eg: /a/g 可以匹配abcABCabc中的两个a
console.log("abcABCabc".match(/(abc)ABCabc/g))
console.log(RegExp.$1)
</script>
</html>
六、form案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form案例</title>
<style>
.red {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!--
http://api.map.baidu.com/place/v2/search ① query：搜索地点 （如：<input type="text" placeholder="如：肯德基" name="query">）
② region：区域中文名 （如：上海）
③ output：返回数据类型 （如：json /xml）
④ ak：密钥 （如：6E823f587c95f0148c19993539b99295）
-->
<form action="http://api.map.baidu.com/place/v2/search">
地点(肯德基):<input class="query" type="text" name="query"> <span></span> <br>
区域(上海):<input type="text" name="region"> <br>
<select name="output">
<option value="json">json</option>
<option value="xml">xml</option>
</select> <br>
<input type="hidden" name="ak" value="6E823f587c95f0148c19993539b99295">
<input type="submit" value="搜索">
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.query').blur(function () {
if ($(this).val().search(/.+/) == -1) {
$(this).next().text("请输入内容").addClass('red')
}
})
$('.query').focus(function () {
$(this).next().text("")
})
</script>
</html>
web开发：jquery之DOM的更多相关文章
- 静态Web开发 JQuery
伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...
- Web开发——jQuery基础
参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
- Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
- Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- 实例节点的NTP服务器地址配置正确，而且能够ping通， 但是在chronyc sources指令中显示NTP服务器状态为“？”
问题:如果实例节点的NTP服务器地址配置正确,而且能够ping通, 但是在chronyc sources指令中显示NTP服务器状态为“?”, 该如何检查并操作. 1)在chrony配置文件中,检查 ...
- 事理学神器PDCA
做事情都按PDCA循环来做,基本就是一个靠谱的人. 这个方法论其实也符合架构师的思维中的分治理论.把大事拆分成一件件小事,并把小事做好. Plan Do Check Action
- idea配置svn,maven,jdk和一些基础设置
1.idea配置svn 1.1 首先下载svn,百度云链接:链接:https://pan.baidu.com/s/1PvSBuHcHMrrBHfnOfVRC9Q 提取码:hs7l 1.2 开始安装 这 ...
- POJ 3274/洛谷 1360:Gold Balanced Lineup 黄金阵容平衡
题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...
- @KafkaListener和@KafkaListeners的使用
2. consumer 使用了@KafkaListener注解. 2.1. pom.xml 引入以下依赖 <dependency> <groupId>org.springfra ...
- mui ajax传参示例
//加入购物车var data=[];var row1 = {good_id:'1',number:'2',goods_spec_ids:[1,2]};data.push(row1);console. ...
- find the mincost route【无向图最小环】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1599 Problem Description 杭州有N个景区,景区之间有一些双向的路来连接,现在860 ...
- AndroidStudio布局编辑器强制刷新布局界面
用AndroidStudio布局编辑器编辑界面的时候,在selector里调整按钮的颜色,调整后的颜色经常无法实时显示在布局编辑器里,每次都重新运行程序查看界面又非常麻烦和低效,可以用以下方法解决: ...
- Memcached和Spring集成开发
xml配置文件 <bean id="memcachedPool" class="com.danga.MemCached.SockIOPool" facto ...
- Sql Server 收缩日志文件原理及always on 下的实践
一.准备知识 1.LSN LSN用来标识特定日志在日志文件中位置(详情请见什么是LSN:日志序列号),它由两部分组成:一部分用来标识VLF(虚拟日志文件)的序列号,剩下的用来标识该日志在VLF中的具体 ...