JQuery的dom操作

poixao

已于 2022-10-21 17:39:32 修改

阅读量1.7k

点赞数

分类专栏： Java Web 文章标签： tomcat

于 2022-03-28 13:13:53 首次发布

本文链接：https://blog.csdn.net/zyy130988/article/details/123758911

版权

Java Web 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

JQuery的dom操作

查找节点，修改属性
创建节点-内部插入法
创建节点-外部插入法
删除节点
复制节点
替换节点
属性操作
样式操作
获取html文本和值
常用遍历节点方法
css-dom操作
多选框应用
页面加载完毕触发方法
作业

创建节点

创建节点：使用jQuery 的工厂函数$(): $(html标签);会根据传入的 html标记字符串创建一个jQuery对象,并返回
动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例如创建一个<p>元素，可以使用$("<p/>")或$("<p></p>")，但不能使用$("<p>"")或$("</P>")
创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建

内部插入法

append(content)：向每个匹配的元素的内部的结尾处追加内容
举例：A.append(B)
● (1) A、B 都是jquery对象
● (2) 表示把B对象插入到A对象内部的结尾处
● (3) 结果：B对象成为A对象的子元素/节点
appendTo(content)：将每个匹配的元素追加到指定的元素中的内部结尾处
举例：A.appendTo(B)
● (1)A,B都是jquery对象
● (2)表示把A对象插入到B对象内部结尾处
● (3)结果：A对象成为B对象的子元素/节点
prepend(content)：向每个匹配的元素的内部的开始处插入内容
举例：A.prepend(B)
● (1)A,B都是jquery对象
● (2)表示把B对象插入到A对象内部的开始处
● (3)结果：B成为A的子元素/节点
prependTo(content)：将每个匹配的元素插入到指定的元素内部的
举例：A.prependTo(B)
● (1)A,B都是jquery对象
● (2)表示把A对象插入到B对象内部的开始处
● (3)结果：A成为B的子元素/节点]

说明:内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)

外部插入法

after(content)：在每个匹配的元素之后插入内容
举例：A.after(B)
● (1)A,B都是jquery对象
● (2)表示B对象插入到A对象后面
● (3)结果：B成为A的兄弟节点
before(content)：在每个匹配的元素之前插入内容
举例：A.before(B)
● (1)A,B都是jquery对象
● (2)表示B对象插入到A对象前面
● (3)结果是B成为A的兄弟节点，并且在A的前面
insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面
举例：A.insertAfter(B)
● (1)A,B都是jquery对象
● (2)表示把A对象插入到B对象的后面
● (3)结果:A成为B的后一个兄弟节点
insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面
举例：
A.insertBefore(B)
● (1)A,B都是jquery对象
● (2)表示把A对象插入到B对象的前面
● (3)结果是A成为B的前一个兄弟

说明:外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

注意:以上方法不但能将新的DOM元素插入到文档中，也能对原有的DOM元素进行移动可以完成很多需求

创建节点举例	解释
`内部插入法`	内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)
A.append(B)	表示把B对象插入到A对象内部的结尾处
A.appendTo(B)	表示把A对象插入到B对象内部结尾处
A.prepend(B)	表示把B对象插入到A对象内部的开始处
A.prependTo(B)	表示把A对象插入到B对象内部的开始处
`外部插入法`	外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
A.after(B)	表示B对象插入到A对象后面
A.before(B)	表示B对象插入到A对象前面
A.insertAfter(B)	表示把A对象插入到B对象的后面
A.insertBefore(B)	表示把A对象插入到B对象的前面

在插入节点时，注意，不能被动插入
比如：要把$cq_li 插入到 $("#sh")后面，但写成：$("#sh").insertBefore($cq_li); 把$("#sh")插入到$cq_li)前面。此时还没有$cq_li节点，如果这样写了，那么$("#sh")会消失
$("#sh").appendTo($cq_li);同理

