【JavaWeb】jQuery (属性操作，DOM增删改以及案例练习)

最新推荐文章于 2022-09-19 19:43:35 发布

黑桃️

最新推荐文章于 2022-09-19 19:43:35 发布

阅读量188

点赞数 1

分类专栏： JavaWeb 文章标签： jquery js dom

本文链接：https://blog.csdn.net/weixin_45260385/article/details/115184527

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery中的属性操作，包括html(), text(), val()以及attr(), removeAttr(), prop()和removeProp()的使用。同时，提供了全选、全不选和反选的jQuery实现，以及DOM元素的增删改操作。此外，还展示了从左往右和从右往左移动元素的jQuery实践。

摘要由CSDN通过智能技术生成

一、jQuery 的属性操作

① 属性操作

属性操作：
html() 它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText 一样。

val() 它可以设置和获取表单项的value 属性值。跟dom 属性value 一样

使用：
html([val|fn])    a.html()取出a的html值    a.html(val)  让a的html值变为val

text([val|fn]) 	  a.text()取出a的text值    a.text(val)  让a的文本值变为val

val([val|fn|arr]) a.val()  取出a的val值（input）   a.val(v)  设置a的value值为v

练习：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            // 不传参数，是获取，传递参数是设置
            alert( $("div").html()); //获取
            $("div").html("<h1>设置div内容</h1>"); //设置,此处<h1>标签会生效

            // 不传参数，是获取，传递参数是设置
            alert( $("div").text() ); //获取
            $("div").text("<h1>设置div内容</h1>"); //设置,此处<h1>标签当作文本,不生效

            // 不传参数，是获取，传递参数是设置
            $("#btn1").click(function () {
                alert($("#username").val()); //获取
                $("#username").val("设置input内容"); //设置
            });

        });

    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>

    <input type="text" name="username" id="username"/>

    <button id="btn1">操作输入框</button>
</body>
</html>

在这里插入图片描述

② 属性

属性：
attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled 等等。attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

removeAttr(name) 移除属性值

prop() 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled 等等

removeProp(name) 移除属性值


使用：
1、a.attr('name')取出a的name值   2、a.attr("name","username")把a的name值设置为username

a.removeAttr('class')    移除a的class属性

1、a.prop('id')  取出a的id值   2、a.prop('id',"bj")  设置a的id值为bj

a.removeProp('class') 移除a的class属性

练习：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //attr
            // alert( $(":checkbox:first").attr("value")); // 获取
            // $(":checkbox:first").attr("name","abc"); // 设置属性name为abc
            // $(":checkbox:first").attr("abc","ggg"); //自定义属性：  abc=ggg

            // removeAttr
            // $(":checkbox:first").removeAttr("name"); // 移除属性name

            // prop
            // alert( $(":checkbox:first").prop("checked")); //获取
            // $(":checkbox:first").prop("checked",false); //设置属性checked为false

            // removeProp
            // $(":checkbox:first").removeProp("value");// 官方觉得返回undefined是一个错误
        });
    </script>
</head>
<body>
<body>
    <br/>
    多选：
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <div>1234</div>
    <div>1234</div>
</body>
</body>
</html>

在这里插入图片描述

二、jQuery 练习 (全选，全不选，反选)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1 为全选绑定单机事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            });

            // 2 给全不选绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            });

            // 3 反选单击事件
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                });

                // 判断是否满选(满选需要选中全选按钮)
                // 获取name="items"多选框的总数量
                var countAll = $(":checkbox[name='items']").length;
                // 获取name="items"且被选中的多选框的数量
                var countChecked = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",countAll == countChecked);
            });


            // 4 【提交】按钮单击事件
            $("#sendBtn").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert( this.value );
                });
            });

            // 5  给【全选/全不选】绑定单击事件
            $("#checkedAllBox").click(function () {
                // 把name='items'的checked状态设置为和【全选/全不选】状态相同
                // 即checkedAllBox选中,name='item'的所有多选框就选中,反之,都不选中
                $(":checkbox[name='items']").prop("checked",this.checked);
            });

            // 6  给全部球类绑定单击事件(目前手动把所有球类都选上,【全选/全不选】是无反应的)
            $(":checkbox[name='items']").click(function () {
                var countAll = $(":checkbox[name='items']").length;
                var countChecked = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",countAll == countChecked);
            });
        });
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反选" />
    <input type="button" id="sendBtn" value="提交" />
