jQuery练习

B1293773843

于 2021-11-29 21:13:32 发布

阅读量286

点赞数 1

文章标签： javaweb

本文链接：https://blog.csdn.net/weixin_58562753/article/details/121616390

版权

$(function(){
		//全选按钮
		$("#checkedAllBtn").click(function (){
			$(":checkbox").prop("checked",true);
		});
		//全不选按钮
		$("#checkedNoBtn").click(function (){
			$(":checkbox").prop("checked",false);
		});
		//反选按钮
		$("#checkedRevBtn").click(function (){
			//查询全部球类的复选框  遍历
			$(":checkbox[name = 'items']").each(function (){
				this.checked = !this.checked;
			});
			//检查是否满选
			//获取全部球类的个数
			var all = $(":checkbox[name = 'items']").length;
			//在获取选中球类的个数
			var checkedbox = $(":checkbox[name = 'items']:checked").length;
			$("#checkedAllBox").prop("checked",all == checkedbox);
		});
		//提交
		$("#sendBtn").click(function (){
			$(":checkbox[name = 'items']:checked").each(function (){
				alert(this.value);
			});
		});

		$("#checkedAllBox").click(function (){
			//在事件的function函数中，有一个this对象，是 当前正在响应的事件的dom对象checkedAllBox。
			$(":checkbox[name = 'items']").prop("checked",this.checked);

			// $(":checkbox[name = 'items']").each(function (){
			// 	this.checked = !this.checked;
			// });
		});

		//给所有球类绑定单击事件
		$(":checkbox[name = 'items']").click(function (){
			//检查是否满选
			//获取全部球类的个数
			var all = $(":checkbox[name = 'items']").length;
			//在获取选中球类的个数
			var checkedbox = $(":checkbox[name = 'items']:checked").length;
			$("#checkedAllBox").prop("checked",all == checkedbox);
		});
	});

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 标签里的内容

表单选项的移动：

$(function (){
			$("button:eq(0)").click(function (){
				//左边选中的option添加到右边select    (左边)删除a
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});

			//左边所有option添加到右边select    (左边)删除所有
			$("button:eq(1)").click(function (){
				//左边选中的option添加到右边select    (左边)删除a
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});

			//选中删除到左边
			$("button:eq(2)").click(function (){
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});

			//全部删除到左边
			$("button:eq(3)").click(function (){
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});

动态添加和删除行记录：

$(function (){
		var deleteFun = function (){
			//function函数中有一个当前正在响应的事件对象。
			var $parent = $(this).parent().parent();
			var text = $parent.find("td:first").text();

			/*
			confirm是确认提示框函数，传什么，提升什么。
			点击确定  返回true
			点击取消   返回false
			 */
			if(confirm("确定要删除"+ text +"吗?")){
				//行对象remove
				$parent.remove();
			}


			//return false:阻止元素的默认行为
			return false;
		};


		//删除
		//页面加载完成，就给a绑定了单击事件。此时只有三个a标签绑定了单机事件。后面添加的a标签没有绑定单击事件。
		$("a").click(deleteFun);




		//获取submit按钮对象
		$("#addEmpButton").click(function (){
			//点击了按钮才执行下列代码。
			//获取信息
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();

			//创建一个标签对象，并添加。
			var $Obj = $("<tr>" +
					"<td>" + name + "</td>" +
					"<td>" + email + "</td>" +
					"<td>" + salary + "</td>" +
					"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
					"</tr>");
			//将标签对象添加到表中。
			$Obj.appendTo($("#employeeTable"));

			//给添加的a标签绑定删除事件。
			$Obj.find("a").click(deleteFun);
		});
	});

不是同一个this。此时执行删除的this不是事件响应的this。

此时是将deleteFun的返回值传给了click。

CSS 样式操作：

addClass() 添加样式。

removeClass() 删除样式。

toggleClass() 有就删除，没有就添加样式。

offset() 获取和设置元素的坐标。

jQuery 动画：

基本动画：

show() 将隐藏的元素显示

hide() 将可见的元素隐藏。

toggle() 可见就隐藏，不可见就显示。

以上动画方法都可以添加参数。

1、第一个参数是动画执行的时长，以毫秒为单位

2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画：

fadeIn() 淡入（慢慢可见）

fadeOut() 淡出（慢慢消失）

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明 fadeToggle() 淡入/淡出切换

$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000);
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000);
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000);
			});	
			
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(500);
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(500);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo("slow",Math.random());
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle("slow","linear");
			});	
		});

$(function() {
		//基本初始状态   5以后不包括最后一个。
		$("li:gt(5):not(:last)").hide();

		//给功能按钮绑定单击事件。
		$("div div a").click(function (){
			//切换   让某些品牌显示或隐藏。
			$("li:gt(5):not(:last)").toggle();
			//1.按钮上的文本。2.角标切换。
			//判断品牌当前的状态
			if($("li:gt(5):not(:last)").is(":hidden")){
				//品牌隐藏的状态：  显示角标向下  文本,显示全部的品牌
				$("div div a span").text("显示全部品牌");
				$("div div").removeClass();
				$("div div").addClass("showmore");
				//去掉高亮
				$("li:contains('明基')").removeClass("promoted");
			}else{
				//品牌扩展的状态：  显示角标向上  文本,隐藏品牌
				$("div div a span").text("显示精简品牌");
				$("div div").removeClass();
				$("div div").addClass("showless");
				//加高亮
				$("li:contains('明基')").addClass("promoted");
			}
			return false;
		});
	});