查找节点，修改属性
查找属性节点：查找到所需要的元素之后,可以调用jQuery对象的 attr()方法来获取它的各种属性值

    <script type="text/javascript">
        //获得属性的值
      var attr = $("img").attr("height");
      //修改img图片的height属性的值
      $("img").attr("height","200px");
    </script>

删除节点

remove():从 DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。当某个节点用remove()方法删除后，该节点所包含的所有后代节点将被同时删除。这个方法的返回值是一个指向已被删除的节点的引用
$("p").remove();：删除所有p
empty():清空节点–清空元素中的所有后代节点(不包含属性节点)
$("p").empty();：所有p清空

复制节点

clone():克隆匹配的DOM元素,返回值为克隆后的副本。但此时复制的新节点不具有任何行为
clone(true):复制元素的同时也复制元素中的的事件
$("p").clone(true).insertAfter($("button"));：复制节点p，并挂在button节点后

替换节点

replaceWith():将所有匹配的元素都替换为指定的HTML或DOM/juqery元素
$("p").replaceWith("<b>Hello world!</b>");：用粗体文本替换每个p节点
replaceAll():颠倒了的replaceWith()方法
$("<div>这是div元素</div>").replaceAll("p");：用div节点替换每个节点
注意:若在替换之前,已经在元素上绑定了事件，替换后原先绑定的事件会与原先的元素一起消失

属性操作

attr():获取属性和设置属性
attr()传递一个参数时，即为某元素的获取指定属性
attr()传递两个参数时，即为某元素设置指定属性的值
removeAttr():删除指定元素的指定属性
prop(“checked”, true)（下拉单选、下拉多选、单选）：将选择的对象的状态设置为选中
prop(“checked”, false)：就将选择的对象的状态设置为未选中

样式操作

获取 class和设置class：class 是元素的一个属性，所以获取 class和设置 class 都可以使用 attr()方法来完成
追加样式：addClass()
$("#first").addClass("one");：为id为first添加名为 .one 的css样式名
移除样式：removeClass()—从匹配的元素中删除全部或指定的class
$("#first").removeClass("one");：给id 为first删除 .one 样式
切换样式：toggleClass()—控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它
$("#first").toggleClass("one");：给id 为first切换 .one 样式
判断是否含有某个样式：hasClass()—判断元素中是否含有某个class,如果有，则返回 true;否则返回false
$("#first").hasClass("one")：判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

获取html文本和值

设置或返回所选元素的内容（包括HTML标记) : html()
读取和设置某个元素中的文本内容: text()。该方法既可以用于HTML也可以用于XML 文档
读取和设置某个元素中的值: val() —该方法类似JavaScript 中的 value属性。对于文本框，下拉列表框，单选框该方法可返回元素的值。
举例一：$("#one").val("2号");：id为one的标签如果为(下拉单选、下拉多选、单选、复选)，那么该命令的意思为：将id为one的标签的默认选项设置为 val 为 '2号’的选项
举例二：$("#many").val(["5号","2号"]);：id为one的标签如果为(下拉多选、复选)，那么该命令的意思为：将id为one的标签的默认选项设置为 val 为 ‘2号’ 和 ‘5号’ 的选项

常用遍历节点方法

取得匹配元素的所有子元素组成的集合: children().该方法只考虑子元素而不考虑任何后代元素
$("div[class='one']").children();：匹配class为one的div标签下所有子元素
取得匹配元素后面的同辈元素的集合:next()/nextAll();
取得匹配元素前面的同辈元素的集合:prev()/ prevAll();
取得匹配元素前后所有的同辈元素: siblings()
获取指定的第几个元素: nextAll().eq(index)
对获取到的同辈元素进行过滤nextAll().filter(“标签”)
$("div.one").siblings().filter("div");：匹配class为one的div标签的前后所有div标签

css-dom操作

获取和设置元素的样式属性: css()
获取和设置元素透明度: opacity属性
获取和设置元素高度,宽度: height(), width().在设置值时,若只传递数字,则默认单位是px.如需要使用其他单位则需传递一个字符串，例如$(“p:first”).height(“2em”);
获取元素在当前视窗中的相对位移: offset().其返回对象包含了两个属性: top, left.该方法只对可见元素有效。

