jQuery的DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量85 收藏
点赞数
分类专栏： 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46884853/article/details/109449949
版权

属性操作:

attr()、removeAttr()
<hr>
    <h2>属性操作：attr() and removeAttr()</h2>
    <hr>
    <label for="">属性操作：</label><span id="attr_get">获取属性：</span><span id="attr_set">修改属性：</span><span id="attr_del">删除属性：</span>
    <div id="box" style="width: 100%;height: 500px;background:gray">
        <input style="width: 50%;" type="text" placeholder="属性测试">
    </div>
    <script>
        $(function(){
            // 属性操作 ： 获取  修改  删除
            $('#attr_get').click(function(){
                $('#box input').val($('#attr_get').text()+$('#box').attr('style'));
            });
            $('#attr_set').click(function(){
                $('#box').attr('style', 'background:red;color:white;width: 100%;height: 500px;');
                $('#box input').val($('#attr_set').text()+$('#box').attr('style'));
            });
            $('#attr_del').click(function(){
                $('#box input').val($('#attr_del').text()+$('#box').removeAttr('style'));
            });
        });
    </script>
    ```
### 内容节点获取 ：
###### html() 、text()、val()
	```
	<br>
    <br>
    <br>
    <br>
    <hr>
    <h2>节点内容获取：html() and text() and val()</h2>
    <hr>
    <label for="">节点获取：</label>
    <span id="node_get_html">node_get_html：</span>
    <span id="node_get_text">node_get_text：</span>
    <span id="node_get_val">node_get_val：</span>
    <div id="node_get"><sapn>获取值：html() and text() and val()</sapn></div>
    <input type="text" id="node_get_ipt" value=".val()的值获取">
    <script>
        $(function(){
            $('#node_get_html').click(function(){
                alert('html():'+$('#node_get').html());
            });
            $('#node_get_text').click(function(){
                alert('text():'+$('#node_get').text());
            });
            $('#node_get_val').click(function(){
                alert('val():'+$('#node_get_ipt').val());
            });
        })
        </script>

节点内容设置：

html() and text() and val()
<br>
        <br>
        <br>
        <br>
        <hr>
        <h2>节点内容设置：html() and text() and val()</h2>
        <hr>
        <label for="">节点设置：</label>
        <span id="node_set_html">node_set_html：</span>
        <span id="node_set_text">node_set_text：</span>
        <span id="node_set_val">node_set_val：</span>
        <div >设置值：<sapn id="node_set">html() and text() and val()</sapn></div>
        <input type="text" id="node_set_ipt" value=".val()的值获取">
        <script>
            $(function(){
                $('#node_set_html').click(function(){
                    $('#node_set').html('html设置值');
                });
                $('#node_set_text').click(function(){
                    $('#node_set').text('text设置值');
                });
                $('#node_set_val').click(function(){
                    $('#node_set_ipt').val('val设置值');
                });
            })
        </script>

文档处理：

添加：append and appendTo and prepend and prependTo
 <br>
            <br>
            <br>
            <br>
            <hr>
            <h2>文档处理：append and appendTo and prepend and prependTo and remove and empty</h2>
            <h2>添加到选择元素里面</h2>
            <hr>
            <label for="">文档操作展示：</label>
            <span id="dom_add">后面追加[append]</span>
            <span id="dom_pre_add">前面追加[prepend]</span>
            <span id="dom_to_add">后面追加到[appendTo]</span>
            <span id="dom_pre_to_add">前面追加到[prependTo]</span>
            <span id="dom_remove">全部删除[remove]</span>
            <span id="dom_empty">删除所选元素的子元素[empty]</span>
            <ul id="fruits">
                <li>苹果</li>
                <li>哈密瓜</li>
                <li id="banana">香蕉</li>
                <li>菠萝</li>
            </ul>
            <script>
                $(function(){
                    $('#dom_add').click(function(){
                        $('#fruits').append('<li>橘子</li>');
                    });
                    $('#dom_pre_add').click(function(){
                        $('#fruits').prepend('<li>橘子</li>');
                    });
                    $('#dom_to_add').click(function(){
                        $('<li>橘子</li>').appendTo('#fruits');
                    });
                    $('#dom_pre_to_add').click(function(){
                        $('<li>橘子</li>').prependTo('#fruits');
                    });
                    $('#dom_remove').click(function(){
                        $('#fruits').remove();
                    });
                    $('#dom_empty').click(function(){
                        $('#fruits').empty('#banana');
                    });
                    });
            </script>
