10月jquery总结

gccv_

已于 2022-10-24 11:34:45 修改

阅读量217

点赞数

文章标签： jquery

于 2022-10-24 11:32:54 首次发布

本文链接：https://blog.csdn.net/gccv_/article/details/127489110

版权

操作元素

jquery判断checkbox是否被选中

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

jquery获取选中的radio

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

query选中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>
		<script src="../jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				var data = [
					{"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":"盼盼"},
				];
				//1.点击刷新，把上面的数据动态的显示到页面的标签元素中
				$("#refresh").click(function() {
					//先把list里面页面元素清空
					$("#list").empty();
					//定义变量进行字符串的拼接
					var dom = "";
					//遍历数组
					for(var i = 0; i < data.length; i++) {
						//获取data数组的一条数据
						var goods = data[i];
						//把该条数据的值取出来拼装成一个tr的信息
						dom += "<tr>" +
									"<td><input type='checkbox' class='check' /></td>" +
									"<td>" + goods.id + "</td>" +
									"<td>" + goods.name + "</td>" +
									"<td>" + goods.price + "</td>" +
									"<td>" + goods.brand + "</td>"+
									"<td>"+
										"<a href='#'>修改<a>&nbsp;&nbsp;"+
										"<button>删除</button>"+
									"</td>"+
							"</tr>"
					}
					//向list中加入元素
					$("#list").append(dom);

				});
				//2.click事件只能绑定到文档一开始存在的元素标签上，动态生成的元素不能进行事件绑定
				//动态生成的页面元素只能通过on()进行事件绑定
				//语法：元素.on('事件名称','给里面哪个元素',功能函数)
				$("#list").on('click','tr td button',function(){
					//当前点击的button执行删除它的父元素且名字是tr
					$(this).parents("tr").remove();
				});
				//3.点击全选，选中所有的数据行
				$("#checkAll").click(function(){
					//1.点击全选获取的选中状态
				var flag=$(this).prop("checked");
				//2.让list里面所有class为check的复选框设置相同的状态
					$("#list .check").prop("checked",flag);
		});
		//4.删除选中的行
		$("#batchDel").click(function(){
			//找到id为list,里面所有class为check的元素，且他们被选中，执行删除除父元素tr
			$("#list .check:checked").parents("tr").remove();
		});
			});
		</script>
	</head>

	<body>
		<button id="refresh">刷新</button>
		<hr/>
		<table>
			<thead>
				<tr>
					<th>勾选</th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>品牌</th>
					<th>操作</th>
				</tr>
			</thead>

			<tbody id="list">
			
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check" />
			<span>全选&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<button id="batchDel">删除</button>
		</div>
	</body>

</html>