查找节点，修改属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点的属性</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //给button绑定一个click事件
            $("button").click(function () {
                //获得属性的值
                var attr = $("img").attr("height");
                //修改img图片的height属性的值
                $("img").attr("height","200px");
            })
        })
    </script>
</head>
<body>
<img src="../image/2.png" height="100"/>
<br/>
<button>设置图像的 height 属性</button>
</body>
</html>

创建节点-内部插入法

在这里插入图片描述

创建节点-外部插入法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                //添加重庆li到 上海下(使用dom的传统方法)
                //创建重庆节点
                var cq_li = document.createElement("li");
                //设置重庆节点的值
                cq_li.setAttribute("id", "cq");
                cq_li.setAttribute("name", "chongqing");
                cq_li.innerText = "重庆";
                //添加到指定元素后面
                document.getElementById("sh").append(cq_li);
            })

            //添加重庆li到 上海下
            $("#b2").click(function () {
                //创建重庆li
                var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
                //内部插入法
                // $("#sh").append($cq_li);

                //外部插入法
                // $("#sh").after($cq_li);
                $cq_li.insertAfter("#sh");
            })

            //添加成都li到 北京前
            $("#b3").click(function () {
                var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                //内部插入法
                // $("#bj").prepend($cd);
                // $cd.prependTo($("#bj"));

                //外部插入法
                // $("#bj").before($cd);
                // $cd.insertBefore($("#bj"));
            })

            //添加成都li到 北京和上海之间
            $("#b4").click(function () {
                var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                // $("#bj").after($cd);
                $("#sh").before($cd);
            });

            //添加成都li到 吉林前面
            $("#b5").click(function () {
                var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                // $("#jl").before($cd);
                $cd.insertBefore($("#jl"));
            });
        })
    </script>
</head>
<body>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="jl" name="jilin">吉林</li>
    <li id="my" name="mianyang">绵阳</li>
</ul>

<input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都li到 吉林前面"/><br/>

</body>
</html>

以上方法不但能将新的DOM元素插入到文档中，也能对原有的DOM元素进行移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动节点</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //使用after插入法 把反恐li移动天津后
            $("#b1").click(function () {
                $("#tj").after($("#fk"));
            })

            //使用append插入法 把反恐li移动天津后
            $("#b2").click(function () {
                $("#tj").append($("#fk"));
            })
        })


    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>
<input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/>
<input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/>
</body>
</html>

删除节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //删除所有p
            $("#b1").click(function () {
                $("p").remove();
            })
            //所有p清空
            $("#b2").click(function () {
                $("p").empty();
            })
            //删除上海这个li
            $("#b3").click(function () {
                $("#sh").remove();
            })
        })
    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>

您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>

<p>Hello</p> how are <p>you?</p>


<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>

<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
</html>

复制节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //点击p，弹出文本信息
            $("p").click(function () {
                alert($(this).text());
            })
            //克隆p
            $("p").clone(true).insertAfter($("button"));
        })
    </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>

替换节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 将 p 替换成 button
                $("p").replaceWith("<input type='button' id='my' value='我的按钮~'>");
            //2.将p 替换成 超链接
                $("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a>");
            //3. 使用对象来进行替换
                var $user = $("<input type='text' name='user' value='我是输入框'>");
                $("p").replaceWith($user);
        })
    </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
</body>
</html>

属性操作

在这里插入图片描述

样式操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找节点</title>
    <style type="text/css">
        div {
            width: 140px;
            height: 140px;
            margin: 20px;
            float: left;
            border: #000 1px solid;
        }

        .one {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                //获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式
                $("#first").attr("class", "one");
            })
            //追加样式: addClass() (给id 为first添加 .one 样式
            $("#b2").click(function () {
                $("#first").addClass("one");
            })
            //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式
            $("#b3").click(function () {
                $("#first").removeClass("one");
            })
            //切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
            $("#b4").click(function () {
                $("#first").toggleClass("one");
            })
            //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
            $("#b5").click(function () {
                alert($("#first").hasClass("one"));
            })
        })
    </script>