</form>
</body>
</html>

在这里插入图片描述

三、DOM 的增删改

内部插入：
appendTo() a.appendTo(b) 把a 插入到b 子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a 插到b 所有子元素前面，成为第一个子元素

外部插入：
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab

替换:
replaceWith() a.replaceWith(b) 用b 替换掉a
replaceAll() a.replaceAll(b) 用a 替换掉所有b

删除：
remove() a.remove(); 删除a 标签
empty() a.empty(); 清空a 标签里的内容

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // 内部插入
            // 将div5插入到div1的内部的最后一个位置
            $("<div id='div5'>这是div5</div>").appendTo("#div1");
            // 将div6插入到div1的内部的第一个位置
            $("<div id='div6'>这是div6</div>").prependTo("#div1");

            // 外部插入
            // 将div7插入到div1的外部的前面
            $("<div id='div7'>这是div7</div>").insertBefore("#div1");
            // 将div8插入到div1的外部的后面
            $("<div id='div8'>这是div8</div>").insertAfter("#div1");

            // 替换
            // 用div9替换掉div2
            $("div[id='div2']").replaceWith("<div id='div9'>这是div9</div>");
            // 用div10替换掉所有的<p>
            $("<div id='div10'>这是div10</div>").replaceAll("div[id='div4'] p");


            // 删除
            // 删除第一个div10中的内容
            $("div[id='div10']:eq(0)").empty();
            // 删除第三个div10
            $("div[id='div10']:eq(2)").remove();
        });

    </script>
</head>
<body>
        <div id="div1">
            <div id="div2">这是div2</div>
            <div id="div3">这是div3</div>
            <div id="div4">这是div4<p>~~~~~</p><p>----</p><p>****</p></div>
        </div>
</body>
</html>

在这里插入图片描述

四、jQuery 练习 (从左往右，从右往左)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			// 选中添加到右边
			$("#toRight").click(function () {
				$("select[name='sel01'] option:selected").each(function () {
					$(this).appendTo("select[name='sel02']");
				});
			});

			// 全部添加到右边
			$("#allToRight").click(function () {
				$("select[name='sel01'] option").each(function () {
					$(this).appendTo("select[name='sel02']");
				});
			});

			// 选中删除到左边
			$("#toLeft").click(function () {
				$("select[name='sel02'] option:selected").each(function () {
					$(this).appendTo("select[name='sel01']");
				});
			});

			// 全部删除到左边
			$("#allToLeft").click(function () {
				$("select[name='sel02'] option").each(function () {
					$(this).appendTo("select[name='sel01']");
				});
			});
		});

	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		<button id="toRight">选中添加到右边</button>
		<button id="allToRight">全部添加到右边</button>
	</div>


	<div id="right">
		<select multiple="multiple" name="sel02">
		</select>
		<button id="toLeft">选中删除到左边</button>
		<button id="allToLeft">全部删除到左边</button>
	</div>

</body>
</html>

在这里插入图片描述

黑桃️

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】jQuery (属性操作，DOM增删改以及案例练习)

目录一、jQuery 的属性操作① 属性操作练习：② 属性练习：二、jQuery 练习 (全选，全不选，反选)三、DOM 的增删改四、jQuery 练习 (从左往右，从右往左)一、jQuery 的属性操作① 属性操作属性操作：html() 它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML 一样。text() 它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText 一样。val() 它可以设置和获取表单项的value 属性值。跟dom 属性v
复制链接

扫一扫