跟随小破站学习java web第四天

过滤选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(function(){
				//1.选择第一个 div 元素
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});
				//2.选择class不为 one 的所有 div 元素
				$("#btn2").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});
				//3.选择索引值为等于 3 的 div 元素
				$("#btn3").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});
				//4.选择当前正在执行动画的所有元素
				$("#btn4").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//5.选择含有子元素的div元素
				$("#btn5").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
				//6.选择所有不可见的 div 元素
				$("#btn6").click(function(){
					$("div:hidden").show("normal").css("background", "#bbffaa");
				});
				//7.选取 属性title值等于'test'的div元素
				$("#btn7").click(function() {
					$("div[title='test']").css("background", "#bbffaa");
				});
				//8.选取每个class为one的div父元素下的第一个子元素
				$("#btn8").click(function(){
					$("div.one > :first-child").css("background","#bbffaa");
				});
			});
		</script>

表单过滤选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					$("input:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$("input:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数
				$("#btn3").click(function(){
					var $cc = $(":checkbox:checked");
					alert($cc.length);
				});
				//4.获取多选框选中的内容
				$("#btn4").click(function(){
					var $cc = $(":checkbox:checked");
					//使用$.each()迭代数组
					$cc.each(function(){
						alert($(this).val());
						//alert(this.value);
					});
					
					//for(var i=0;i<$cc.length;i++){
						//alert($cc[i].value);
					//}
				});
				//5.获取下拉框选中的内容
				$("#btn5").click(function(){
					var $ss = $("select option:selected");
					$ss.each(function(){
						//DOM对象:this jQuery对象:$(this)
						alert(this.value);
					});
				});
			})	
		</script>

注意:在调用each函数遍历数组时,记得看清调用的对象,this是指DOM对象,而$(this)指的是jQuery对象!

选择器练习1

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
			①全选按钮：点击后所有爱好都选中
			②全不选按钮：点击后所有爱好都不选中
			③反选按钮：点击后所有爱好选中状态反转
			④提交按钮：点击后依次弹出选中内容
			
			*checked属性值
				* DOM取值:false|true
				* jQuery取值:undefined|checked
		*/
		$(function(){
			//①全选按钮：点击后所有爱好都选中
			$("#checkedAllBtn").click(function(){
				$(":checkbox").attr("checked",true);
			});
			
			//②全不选按钮：点击后所有爱好都不选中
			$("#checkedNoBtn").click(function(){
				$(":checkbox").attr("checked",false);
			});
			
			//③反选按钮：点击后所有爱好选中状态反转
			$("#checkedRevBtn").click(function(){
				$("checkbox:checked").attr("checked",false);
				var $cb = $(":checkbox");
				$cb.each(function(){
					//取反
					this.checked = !this.checked;
					var cd = this.checked;
					
//					var cd = $(this).attr("checked");
//					alert(cd);
					
// 					if(cd == true){
// 						this.checked = false;
// 					}else{
// 						this.checked = true;
// 					}
				});
			});
		});
		
	</script>

注意:当给选择按钮进行反转时,偏向选择DOM对象,简单方便!

选择器练习2

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
			①全选框：点击后让所有爱好的选中状态和自己一致
			②爱好框：点满后将全选框选中，否则取消选中
		*/
		$(function(){
			//①全选框：点击后让所有爱好的选中状态和自己一致
			$("#checkedAllBox").click(function(){
				var ck = this.checked;
				$("input[name='items']").attr("checked",ck);
			});
			
			//②爱好框：点满后将全选框选中，否则取消选中
			$("input[name='items']").click(function(){
				//判断爱好框是否全部选中(爱好框个数 == 选中的爱好框个数)
				var alen = $("input[name='items']").length;
				//获取选中的爱好框
				var clen = $("input[name='items']:checked").length;
				if(alen == clen){
					$("#checkedAllBox").attr("checked",true);
				}else{
					$("#checkedAllBox").attr("checked",false);
				}
			});
		});
		
	</script>

选择器练习3

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//使单选下拉框的'选择3号'被选中
				$(":button:first").click(function(){
				$("#single").val(["sel03"]);
				});
				
				//使多选下拉框选中的'选择2号'和'选择4号'被选中
				$(":button:eq(1)").click(function(){
					$("#multiple").val(["mul02","mul04"]);
					});
				
				//使多选框的'多选2'和'多选4'被选中
				$(":button:eq(2)").click(function(){
					$(":checkbox").val(["check2","check4"]);
				});
				
				//使单选框的'单选2'被选中
				$(":button:eq(3)").click(function(){
					$(":radio").val(["radio2"]);
				});
				
				//打印已经被选中的值
				$(":button:last").click(function(){
					$("select option:selected,:checked").each(function(){
						alert(this.value);
					});
				});
			});
		
		</script>