當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web开发：jquery之DOM

發布時間：2023/12/13 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><div class="ele5"><div class="wrap"></div></div><div class="container"><div class="inner first">Hello</div><div class="inner second">And</div><div class="inner third">Goodbye</div></div><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> </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"></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 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">男<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">籃球<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"><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>  <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

總結

以上是生活随笔為你收集整理的web开发：jquery之DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：秒杀核心设计(减库存部分)-防超卖与高并
下一篇：自然语言处理在医学领域的应用