添加：before and after and insert before and insert after
  <br>
            <br>
            <br>
            <br>
            <hr>
            <h2>文档处理：before and after and insert before and insert after and remove and empty</h2>
            <h2>添加到选择元素外面</h2>
            <hr>
            <label for="">文档操作展示：</label>
            <span id="dom_after">后面追加[after]</span>
            <span id="dom_before">前面追加[before]</span>
            <span id="dom_insert_after">后面追加到[insert after]</span>
            <span id="dom_insert_before">前面追加到[insert before]</span>
            <span id="dom_remove_a">全部删除[remove]</span>
            <span id="dom_empty_a">删除所选元素的子元素[empty]</span>
            <ul id="fruits_a">
                <li>苹果</li>
                <li>哈密瓜</li>
                <li class="banana">香蕉</li>
                <li>菠萝</li>
            </ul>
            <script>
                $(function(){
                    $('#dom_after').click(function(){
                        $('#fruits_a').after('<li>橘子</li>');
                    });
                    $('#dom_before').click(function(){
                        $('#fruits_a').before('<li>橘子</li>');
                    });
                    $('#dom_insert_after').click(function(){
                        $('<li>橘子</li>').insertAfter('#fruits_A');
                    });
                    $('#dom_insert_before').click(function(){
                        $('<li>橘子</li>').insertBefore('#fruits_a');
                    });
                    $('#dom_remove_a').click(function(){
                        $('#fruits_a').remove();
                    });
                    $('#dom_empty_a').click(function(){
                        $('#fruits_a').empty('.banana');
                    });
                    });
            </script>
包裹：wrap and unwrap
<br>
               <br>
               <br>
               <br>
               <hr>
               <h2>文档处理：wrap and unwrap</h2>
               <h2>包裹</h2>
               <hr>
               <label for="">文档操作展示：</label>
               <span id="dom_wrap">包裹[wrap] 操作</span>
               <span id="dom_unwrap">去除包裹[unwrap] 操作</span>
               <div id="baoguo">
                    <p>hello</p>
                    <p>gilrs</p>
                    <p>!</p>
                    <br>
                    <br>
                    <br>
               </div>
               <script>
                   $(function(){
                       $('#dom_wrap').click(function(){
                           // 给每个p标签外面包裹一个div
                           $('#baoguo p').wrap('<div style="color:red;"></div>');
                       });
                       $('#dom_unwrap').click(function(){
                           $('#baoguo p').unwrap(); //删除之后会继续向上删除
                       });
                   });
               </script>

删除清空：clone and remove and empty

<br>
<br>
<br>
<br>
<hr>
<h2>文档处理：clone and remove and empty</h2>
<h2>添加到选择元素里面</h2>
<hr>
<label for="">文档操作展示：</label>
<span id="dom_remove_b">删除[remove]</span>
<span id="dom_empty_b">清空[empty]</span>
<span id="dom_clone_b">克隆[clone]</span>
<ul id="fruits_b">
    <li id="node_remove">remove</li>
    <li id="node_empty">empty</li>
    <li id="node_clone">clone</li>
