JQuery总结，元素综合操作外加案例

Q53100

于 2022-10-19 16:47:47 发布

阅读量173

点赞数

文章标签： jquery 前端 javascript html

本文链接：https://blog.csdn.net/q53100/article/details/127410973

版权

操作元素

jquery判断checkbox是否被选中

if($("#id").is(":checked"))

jquery获取选中的radio

var gender = $("input[name='gender']:checked").val();

jquery选中radio

$("input:radio[name='gender'][value='M']").attr("checked",'checked');

jquery对button进行绑定和解绑

$("#id").bind("click",function(){ // 要绑定的方法});

//解除绑定

$("#id").unbind("click");

jquery选取指定div中的img 并修改其属性

$("#replay_first img").each(function(){
   $(this).css("width","100%");
   $(this).css("height","20%");
});

当点击新的时候，首先清空元素

$("#list").empty();

当前点击的删除按钮的父辈元素且名字是tr的进行移除

$(this).parents("tr").remove();

获取当前复选框变成的状态

$(this).prop("checked");

筛选被勾选的复选框，删除他们父元素的tr行

$(".check:checked").parents("tr").remove();

案例：物品的刷新，删除，全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面元素综合操作</title>
		<style type="text/css">
			*{
			border: none;
			}
		</style>
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//实际开发这些数据不是写死的，通过后端程序读取数据库的内容，然后使用JQ动态生成的!
				//模拟一些数据，假设这些数据是通过后端程序读取的数据库内容
				var datda=[
				{"id":1,"name":"方便面","price":3.5,"brand":"白象"},
					{"id":2,"name":"火腿肠","price":1.5,"brand":"双汇"},
					{"id":3,"name":"牛奶","price":4.5,"brand":"蒙牛"},
					{"id":4,"name":"瓜子","price":6.5,"brand":"金鸽"},
					{"id":5,"name":"辣条","price":5.5,"brand":"卫龙"},
					{"id":6,"name":"面包","price":3.5,"brand":"盼盼"},
				]
				//刷新生成数据
				$("#refresh").click(function(){
					//当点击新的时候，首先清空元素
					$("#list").empty();
					//1.定义标签变量
					var dom="";
					//2.读取data中的数据，把数据生成每一行的标签元素追加到dom变量中
					for(var i=0;i<datda.length;i++){
						var goods=datda[i];
						dom+="<tr>"+
								"<td><input type='checkbox' class='check'/></td>";
						dom+="<td>"+goods.id+"</td>"+
								"<td>"+goods.name+"</td>"+
								"<td>"+goods.price+"</td>"+
								"<td>"+goods.brand+"</td>";
						dom+="<td>"+
								"<a href='#'>购买</a>&nbsp;"+
								"<button class='del'>删除</button>"+
								"</td>"+
							"</tr>";
					}
					$("#list").append(dom);
				})
				//click不能对动态生成的元素执事件绑定，必须使用on进行事件动态绑定
				//语法：  元素.on(事件名,元素里面那个标签绑定,function(){})
				$("#list").on('click','.del',function(){
					//当前点击的删除按钮的父辈元素且名字是tr的进行移除
					$(this).parents("tr").remove();
				});
				//点击全选，勾选列表中的所有的复选框
				$("#checkAll").click(function(){
					//获取当前复选框变成的状态
					var flag=$(this).prop("checked");
					if(flag){
						//全选被勾选了，把id为list里面所有的class为check的复选框设置勾选
						$("#list .check").prop("checked",true);
					}else{
						//全选被取消了，把id为list里面所有的class为check的复选框设置勾选
						$("#list .check").prop("checked",false);
					}
				})
				//批量删除
				$("#batchDel").click(function(){
					//筛选class叫做check的复选框，而且状态被勾选，删除他们父元素的tr行
					$(".check:checked").parents("tr").remove();
				})
			})
		</script>
	</head>
	<body>
		<button id="refresh">刷新</button>
		<hr />
		<table border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
				<th>勾选</th>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>名牌</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="list">
				
			</tbody>
		</table>
		<div id="">
			<input type="checkbox" name="" class="check" id="checkAll"/>
			<span >全选&nbsp;&nbsp;&nbsp;</span>
			<button id="batchDel">删除</button>
		</div>
	</body>
</html>

Q53100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery总结，元素综合操作外加案例

jquery选取指定div中的img 并修改其属性。当前点击的删除按钮的父辈元素且名字是tr的进行移除。jquery判断checkbox是否被选中。筛选被勾选的复选框，删除他们父元素的tr行。jquery对button进行绑定和解绑。jquery获取选中的radio。当点击新的时候，首先清空元素。案例：物品的刷新，删除，全选。jquery选中radio。获取当前复选框变成的状态。
复制链接

扫一扫