</head>
<body>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)" id="b1"/><br/><br/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2"/><br/><br/>
<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) " id="b3"/><br/><br/>
<input type="button"
       value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它"
       id="b4"/><br/><br/>
<input type="button"
       value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false"
       id="b5"/><br/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>

获取html文本和值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val()课堂练习</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.给b1绑定一个获取焦点事件
            //2.当用户把光标定位到输入框b1，该事件就会被触发
            $("#b1").focus(function () {
                //获取-判断
                //获取到当前值
                var currentVal = $(this).val();
                //如果当前值就是默认值，让用户输入自己的值
                if (currentVal == this.defaultValue) {
                    $(this).val("");
                }
            })
            //1．给b1绑定一个失去焦点事件blur
            //2．当用户的光标离开这个输入框，就会触发
            $("#b1").blur(function () {
                var currentVal = $(this).val();
                //判断如果当前值为""，说明用户没有输入内容
                // 就恢复提示默认信息
                if (currentVal == "") {
                    $(this).val(this.defaultValue);
                }
            })
        })
    </script>
</head>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
</body>
</html>

常用遍历节点方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用遍历节点方法-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 60px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //查找所有子元素 (class 为 one 的div的)
            $("#b1").click(function () {
                var children = $("div[class='one']").children();
                children.css("background", "#0000FF");
            })
            //获取后面的同辈div元素 (class 为 one 的div的)
            $("#b2").click(function () {
                //1.$("div.one")选择到 class = one 的div
                //2. nextAll()获取到后面所有的同辈元素
                //3. filter( "div")，获取到后面所有的同辈元素，进行过滤，只得到div
                var nextAll = $("div.one").nextAll().filter("div");
                $(nextAll).css("background", "#0000FF");

                //如果我们希望得到后面同辈元素的第几个，可以eq(从0开始计算)
                //获取到后面同辈div元素的第2个
                var next = $("div.one").nextAll().filter("div").eq(2);
                $(next).css("background", "red");

                //如果我们希望得到的是紧邻的后同辈元素
                var next0 = $("div.one").next();
                $(next0).css("background","green")
            })
            //获取前面的div同辈元素 (class 为 one 的div的)
            $("#b3").click(function () {
                var prevAll = $("div[class='one']").prevAll().filter("div");
                $(prevAll).css("background", "#0000FF");
            })
            //获取所有的同辈元素 (class 为 one 的div的)
            $("#b4").click(function () {
                var siblings = $("div.one").siblings().filter("div");
                $(siblings).css("background", "#0000FF");
            })
        })
    </script>
</head>
<body>
<input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
<input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
<input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
<input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
<hr/>
<div>ccccccc</div>
<p class="one">ccccccc</p>
<div class="one">
    <div id="one">XXXXXXXXX one</div>
    <div id="two">XXXXXXXXX two</div>
    <div id="three">XXXXXXXXX three</div>
    <div id="four">XXXXXXXXX four</div>
</div>
<div>tttttttttt</div>
<div>aaaaaaa</div>
<div>bbbbbb</div>
<p>hello, pp</p>
</body>
</html>

css-dom操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-dom操作</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                var width = $("img").width();
                var height = $("img").height();
                alert("图片的宽度: "+ width);
                alert("图片的高度: "+ height);
                var offset = $("img").offset();
                alert("图片的相对宽度: " + offset.left);
                alert("图片的相对高度: " + offset.top);
            })
        })
    </script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/1.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>

