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'));
```
- 内部操作
```js
// append(): 父 加 子 到最后
// prepend():  父 加 子 到最前
// appendTo(): 子 加到 父 到最后
// prependTo():  子 加到 父 到最前
```
- 兄弟
```js
$('.box').after('<b></b>');  // 在box后添加一个b标签
$('.box').before('<b></b>');  // 在box前添加一个b标签
```
- 包裹(添加父级)
```js
$('.box').wrap('<div></div>');  // 为box添加一个div父级
```
- 替换
```js
$('.box').repleaceWith($('.ele')); // 把box替换为ele
$('p').repleaceAll($('b')); // 用p替换所有的b
```
- 删除
```js
// 1.清空所有子级
$('.box').empty(); // 将box的子级全部删除, 操作的返回值为 自身
   
// 2.不保留事件的删除
// remove()操作的返回值为 自身
$('.box').remove().appendTo($('body'));  // 删除自身再添加到body,原来box已有的事件不再拥有
// 3.保留事件的删除
// 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指的是ele5var _this = this;return $('.wrap').attr('class', function () {// this指的是wrapreturn 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>&times;</span>--><!--</li>--><!--<li>--><!--<p>一楼说的对</p>--><!--<span>&times;</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>&times;</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类型, 默认为textlabel: 普通文本框(类似于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代表全文匹配
// 匹配案例
"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(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-1var 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>

 

转载于:https://www.cnblogs.com/wuzhengzheng/p/10273611.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NO.8:自学python之路------并行socket网络编程

摘要 一到放假就杂事很多&#xff0c;这次的作业比较复杂&#xff0c;做了一个周&#xff0c;进度又拖了。不过结果还不错。 正文 粘包 在上一节中&#xff0c;如果连续发送过多数据&#xff0c;就可能发生粘包。粘包就是两次发送的数据粘在一起被接收&#xff0c;损坏了数据的…

vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

先后顺序&#xff1a; index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码 测试的页面代码块&#xff1a; 文件的加载先后顺序&#xff1a; Index.vue的mounted()中的输出没有执行。why&#…

Http请求报头设置(C#)

1、添加一个SetHeaderValue方法&#xff1a; public static void SetHeaderValue(WebHeaderCollection header, string name, string value) { var property typeof(WebHeaderCollection).GetProperty("InnerCollection",BindingFlags.Instance | BindingFlags.NonP…

vue-cli3使用cdn引入

1. index.html引入&#xff1a; <script src"https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script> <script src"https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>2. vue.config.js配置&…

vue常用属性

Vue实例常用属性 1.数据 data:Vue 实例的数据对象 components&#xff1a;Vue实例配置局部注册组件 1.类方法 computed:计算属性 watch&#xff1a;侦听属性 filters&#xff1a;过滤器 methods:Vue实例方法 render&#xff1a;渲染函数&#xff0c;创建虚拟DOM 1.生命周期 c…

凸包算法

转载自&#xff1a;https://blog.csdn.net/bone_ace/article/details/46239187 凸包问题的五种解法 2015年05月29日 17:58:51 阅读数&#xff1a;33660前言&#xff1a; 首先&#xff0c;什么是凸包&#xff1f; 假设平面上有p0~p12共13个点&#xff0c;过某些点作一个多边形&a…

一个优雅的占位图解决方案。适用于 UITableView 和 UICollectionView。

FMListPlaceholder 项目地址&#xff1a;https://github.com/yfming93/FMListPlaceholder 一个优雅的占位图解决方案。适用于 UITableView 和 UICollectionView。 一行代码处理空列表占位图逻辑 0x001 与其他的同类三方库对比的优点&#xff1a; 首次进入列表占位图是不显示的。…

es7 async 前置依赖

https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined 移动端 px2rem-loader 转载于:https://www.cnblogs.com/smzd/p/10560176.html

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn&#xff1b; 例如&#xff1a;子组件&#xff1a; <template><di…

SSO阅读有感

SSO比较详细且理解。赞 链接&#xff1a;https://www.cnblogs.com/ywlaker/p/6113927.html转载于:https://www.cnblogs.com/z1j2r3/p/9408480.html

C语言——反弹球游戏(第二阶段

#include<stdio.h> #include<stdlib.h> #include<windows.h> #include<conio.h>#define High 15 //游戏画面尺寸 #define Width 20//全局变量 int ball_x,ball_y; //小球的坐标 int ball_vx,ball_vy; //小球的速度 int canvas[High][W…

docker运行我们的容器

docker images docker pull nginx 运行 docker images 查看Nginx镜像是否获取成功&#xff0c;若为如下所示即为获取成功&#xff1a; docker run -p 8080:80 -d nginx docker run –name 容器名 -d&#xff08;后台运行&#xff09;-p 本地端口:容器端口 -v(挂载) 挂载本地路径…

vue-transition动画

demo点击显示与消失 <div id"demo"><button v-on:click"show !show">Toggle</button><transition name"fade"><p v-if"show">hello</p></transition> </div> <script> new V…

luogu P1896 [SCOI2005]互不侵犯

去tm插头dp 数据范围这么小,又要求,显然上dp 设\(f[i][j][k]\)表示放到第\(i\)行,总共放了\(j\)个那啥,第\(i\)行的格子状态为\(k\)的方案 先预处理出一行内状态的放置个数和格子状态,因为那啥占据周围一圈的格子,所以转移时前后两行格子状态没有交集的状态转移 #include<al…

Java String:重要到别人只能当老二的字符串类

字符串&#xff0c;是Java中最重要的类。这句肯定的推断不是Java之父詹姆斯高斯林说的&#xff0c;而是沉默王二说的&#xff0c;因此你不必怀疑它的准确性。 关于字符串&#xff0c;有很多的面试题&#xff0c;但我总觉得理论知识绕来绕去没多大意思。你比如说&#xff1a;Str…

vue 中slot 的具体用法

子组件 <template><div class"slotcontent"><ul><!--<slot></slot>--><li v-for"item in items">{{item.text}}</li></ul></div> </template><script>export default{data(){re…

Java基础教程:多线程基础(3)——阻塞队列

Java基础教程&#xff1a;多线程基础&#xff08;3&#xff09;——阻塞队列 快速开始 引入问题 生产者消费者问题是线程模型中的经典问题&#xff1a;生产者和消费者在同一时间段内共用同一存储空间&#xff0c;生产者向空间里生产数据&#xff0c;而消费者取走数据。 模拟情景…

001.Linux开机启动过程

相关Linux启动过程解析&#xff0c;此作为通用启动参考&#xff1a; 转载于:https://www.cnblogs.com/itzgr/p/10285833.html

学习vim 从常用按键开始

撤销 u 前进 ctrl r移动 下一个单词 w 当前单词首或上个单词首 b 当前单词尾或上个单词尾 e ---- 大写就是忽略标点符号 行首行尾 $^ 查询 /word 下一个 n 上一个 Nv 可视化操作命令 删除操作 x 删除光标处的字符&#xff0c;向后删除 nx …

element ui 中 el-menu 如何添加链接router-link标签

在vue项目中&#xff0c;使用elementui 框架&#xff0c;做一个后台管理系统 在写左边菜单&#xff0c;菜用了&#xff0c;elementui 提供的组件 &#xff0c; el-menu 组件。但是组件没有链接&#xff0c;而我们知道添加链接使用router-link标签代码如下&#xff1a; <el-…