java web-11.3Jquery—DOM操作

妖狐艹你老母 2023-02-09 11:53 2阅读 0赞

## JQuery\_DOM操作\_内容操作 ##

**内容操作**  
1.html（）：获取/设置元素的标签体内容 `<a><front>内容</front></a> ---> <front>内容</front>`  
2.text（）:获取/设置元素的标签体纯文本内容`<a><front>内容</front></a> ---> 内容`  
3.val（）:获取/设置元素的value属性值

<script src="../js/jquery-3.3.1.min.js"></script>
        <script>
            //入口函数
            $(function () { 
                //获取myinput的value值
                var value = $("#myinput").val();
                alert(value);
                //设置value属性的值
                //$("myinput").val("李四");
                //获取mydiv的标签体内容
                var html = $("mydiv").html();
                alert(html);
                //$("#mydiv").html("aaaa");
                //获取mydiv文本内容
                var text = $("#mydiv").text();
                alert(text);
                //$("#mydiv").text("bbbb");
            })
        </script>
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三"/><br/>
        <div id = "mydiv"><p><a href="#">标签体</a> </div>
    </body>

## JQuery\_DOM操作\_属性操作 ##

**1.通用属性操作**  
（1）attr（）：获取/设置元素的属性  
（2）removeAttr（）:删除属性  
（3）prop():设置元素的属性  
（4）removeProp():删除属性

<script type="text/javascript">
            //获取北京节点的name属性值
           var name = $("#bj").attr("name");
    
            //设置北京节点的name属性的值为dabeijing
            $("#bj").atrr("name","beijing");
            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的选中状态
            var checked = $("#hobby").pro("cheched");
            alert(name)
        </script>

**attr()和prop()的区别？**  
（1）如果操作的是元素的固有属性，则建议使用prop  
（2）如果操作的是元素自定义的属性，则建议使用attr  
**2.对class属性操作**  
（1）addClass（）：添加class属性值  
（2）removeClass（）：删除class属性  
（3）toggleClass（）：切换class属性  
toggleClass（“one”）:判断如果元素对象上存在class=“one”，则将属性值one删除掉，如果元素对象上不存在class=“one”则添加。

<script>
    
            $(function () { 
                // <input type="button" value="采用属性增加样式(改变id = one的样式)" id = "b1" /><br/>
                $("#b1").click(function () { 
                    $("#one").prop("class","second");
                })
                //     <input type="button" value="addClass" id = "b2" /><br/>
                $("#b2").click(function () { 
                    $("#one").addClass("second");
                })
                //     <input type="button" value="removeClass" id = "b3" /><br/>
                $("#b3").click(function () { 
                    $("#one").removeClass("second");
                })
                //     <input type="button" value="切换样式" id = "b4" /><br/>
                $("#b4").click(function () { 
                    $("#one").toggleClass("second");
                })
                //     <input type="button" value="通过css（）获得id为one背景色" id = "b5" /><br/>
                $("#b5").click(function () { 
                    var backgroundColor = $("#one").css("backgroundColor");
                    alert(backgroundColor);
                })
                //     <input type="button" value="通过css（）获得id为one背景色为绿色" id = "b6" /><br/>
                $("#b6").click(function () { 
                    $("#one").css("backgroundColor","green");
                })
            })
        </script>

## JQuery\_DOM操作\_CRUD操作 ##

**CRUD操作**  
1.append（）：父元素将子元素追加到末尾  
对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾  
2.prepend（）：父元素将子元素追加到开头  
对象1.prepend（对象2）：将对象2添加到对象1元素内部，并且在开头  
3.appendTo（）：  
对象1.appendTo（对象2）：将对象1添加到对象2内部，并且在末尾  
4.prependTo（）：  
对象1.perpendTo（对象2）：将对象1添加到对象2内部，并且在开头  
5.after（）：添加元素到元素后边  
对象1.after（对象2）：将对象2添加到对象1后边。对象1和对象2是兄弟关系  
6.before（）：添加元素到元素前边  
对象1.before（对象2）：将对象2添加到对象1前边。对象1和对象2是兄弟关系  
7.insertAfter（）：  
对象1.insertAfter（对象2）：将对象2添加到对象1后边。对象1和对象2是兄弟关系  
8.insertBefore（）：  
对象1.insertBefore（对象2）：将对象2添加到对象1前边。对象1和对象2是兄弟关系  
**案例**