多选框应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框应用</title>
    <style type="text/css">

        BODY {
            font-size: 12px;
            margin: 0px 0px 0px 0px;
            overflow-x: auto;
            overflow-y: auto;
            background-color: #B8D3F4;
        }

        .default_input {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .default_input2 {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .nowrite_input {
            border: 1px solid #849EB5;
            height: 18px;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .default_list {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .default_textarea {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .nowrite_textarea {
            border: 1px solid #849EB5;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .wordtd5 {
            font-size: 12px;
            text-align: center;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd {
            font-size: 12px;
            text-align: left;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd_1 {
            font-size: 12px;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #516CD6;
            color: #fff;
        }

        .wordtd_2 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #64BDF9;
        }

        .wordtd_3 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #F1DD34;
        }

        .inputtd {
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .inputtd2 {
            text-align: center;
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .tablebg {
            font-size: 12px;
        }

        .tb {
            border-collapse: collapse;
            border: 1px outset #999999;
            background-color: #FFFFFF;
        }

        .td2 {
            line-height: 22px;
            text-align: center;
            background-color: #F6F6F6;
        }

        .td3 {
            background-color: #B8D3F4;
            text-align: center;
            line-height: 20px;
            width: 100px;
        }

        .td4 {
            background-color: #F6F6F6;
            line-height: 20px;
        }

        .td5 {
            border: #000000 solid;
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 1px;
        }

        .tb td {
            font-size: 12px;
            border: 2px groove #ffffff;
        }


        .noborder {
            border: none;
        }

        .button {
            border: 1px ridge #ffffff;
            line-height: 18px;
            height: 20px;
            width: 45px;
            padding-top: 0px;
            background: #CBDAF7;
            color: #000000;
            font-size: 9pt;
        }

        .textarea {
            font-family: Arial, Helvetica, sans-serif, "??";
            font-size: 9pt;
            color: #000000;
            border-bottom-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: solid;
            border-left-style: none;
            border-bottom-color: #000000;
            background-color: transparent;
            text-align: left
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //点击->把左边选中的移动到右边
            $("#add").click(function () {
                var $select = $("#first option:selected");
                $("#second").append($select);
            })
            //点击->把右边选中的移动到左边
            $("#remove").click(function () {
                var $select2 = $("#second option:selected");
                $("#first").append($select2);
            })

            //2、点击==>把左边全部移动到右边
            //全部移动到右边
            $("#add_all").click(function () {
                var $option = $("#first > option");
                $("#second").append($option);
            })
            //全部移动到左边
            $("#remove_all").click(function () {
                var children = $("#second").children();
                $("#first").append($(children));
            })
            
            //双击移动到右边
            $("#first").dblclick(function () {
                $("#first > option:selected").appendTo($("#second"));
            })
            //双击移动到左边
            $("#second").dblclick(function () {
                $("#second > option:selected").appendTo($("#first"));
            })
        })
    </script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:50px 0px 0px 50px; width:350px; height:260px; background-color:#E6E6E6;">
    <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
           style="margin:15px 0px 0px 15px;">
        <tr>
            <td width="126">
                <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
                <select name="first" size="10" multiple="multiple" class="td3" id="first">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                    <option value="选项6">选项6</option>
                    <option value="选项7">选项7</option>
                    <option value="选项8">选项8</option>
                </select>
            </td>
            <td width="69" valign="middle">
                <input name="add" id="add" type="button" class="button" value="-->"/>
                <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
                <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
                <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
            </td>
            <td width="127" align="left">
                <select name="second" size="10" multiple="multiple" class="td3" id="second">
                    <option value="选项9">选项9</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

页面加载完毕触发方法

在这里插入图片描述

    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //关于页面加载完毕后，触发的方法的几种写法
        // 1. js 的原生方式
        window.onload = function () {
            alert("页面1加载完毕...")
        }

        //2.方式 jquery方式
        $(document).ready(function () {
            alert("页面2加载完毕...")
        })

        //3.上面的方式可以简化
        $(function () {
            alert("页面3加载完毕...")
        })
    </script>

作业

在这里插入图片描述

poixao

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JQuery的dom操作

jquery的dom操作查找节点，修改属性创建节点-内部插入法创建节点-外部插入法删除节点复制节点替换节点属性操作样式操作获取html文本和值常用遍历节点方法css-dom操作多选框应用页面加载完毕触发方法作业创建节点创建节点：使用jQuery 的工厂函数$(): $(html标签);会根据传入的 html标记字符串创建一个jQuery对象,并返回动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例
复制链接

扫一扫