JQuery的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="<--"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<=="/>
</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>
作业