<script type="text/javascript">
            $(function () { 
                // <input type="button" value="将反恐放置到city的后面",id = "b1">
                $("#b1").click(function () { 
                    //append
                    $("#city").append($("#fk"));
                    //appendTo
                    $("#fk").appendTo($("#city"));
                })
                //     <input type="button" value="将反恐放置到city的前面",id = "b2">
                $("#b2").click(function () { 
                    //prepend
                    $("#city").prepend($("#fk"));
                    //prependTo
                    $("#fk").prependTo($("#city"));
                })
                //     <input type="button" value="将反恐插入到天津的后面",id = "b3">
                $("#b3").click(function () { 
                    //after
                    $("#tj").after($("#fk"));
                    //insertAfter
                    $("#fk").insertAfter($("#tj"));
                })
                //     <input type="button" value="将反恐插入到天津的前面",id = "b4">
                $("#b4").click(function () { 
                    //before
                    $("#tj").before($("#fk"));
                    //insertBefore
                    $("#fk").insertBefore($("#tj"));
                })
            })
        </script>

9.remove（）：移除元素  
对象 .remove（）：将对象删除掉  
10.empty（）：清空元素的所有后代元素  
对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点  
**案例**

<script type="text/javascript">
            //入口函数
            $(function () { 
            // <input type="button" value="删除<li id ='bj' name = 'beijing'>北京</li>"id = "b1"/>
                $("#b1").click(function () { 
                    $("#bj").remove();
                });
            //         <input type="button" value="删除city所有的li节点 清空元素中的所有后代节点（不包含属性节点 ）"id = "b2"/>
                $("#b2").click(function () { 
                    $("#city").emoty();
                });
            })
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQueryDOM操作调用

*1.什么是 JQuery？** \- js的脚本库 **2.JQuery的作用有哪些？** \- 可以简便的实现jsDOM遍历，事件处理，动画，ajax等操...

逃离我推掉我的手/ 2024年04月18日 11:06/ 0 赞/ 64 阅读

相关 mysql 113_Centos 下 can't connect mysql server 113

查看了下mysql的my.cnf配置文件，bind\_address 和 skip\_networking 都注销了，root用户的host也设置为%了，但是就是一直无法远程连

╰+哭是因爲堅強的太久メ/ 2022年10月25日 00:50/ 0 赞/ 8 阅读

相关题目113 字符串替换

![20160729125033854][] 已AC代码： include<cstdio> include<cstring> int main()

左手的ㄟ右手/ 2022年09月24日 11:14/ 0 赞/ 181 阅读

相关 NYOJ 113 字符串替换

字符串替换时间限制： 3000 ms | 内存限制： 65535 KB 难度： 2 描述编写一个程序实现将字符串中的所有"you"替换成"we" 输入输入

雨点打透心脏的1/2处/ 2022年09月19日 05:26/ 0 赞/ 151 阅读

相关 leetcode 112. Path Sum, 113. Path Sum II | 112,113. 路径总和 I, II（Java）

题目 [https://leetcode.com/problems/path-sum/][https_leetcode.com_problems_path-sum]

超、凢脫俗/ 2022年09月03日 01:22/ 0 赞/ 185 阅读

相关 Java Web的数据库操作

转自：[http://blog.csdn.net/zhai56565/article/details/9794225][http_blog.csdn.net_zhai56565

旧城等待，/ 2022年08月21日 11:39/ 0 赞/ 33 阅读

相关前端学习之JQueryDOM操作第二天

jQuery-DOM操作一、复习jQuery基本使用和选择器重点内容：

深碍√TFBOYSˉ_/ 2022年05月08日 10:12/ 0 赞/ 213 阅读

相关 113. Path Sum II

Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals

冷不防/ 2022年03月26日 09:26/ 0 赞/ 225 阅读

相关 [LeetCode] 113. Path Sum II Java

题目： Given a binary tree and a sum, find all root-to-leaf paths where each path's sum eq

╰+攻爆jí腚メ/ 2021年10月01日 00:48/ 0 赞/ 228 阅读

相关 AtCoder Beginner Contest 113

[A - Discount Fare][] z = x + y / 2 z = x + y / 2 z=x\+y/2 include <bits/stdc++

亦凉/ 2021年09月16日 21:58/ 0 赞/ 268 阅读