前端第72天JQDOM课件
一,文档结构
```js var $sup = $('.sup'); console.log($sup.children()); // 子们 console.log($sup.parent()); // 父 console.log($sup.prev()); // 上兄弟 console.log($sup.next()); // 下兄弟 console.log($sup.siblings()); // 兄弟们 ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档结构</title> </head> <body> <div class="box"></div> <div class="sup"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="ele"></div> </body> <script src="js/jquery-3.3.1.js"></script> <script> var $sup = $('.sup'); console.log($sup.children()); // 子们 console.log($sup.parent()); // 父 console.log($sup.prev()); // 上兄弟 console.log($sup.next()); // 下兄弟 console.log($sup.siblings()); // 兄弟们 </script> </html>
二,文档操作
1. 操作步骤 ```js // 1.创建页面元素 var $box = $('<div class="box"></div>') // 2.设置页面元素 $box.text('文本'); $box.click(fn); // 3.添加到指定位置 $box.appendTo($('body')); ``` 2. 内部操作 ```js // append(): 父 加 子 到最后 // prepend(): 父 加 子 到最前 // appendTo(): 子 加到 父 到最后 // prependTo(): 子 加到 父 到最前 ``` 3. 兄弟 ```js $('.box').after('<b></b>'); // 在box后添加一个b标签 $('.box').before('<b></b>'); // 在box前添加一个b标签 ``` 4. 包裹(添加父级) ```js $('.box').wrap('<div></div>'); // 为box添加一个div父级 ``` 5. 替换 ```js $('.box').repleaceWith($('.ele')); // 把box替换为ele $('p').repleaceAll($('b')); // 用p替换所有的b ``` 6. 删除 ```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指的是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>
三.表单
```js // form // 属性 // action: 请求的后台接口 // method: get|post请求方式, get拼接接口方式传输数据(不安全), post携带数据包传输数据(安全) ``` - 表单元素类型 ```html <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> ```
<!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>
四,正则
```js
// 定义
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(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-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>
五,from案例
!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>