</ul>
<script>
    $(function(){
        $('#dom_remove_b').click(function(){
            $('#node_remove').remove();
        });
        $('#dom_empty_b').click(function(){
            $('#node_empty').empty();
        });
        $('#dom_clone_b').click(function(){
            alert($('#node_clone').clone().text());
        });
        });
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        span{
            border: 1px solid #666;
            margin: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <hr>
    <h2>属性操作：attr() and removeAttr()</h2>
    <hr>
    <label for="">属性操作：</label><span id="attr_get">获取属性：</span><span id="attr_set">修改属性：</span><span id="attr_del">删除属性：</span>
    <div id="box" style="width: 100%;height: 500px;background:gray">
        <input style="width: 50%;" type="text" placeholder="属性测试">
    </div>
    <script>
        $(function(){
            // 属性操作 ： 获取  修改  删除
            $('#attr_get').click(function(){
                $('#box input').val($('#attr_get').text()+$('#box').attr('style'));
            });
            $('#attr_set').click(function(){
                $('#box').attr('style', 'background:red;color:white;width: 100%;height: 500px;');
                $('#box input').val($('#attr_set').text()+$('#box').attr('style'));
            });
            $('#attr_del').click(function(){
                $('#box input').val($('#attr_del').text()+$('#box').removeAttr('style'));
            });
        });
    </script>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <h2>节点内容获取：html() and text() and val()</h2>
    <hr>
    <label for="">节点获取：</label>
    <span id="node_get_html">node_get_html：</span>
    <span id="node_get_text">node_get_text：</span>
    <span id="node_get_val">node_get_val：</span>
    <div id="node_get"><sapn>获取值：html() and text() and val()</sapn></div>
    <input type="text" id="node_get_ipt" value=".val()的值获取">
    <script>
        $(function(){
            $('#node_get_html').click(function(){
                alert('html():'+$('#node_get').html());
            });
            $('#node_get_text').click(function(){
                alert('text():'+$('#node_get').text());
            });
            $('#node_get_val').click(function(){
                alert('val():'+$('#node_get_ipt').val());
            });
        })
    </script>
        <br>
        <br>
        <br>
        <br>
        <hr>
        <h2>节点内容设置：html() and text() and val()</h2>
        <hr>
        <label for="">节点设置：</label>
        <span id="node_set_html">node_set_html：</span>
        <span id="node_set_text">node_set_text：</span>
        <span id="node_set_val">node_set_val：</span>
        <div >设置值：<sapn id="node_set">html() and text() and val()</sapn></div>
        <input type="text" id="node_set_ipt" value=".val()的值获取">
        <script>
            $(function(){
                $('#node_set_html').click(function(){
                    $('#node_set').html('html设置值');
                });
                $('#node_set_text').click(function(){
                    $('#node_set').text('text设置值');
                });
                $('#node_set_val').click(function(){
                    $('#node_set_ipt').val('val设置值');
                });
            })
        </script>
            <br>
            <br>
            <br>
            <br>
            <hr>
            <h2>文档处理：append and appendTo and prepend and prependTo and remove and empty</h2>
            <h2>添加到选择元素里面</h2>
            <hr>
            <label for="">文档操作展示：</label>
            <span id="dom_add">后面追加[append]</span>
            <span id="dom_pre_add">前面追加[prepend]</span>
            <span id="dom_to_add">后面追加到[appendTo]</span>
            <span id="dom_pre_to_add">前面追加到[prependTo]</span>
            <span id="dom_remove">全部删除[remove]</span>
            <span id="dom_empty">删除所选元素的子元素[empty]</span>
            <ul id="fruits">
                <li>苹果</li>
                <li>哈密瓜</li>
                <li id="banana">香蕉</li>
                <li>菠萝</li>
            </ul>
            <script>
                $(function(){
                    $('#dom_add').click(function(){
                        $('#fruits').append('<li>橘子</li>');
                    });
                    $('#dom_pre_add').click(function(){
                        $('#fruits').prepend('<li>橘子</li>');
                    });
                    $('#dom_to_add').click(function(){
                        $('<li>橘子</li>').appendTo('#fruits');
                    });
                    $('#dom_pre_to_add').click(function(){
                        $('<li>橘子</li>').prependTo('#fruits');
                    });
                    $('#dom_remove').click(function(){
                        $('#fruits').remove();
                    });
                    $('#dom_empty').click(function(){
                        $('#fruits').empty('#banana');
                    });
                    });
            </script>

            <br>
            <br>
            <br>
            <br>
            <hr>
            <h2>文档处理：before and after and insert before and insert after and remove and empty</h2>
            <h2>添加到选择元素外面</h2>
            <hr>
            <label for="">文档操作展示：</label>
            <span id="dom_after">后面追加[after]</span>
            <span id="dom_before">前面追加[before]</span>
            <span id="dom_insert_after">后面追加到[insert after]</span>
            <span id="dom_insert_before">前面追加到[insert before]</span>
            <span id="dom_remove_a">全部删除[remove]</span>
            <span id="dom_empty_a">删除所选元素的子元素[empty]</span>
            <ul id="fruits_a">
                <li>苹果</li>
                <li>哈密瓜</li>
                <li class="banana">香蕉</li>
                <li>菠萝</li>
            </ul>
            <script>
                $(function(){
                    $('#dom_after').click(function(){
                        $('#fruits_a').after('<li>橘子</li>');
                    });
                    $('#dom_before').click(function(){
                        $('#fruits_a').before('<li>橘子</li>');
                    });
                    $('#dom_insert_after').click(function(){
                        $('<li>橘子</li>').insertAfter('#fruits_A');
                    });
                    $('#dom_insert_before').click(function(){
                        $('<li>橘子</li>').insertBefore('#fruits_a');
                    });
                    $('#dom_remove_a').click(function(){
                        $('#fruits_a').remove();
                    });
                    $('#dom_empty_a').click(function(){
                        $('#fruits_a').empty('.banana');
                    });
                    });
            </script>
               <br>
               <br>
               <br>
               <br>
               <hr>
               <h2>文档处理：wrap and unwrap</h2>
               <h2>包裹</h2>
               <hr>
               <label for="">文档操作展示：</label>
               <span id="dom_wrap">包裹[wrap] 操作</span>
               <span id="dom_unwrap">去除包裹[unwrap] 操作</span>
               <div id="baoguo">
                    <p>hello</p>
                    <p>gilrs</p>
                    <p>!</p>
                    <br>
                    <br>
                    <br>
               </div>
               <script>
                   $(function(){
                       $('#dom_wrap').click(function(){
                           // 给每个p标签外面包裹一个div
                           $('#baoguo p').wrap('<div style="color:red;"></div>');
                       });
                       $('#dom_unwrap').click(function(){
                           $('#baoguo p').unwrap(); //删除之后会继续向上删除
                       });
                   });
               </script>

<br>
<br>
<br>
<br>
<hr>
<h2>文档处理：clone and remove and empty</h2>
<h2>添加到选择元素里面</h2>
<hr>
<label for="">文档操作展示：</label>
<span id="dom_remove_b">删除[remove]</span>
<span id="dom_empty_b">清空[empty]</span>
<span id="dom_clone_b">克隆[clone]</span>
<ul id="fruits_b">
    <li id="node_remove">remove</li>
    <li id="node_empty">empty</li>
    <li id="node_clone">clone</li>
</ul>
<script>
    $(function(){
        $('#dom_remove_b').click(function(){
            $('#node_remove').remove();
        });
        $('#dom_empty_b').click(function(){
            $('#node_empty').empty();
        });
        $('#dom_clone_b').click(function(){
            alert($('#node_clone').clone().text());
        });
        });
</script>
</body>
</html>
黄佳耀
关注
专栏目录
jQuery DOM节点操作
weixin_44540247的博客
04-30 543
DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素，然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。 而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个appe...
jQuery DOM操作小结与实例
10-29
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
jQuery DOM操作
qq_36194388的博客
07-29 1416
jQuery中DOM基本操作 jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。 【查】查找结点 查找节点非常容易，使用选择器就能轻松完成各种查找工作。 就是利用我们前面学习的选择器来查找节点的。 例：查找元素节点p返回p内的文本内容。 $("p").text(); 例：查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //.
Educoder jQuery DOM操作
m0_65391975的博客
12-05 1911
Educoder jQuery DOM操作 第1关：jQuery获取内容和属性 第2关：jQuery设置内容和属性 第3关：jQuery添加元素 第4关：jQuery删除元素
Jquery操作DOM对象
zhoutong2323的博客
02-28 559
HTML代码操作 演示案例 总结
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1113
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery中的DOM操作
weixin_67418985的博客
09-21 358
表示遍历元素的下标 $(this)：表示当前元素。创建节点，创建文本，绑定节点和文本，添加新的节点。删除该节点及其节点下的所有子节点。在标签内部的末尾添加节点。在标签内部的头部添加节点。在标签外部的末尾添加节点。在标签外部的头部添加节点。
JavaScript之jQuery操作DOM详解
qq_47897078的博客
01-19 940
JavaScript之jQuery操作DOM jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？ 答案当然是操作对应的DOM节点啦！ 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结
jQuery DOM操作 插入元素
Mr_XMeng的博客
12-08 700
jQuery DOM 操作 插入元素 一 、 插入元素 1> 内部插入元素 <div class="insideAdd"> <p> 在内部插入元素 </p> </div> 1、append（’插入的元素’)，插入到末尾 $('.insideAdd').append('<h2>222</h2>'); //插入标签元素 $('.insideAdd').append($(
jquery之DOM操作（一）
The_upside_of_down的博客
10-11 1774
一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。 1、DOM Core DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。 利用DOM Core来获取表单对象的方法： document.getElementsByTagName("form"); 2、HTML-DOM 它主要是提供一些更简明的符号来描述各种ht...
七、 jQuery 操作 DOM
m0_72166275的博客
08-03 908
当网页被加载时，浏览器会创建当前网页的 DOM 对象。JavaScript 通过提供的方法对 DOM 节点进行操作，实现页面的交互；jQuery 提供了一系列操作 DOM 的方法；一方面简化了 JavaScript 操作 DOM的写法；另一方面解决了浏览器的兼容性问题。JavaScript 操作 DOM 分为三类，即 DOM Core(核心)、HTML-DOM 和 CSS-DOM，jQuery 操作 DOM 同样分为这三类。
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
jQuery DOM操作 基于命令改变页面
10-29
jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 JavaScript 编程，特别是对文档对象模型（DOM）的操作。DOM 操作是 JavaScript 中一项基本而重要的技能，通过它可以实现对网页内容、结构和样式的动态控制。...
利用ajax向php传值
weixin_46884853的博客
12-02 2060
利用ajax实现与php数据交互，并局部刷新页面 本文主要有以下几个要点： ajax的基本语法结构 jQuery基本语法 json数组基本结构 ajax回调函数中的json数组解析及局部刷新 php基本语法 ajax与php的对接 php中post数据提交方式与接收 ajax基本语法 $.ajax({ type: “post”, //数据提交方式（post/get） url: “demo.php”, //提交到的url data: {username:username,password:password},
js设置文本无法复制功能
weixin_46884853的博客
10-21 1183
将以下 js 代码复制到你的 js 文件中（这段代码是针对IE的）： 复制代码代码如下: document.onselectstart=new Function("event.returnValue=false;"); //禁止选择,也就是无法复制 </script> 将以下代码复制到你的 css 文件中（这段代码是针对firefox的）： 复制代码代码如下: <style type="text/css">body{-moz-user-select:none;}</style
元素点击之后出现蓝色边框
weixin_46884853的博客
10-21 981
谷歌浏览器中点击元素出现蓝色边框 outline:none
前端元素拖拽
weixin_46884853的博客
11-23 525
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
jQuery中的常用事件
weixin_46884853的博客
11-02 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/
jQuery DOM操作详解：类名、属性修改与节点操作
jQuery 是一种广泛使用的 JavaScript 库，它极大地简化了前端网页开发中对 DOM（Document Object Model）的操作。在本文档中，我们将深入探讨 jQuery 中关于 DOM 操作的一些关键方法，包括但不限于属性操作、HTML ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值