javaWeb核心技术第五篇之jQuery

- 概述
  - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多)
- jQuery入门
  - jQuery和html整合
    - 下载
      - 下载地址:www.jquery.com
    - 使用script的src属性即可
      "eg:<script src="../js/jquery-1.11.0.min.js"></script>"
  - 语法
    - $("选择器")     或     jQuery("选择器")
      "var  元素对象  = $("选择器");
      $("#id值");     val();"
  - javaScript和jquery区别
    - 注意事项:
      "使用jquery的方式获取的对象称为jquery对象,
      使用js的方式获取的对象称为dom(js)对象,
      两者的方法和属性不能混用,
      使用jquery的方法和属性时,必须保证对象是jquery对象."
    - js对象和jquery对象之间的转换
      - js对象  →  jquery对象
        - $(js对象);
      - jquery对象  →   js对象
        - 方式1:jQuery对象[index]
        - 方式2:jQuery对象.get(index)
- 事件(event)
  "在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可"
  - 页面加载成功事件
    - 格式1:$(document).ready(function(){});
    - 格式2:$(function(){});
    - 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效
  - 重点事件
    - click
    - change
    - submit
    - focus
    - blur
  - jquery事件和事件源的绑定
    "要保证页面加载成功后,才能使用jq的事件"
    - jquery对象.事件名称(function(){});
- jQuery的选择器
  - 基本选择器:★
    -  * 所有
    - # id
    - .class
    - 标签选择器(标签名)
    - 多个选择器用","号隔开   a,b
  - 层次选择器:★
    - a b:选择a的b的后代
    - a>b:选择a的b孩子
    - a+b:选择a的b大弟弟
    - a~b:选择a的所有的b弟弟 
  - 基本过滤:
    - :first 第一个
    - :last  最后一个
    - :even	偶数
    - :odd	奇数
    - :eq(index) 索引=
    - :gt(index) 索引>
    - :lt(index) 索引<
    - :not(选择器)
  - 内容过滤:
    - :has(选择器):包含
  - 可见性过滤:
    - :hidden:不可见 主要针对的是 文本隐藏域和指定display=none
    - :visible:可见
  - 属性选择器★
    - [属性名]:有指定属性的元素
    - [属性名='值']:有指定属性和值的元素
  - 表单对象属性★
    - :enabled 	        可用的
    - :disabled          不可用的
    - :checked 	选中的(针对的是单选框和复选框)
    - :selected 	选中的(下拉选)
  - 表单:
    - :input:选择所有的表单子标签
      "input:选中所有input标签
      select   textarea   button"
      - input select textarea button
- jQuery的DOM操作
  - jQuery效果:
    - 基本:★ 高和宽都变化
      - hide([毫秒值]):隐藏
      - show([毫秒值]):显示
      - toggle([毫秒值]):切换
    - 滑入滑出:高变化
      - slideUp([毫秒值]):滑出
      - slideDown([毫秒值]):滑入
      - slideToggle([毫秒值]);切换
    - 淡入淡出:
      - fadeIn([毫秒值]);
      - fadeOut([毫秒值]);
      - fadeToggle();切换
    - 了解:
      - fadeToggle(毫秒值,function(){});
      - 以上效果都可以添加一个回调函数
  - css样式
    - css
      - 设置css样式
        - 格式1:设置单个属性
          "jq对象.css("属性","值");"
        - 格式2:设置多个属性
          "jq对象.css({
          	"属性":"值",
          	"属性1":"值1"
          });"
      - 获取css样式的值
        "	jq对象.css("属性名称");"
    - 获取元素的宽和高
      - jq对象.width()
      - jq对象.height()
    - 扩展:offset()
      "获取元素在当前页面的位置"
      - top
        "元素距离顶部的距离"
      - left
        "元素距离左边的距离"
  - 属性
    - attr():设置或者获取元素的属性
      - 设置属性(给标签添加属性)
        - 格式1:设置单个属性
          "jq对象.attr("属性名","值");"
        - 格式2:设置多个属性
          "jq对象.attr({
          	"属性":"值",
          	"属性1":"值1"
          });"
      - 获取属性的值
        "	jq对象.attr("属性名");"
      - 移出属性(删除属性)
        "	jq对象.removeAttr("属性名");"
    - prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
    - class操作 了解
      - 元素.addClass("属性值");添加
      - 元素.removeClass():移除指定的样式
      - 元素.toggleClass("属性值"):切换

*/

/*

回顾:
	jQuery:js类库(js框架)对js进行封装,本质上就是外部的js文件.
	jQuery和html整合:
		1.下载
		2.通过script标签的src属性引入即可(1.11)
	jQuery语法:
		$("选择器"); 	或  jQuery("选择器");
	jq对象和js对象转换
		jq ===>  js(dom)
			jq对象[index]
			jq对象.get(index);
		js ===>  jq对象
			$(js对象);
	事件:
		click:
		submit:
		change:
		focus:
		blur:
		页面加载成功:
			$(function(){});
			$(document).ready(function(){});
	选择器:
		基本选择器:
			*
			#id
			.class
			标签名称
			多个选择器之间使用逗号
		层次选择器:
			a b
			a>b
			a+b
			a~b
		基本过滤选择器:
			:first
			:last
			:even
			:odd
			:eq(index)
			:gt(index)
			:lt(index);
			:not(选择器)
		内容过滤选择器:
			has(选择器);
		可见性过滤选择器:
			:hidden		type="hidden"   display = "none"
			:visible
		属性选择器:
			[属性]
			[属性='值']
		表单对象选择器:
			:enabled
			:disabled
			:selected	下拉选
			:checked	单选框个复选框
		表单选择器:
			:input
				input select textarea button
	DOM:
		效果:
			基本效果:
				hide()
				show()
				toggle()
			滑入滑出:
				slideUp();
				slideDown();
				slideToggle();
			淡入淡出:
				fadeIn();
				fadeOut();
				fadeToggle([毫秒值],回调函数);
		操作css样式:
			设置:
				设置单个:
					jq对象.css("属性名称","值");
				设置多个:
					jq对象.css({
						"属性名称":"值",
						"属性名称":"值"
					});
			获取:
				jq对象.css("属性名称");
			获取宽和高:
				width();
				height();
			获取位置:
				offset();
					top:
					left:
		操作属性:
			attr:
				设置属性:
					设置单个:
						jq对象.attr("属性名称","值");
					设置多个:
						jq对象.attr({
							"属性名称":"值",
							"属性名称":"值"
						});
				删除:
					removeAttr("属性名称");
			prop:如果attr不好使使用prop代替
			操作class:
				addClass("class属性的值");
				removeClass();
				classToggle("class属性的值");
/////////////////////////////////////////////
案例1-省市联动
	需求分析:
		当省份改变的时候,根据选中的省份查询其所对应的市数组,遍历市数组,将每一个市拼成option插入到市的下拉选中.
	技术分析:
		事件
		jq遍历
		jq对DOM操作
	/////////////////////////
	步骤分析:
		1.确定事件(改变事件)
			给省份的下拉选添加改变事件
		2.编写改变事件函数
			//a.获取省份的value的值
			//b.获取所对应的市数组
			//c.获取市的下拉选对象
			//d.遍历市数组,将每一个市拼成option插入到市的下拉选中

案例2-左右选择
	需求分析:
		当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中.
	技术分析:
		事件
		文档处理
	////////////////////
	步骤分析:
		1.确定事件(单击事件)
			给按钮派发单击事件
		2.编写函数
			//a.将左边选中的第一个插入到右边
	
案例3-表单校验
	需求分析:
		通过使用validate插件来完成表单校验.
	技术分析:
		validate插件
//////////////////
		
	
	
扩展案例-模拟分组

//////////////////
day31jQuery

- jQuery遍历
  - 方式1:jQuery的对象方法
    - 格式:
      " jq对象.each(function([index],[dom对象]){  
      		对遍历到每个元素的操作 
        });"
  - 方式2:全局函数
    - 格式:
      "$.each(要遍历的jquery对象,function([index],[dom对象]){
      });
      $.each(数组,function(){
      });"
	  
案例:
//方式1:jq对象的方法
				$("#b1").click(function(){
					//获取当前页面的文本隐藏域,并打印他们的value值
					//[e1,e2,e3,e4]  存放的是dom(js)对象
					$("input:hidden").each(function(index,ele){
//						alert(index+"   "+ele.value+"  "+$(ele).val());
						alert(this.value);
					});
				});
				//方式2:全局遍历
				$("#b2").click(function(){
					//获取要遍历的对象
					var $hideObj = $("input:hidden");
					$.each($hideObj, function(index,ele) {
						alert(index+"   "+ele.value+"  "+$(ele).val()+"  "+this.value);
					});
				});
				//js对象
				var arr = new Array(1,2,3,"tom");
				$("#b3").click(function(){
//					$.each(arr, function(index,ele) {
//						alert(index+"   "+ele+"   "+this);
//					});
					$(arr).each(function(index,ele){
						alert(index+"   "+ele+"   "+this);
					});
				});
			});
	  
- jQueryDOM操作
  - HTML代码/文本/值 ★
    - val() : 对value属性的操作
      - jq对象.val();       获取value属性的值
      - jq对象.val("值");       设置value属性的值
    - html() : 对标签体的操作
      - jq对象.html();      获取标签体的内容
      - jq对象.html("值");     设置标签体的内容
    - text() : 对标签体的操作
      - jq对象.text();       获取标签体的内容
      - jq对象.text("值");     设置标签体的内容
    - html和text区别
      "设置内容: html可以将内容解析,text只是作为普通文本
      获取内容:html获取所有源码内容,text只是获取文本内容"
  - 文档处理
    - 内部插入:
      - append		a.append(c)     将c插入到a的内部的后面
      - prepend		a.prepend(c)    将c插入到a的内部的前面
      - appendTo	a.appendTo(c) 将a插入到c的内部的后面
      - prependTo	a.prependTo(c)将a插入到c的内部的前面
	  
内插入案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>01_内部插入节点.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//0.获取要操作的对象
				var $city = $("#city");
				var $fk = $("#fk");
				//1.在city内部的后面追加 反恐
				//向指定标签内部的前面进行插入
//				$city.append($fk);
//				$fk.appendTo($city);
				//2.在city内部的前面插入 反恐
				//向指定标签内部的后面进行插入
//				$city.prepend($fk);
				$fk.prependTo($city);
			});
		</script>
	</head>

	<body>
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="tj" name="tianjin">天津</li>
			<li id="cq" name="chongqing">重庆</li>
			
		</ul>

		<ul id="love">
			<li id="fk" name="fankong">反恐</li>
			<li id="xj" name="xingji">星际</li>
		</ul>


	</body>
	<script type="text/javascript">
	</script>

</html>
	  
 $(document).ready(function() {

				//1 获取 username的value属性的值
//				alert($("[name='username']").val());
				//2 设置 username的默认值为"许多多"
				$("[name='username']").val("许多多");
				//3通过html获取div标签体的内容
//				alert($("div").html());
				//4通过html设置div标签体的内容
//				$("div").html("已满18,请戴眼镜...");
				//5通过text获取div标签体的内容
//				alert($("div").text());
				//6通过text设置div标签体的内容
//				$("div").text("已满18,请戴眼镜!!!!");
				//7 两者设置值的区别
				//html在设置内容时,可以解析html标签
				$("div").html("<font color='red'>已满18,请戴眼镜...</font>");
				//text在设置内容时,原样设置
//				$("div").text("<font color='red'>已满18,请戴眼镜...</font>");
				//8 两者获取值的区别
				//html在获取时,原样获取(不会解析任何标签)
//				alert($("div").html());
				//text在获取时,会解析标签,仅仅获取文本内容
//				alert($("div").text());
				
				
			}); $(document).ready(function() {

				//1 获取 username的value属性的值
//				alert($("[name='username']").val());
				//2 设置 username的默认值为"许多多"
				$("[name='username']").val("许多多");
				//3通过html获取div标签体的内容
//				alert($("div").html());
				//4通过html设置div标签体的内容
//				$("div").html("已满18,请戴眼镜...");
				//5通过text获取div标签体的内容
//				alert($("div").text());
				//6通过text设置div标签体的内容
//				$("div").text("已满18,请戴眼镜!!!!");
				//7 两者设置值的区别
				//html在设置内容时,可以解析html标签
				$("div").html("<font color='red'>已满18,请戴眼镜...</font>");
				//text在设置内容时,原样设置
//				$("div").text("<font color='red'>已满18,请戴眼镜...</font>");
				//8 两者获取值的区别
				//html在获取时,原样获取(不会解析任何标签)
//				alert($("div").html());
				//text在获取时,会解析标签,仅仅获取文本内容
//				alert($("div").text());
				
				
			});
	  
    - 外部插入:
      - after		        a.after(c)	            在a的后面插入c
      - before		a.before(c)          在a的前面插入c
      - insertAfter	a.insertAfter(c)    将a插入到c的后面
      - insertBefore 	a.insertBefore(c) 将a插入到c的前面
	  
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>02_外部插入节点.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//0.获取要操作的对象
				var $city = $("#city");
				var $p2 = $("#p2");
				//1.在 p2 的后面插入 city
				//在指定的标签的后面进行插入
//				$p2.after($city);
//				$city.insertAfter($p2);
				//2.在 p2 的前面插入 city
				//在指定的标签的前面进行插入
//				$p2.before($city);
				$city.insertBefore($p2);
			});
		</script>
	</head>

	<body>
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="tj" name="tianjin">天津</li>
			<li id="cq" name="chongqing">重庆</li>
		</ul>

		<p id="p3">I would like to say: p3</p>

		<p id="p2">I would like to say: p2</p>

		<p id="p1">I would like to say: p1</p>

	</body>
	<script type="text/javascript">
	</script>

</html>
	  
    - 删除:
      - empty():清空元素 (清空所有的子标签)
      - remove():移除 (自杀)
	  
删除案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>03_删除节点.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//0.获取要 操作的对象
				var $ul = $("#city");
				//1.清空ul
//				$ul.empty();
				//2.移除ul
				$ul.remove();
			});
		</script>
	</head>

	<body>
		<ul id="city">
			<li id="bj" name="beijing">北京
				<p>海淀区</p>
			</li>
			<li id="tj" name="tianjin">天津
				<p>河西区</p>
			</li>
			<li id="cq" name="chongqing">重庆</li>
		</ul>
		<p class="hello">Hello</p> how are
		<p>you?</p>
	</body>
	<script type="text/javascript">
	</script>

</html>
	  
- jQuery的事件总结
  - 事件切换(知道)
    - hover:相当于给一个元素添加了mouseover和mouseout两个事件
      "jq元素对象.hover(function(){
      	//第一个函数相当于mouseover
      },function(){
      	//第二个函数相当于mouseout
      });"
    - toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持)
      "jq元素.toggle(function(){},function(){}...);"
	  
案例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<!--<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>-->
		<script type="text/javascript">
			$(function(){
				$("#divId").hover(function(){
					//相当于mouseover
					$(this).html("mouseover事件被触发了");
				},function(){
					//相当于mouseout
					$(this).html("mouseout事件被触发了....");
				});
				
				$("#bId").toggle(function(){
					alert(1);
				},function(){
					alert(2);
				},function(){
					alert(3);
				});
				
			});
		</script>
	</head>

	<body>
		<input type="button" id="bId" value="点击查看" /><br>
		<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
	</body>

</html>
	  
  - 常见事件
    - submit 表单提交事件★
    - focus 获得焦点事件  ★
    - blur  失去焦点  ★
    - change  改变 ★
    - click  单击 ★
    - dblclick 双击
    - keydown  键盘按下
    - keyup  键盘弹起
    - keypress 键盘按下并弹起
    - mousedown   鼠标按下
    - mouseup  鼠标弹起
    - mousemove  鼠标移入
    - mouseout   鼠标移出
    - mouseover  鼠标悬停  
  - 事件和事件源的绑定  ★
    - jq对象.事件名称(function(){});
- validate插件
  "插件:指的就是别人已经写好的功能代码,直接引入使用即可.
  	"
  - 作用:对表单进行校验
  - 下载:
    "下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip"
  - 使用方式:
    - 1.导入jquery.js
      "validate是基于jquery写的,所以要先导入jquery的js文件"
    - 2.再导入validate.js
      "想要使用别人的插件就必须的导入人家已经写好的js文件(插件)"
    - 3.在页面加载成功后,要确定对页面上的哪个表单进行校验
      "	$(function(){
      		表单对象.validate();
      	});"
    - 4.validate使用格式:
      "	表单对象.validate({
      		rules:{},	//校验规则
      		messages:{}	//提示信息
      	});"
    - 5.常见的校验规则
      - 校验器名称	         描述			值
      - required:	       必须填写  		true|false
      - number:		只能输入数字	        true|false
      - min:		       最小值			  数字
      - max:		最大值			数字
      - range:		取值范围		[min,max]
      - minlength:	最小长度		数字
      - maxlength:	最大长度		数字
      - rangelength:    长度范围		[minlength,maxlength]
      - equalTo:	        和谁相等  	通过jQuery选择器选中指定元素对象
      - email:		校验邮箱		"email"
    - 6.rules校验器语法:
      - 方式1:单一校验
        "name属性的值:"校验器""
      - 方式2:多个校验
        "	name属性的值:{
        		校验器1:值1,
        		校验器2:值2
        	}"
    - 7.messages自定义提示信息语法:
      - 方式1:
        "name属性的值:"提示信息""
      - 方式2:
        "	name属性的值:{
        		校验器1:"提示信息1",
        		校验器2:"提示信息2"
        	}"
			
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1.导入jq的js文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<!--2.导入validate的js文件-->
		<script type="text/javascript" src="../js/jquery.validate.js" ></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			/*3.在页面加载成功之后,锁定要校验的表单对象*/
			$(function(){
				//锁定要校验的表单对象,调用validate方法
				$("#formId").validate({
					rules:{
						//单一校验规则
//						username:"required",
//						//多个校验规则
//						password:{
//							required:true,
//							number:true
//						},
//						repassword:{
//							required:true,
//							number:true,
//							equalTo:"[name='password']"
//						},
//						zuixiaozhi:{
//							required:true,
//							min:180
//						},
//						shuzhiqujian:{
//							required:true,
//							range:[18,26]
//						}
						card:{
							required:true,
							cardLength:true
						}
					},	//校验规则
					messages:{
//						username:"<font color='red'>用户名不可为空</font>",
//						password:{
//							required:"密码不可为空",
//							number:"密码只能为数字"
//						},
//						zuixiaozhi:{
//							min:"请输入不小于{0}的值啊...."
//						},
//						shuzhiqujian:{
//							range:"请输入年龄在{0}到{1}之间的年龄"
//						}
						card:{
							cardLength:"请输入16或18位的数字"
						}
					}	//提示信息
				});
			});
			
			//编写自定义校验器
			$.validator.addMethod("cardLength",function(val,ele,par){
				if(par){
					if(val.length==16||val.length==18){
						return true;
					}
					return false;
				}else{
					return true;
				}
				
			},"输入的不合法");
			
		</script>
	</head>

	<body>
		<form id="formId" action="">
			必填:<input type="text" name="username" /> <br/> 必填数字:
			<input type="text" name="password" /> <br /> 必填重复:
			<input type="text" name="repassword" /> <br /> 最小值:
			<input type="text" name="zuixiaozhi" /> <br /> 区间:
			<input type="text" name="shuzhiqujian" /> <br />
			身份证长度:<input type="text" name="card" /> <br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
			
  - 自定义校验器
    - 格式:
      - $.validator.addMethod(name,function(value,element,params){},"message");
      - 参数说明:
        - name:校验器的名称,唯一
        - function:校验规则
          - value:用户输入的值
          - element:要校验的dom对象
          - params:校验器的值
        - message:当不满足校验规则时的提示信息
- 扩展:
  - 筛选-查找;
    - children(["选择器"]):	所有孩子
    - parent():	父母
    - find("选择器"):		查找后代
    - next():		下个兄弟 +
    - nextAll():	所有的弟弟 ~
    - prev():		小哥哥
    - prevAll():	哥哥们
    - siblings():	兄弟们
	
  - 筛选-过滤
    - is("选择器"):判断是否满足   返回Boolean

查找案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>05-可见性过滤选择器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/assist.js" ></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(document).ready(function() {
				//<input type="button" value=" 选择 id=two 所有子元素" id="b1" />
				$("#b1").click(function(){
					$("#two").children().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
				$("#b2").click(function(){
//					$("#two").children("[title=other]").css("background-color","#ff0");
					$("#two").find("[title=other]").css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
				$("#b3").click(function(){
					$("#two").next().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
				$("#b4").click(function(){
					$("#two").nextAll().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
				$("#b5").click(function(){
					$("#two").prev().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
				$("#b6").click(function(){
					$("#two").prevAll().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
				$("#b7").click(function(){
					$("#two").siblings().css("background-color","#ff0");
				});
				//<input type="button" value=" 选择 id=two 父元素" id="b8" />
				$("#b8").click(function(){
					$("#two").parent().css("background-color","#ff0");
				});
			});
		</script>
	</head>

	<body>
		<h3>可见性过滤选择器.</h3>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
		<br/><br/>
		<input type="button" value=" 选择 id=two 所有子元素" id="b1" />
		<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
		<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
		<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
		<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
		<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
		<input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
		<input type="button" value=" 选择 id=two 父元素" id="b8" />
		<br /><br />

		<!--文本隐藏域-->
		<input type="hidden" value="hidden_1">
		<input type="hidden" value="hidden_2">
		<input type="hidden" value="hidden_3">
		<input type="hidden" value="hidden_4">

		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

		<span id="mover">正在执行动画的span元素.</span>
	</body>

</html>

过滤案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>05-可见性过滤选择器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/assist.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(document).ready(function() {
				$("#b6").click(function(){
					//判断样式为hide的div 下一个兄弟是否是span
					var flag = $("div:hidden").next().is("span");
					alert(flag);
				});
			});
		</script>
	</head>

	<body>
		<h3>可见性过滤选择器.</h3>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
		<br/><br/>
		<input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span" id="b6" />
		<br /><br />
		<!--文本隐藏域-->
		<input type="hidden" value="hidden_1">
		<input type="hidden" value="hidden_2">
		<input type="hidden" value="hidden_3">
		<input type="hidden" value="hidden_4">

		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

		<span id="mover">正在执行动画的span元素.</span>
	</body>

</html>

用户分组案例:

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		</script>

		<style type="text/css">
			div * {
				display: block;
				width: 200px;
			}
			div span {
				background-color: #0f0;
			}
		</style>
		<script>
			$(function(){
				//给span派发单击事件
				$("span").click(function(){
					//将span后面的a标签显示或隐藏
					$(this).nextAll().toggle();
					$(this).parent().siblings().find("a").hide();
				});
			});
		</script>
	</head>

	<body>

		<div>
			<span>三国好友</span>
			<a>曹操</a>
			<a>刘备</a>
			<a>周瑜</a>
		</div>
		<div>
			<span>笑傲好友</span>
			<a>东方不败</a>
			<a>向问天</a>
			<a>任我行</a>
		</div>
		<div>
			<span>水浒好友</span>
			<a>行者武松</a>
			<a>豹子头</a>
			<a>急先锋</a>
		</div>

	</body>

</html>
	
省市联动案例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 定义二维数组:
			var arr = new Array(4);
			arr[0] = new Array("石家庄", "邯郸", "保定", "秦皇岛");
			arr[1] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
			arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
			arr[3] = new Array("长春市", "吉林市", "四平市", "通化市");
		</script>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function() {
				/*	步骤分析:
		1.确定事件(改变事件)
			给省份的下拉选添加改变事件
		2.编写改变事件函数
			//a.获取省份的value的值
			//b.获取所对应的市数组
			//c.获取市的下拉选对象
			//d.遍历市数组,将每一个市拼成option插入到市的下拉选中*/
				$("[name=pro]").change(function(){
					//a.获取省份的value的值
//					alert(this.value);
					//b.获取所对应的市数组
					var cityArr = arr[this.value];
//					alert(cityArr);
					//c.获取市的下拉选对象
					var $cityObj = $("#city");
					//初始化
					$cityObj.html("<option>=请选择=</option>");
					//d.遍历市数组,将每一个市拼成option插入到市的下拉选中
					$.each(cityArr, function() {
//						$cityObj.append("<option>"+this+"</option>");
						$("<option>"+this+"</option>").appendTo($cityObj);
					});
				});
			});
		</script>
	</head>

	<body>
		<form action="#" method="get">
			<input type="hidden" name="id" value="007" /> 姓名:
			<input name="username" value="xuduoduo" /><br> 密码:
			<input type="password" name="password" value="123" disabled="disabled"><br> 性别:
			<input type="radio" name="sex" value="1" checked="checked">男
			<input type="radio" name="sex" value="0">女
			<br> 爱好:
			<input type="checkbox" name="hobby" value="eat">吃
			<input type="checkbox" name="hobby" value="drink" checked="checked">喝
			<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
			<br> 头像:
			<input type="file" name="photo"><br> 籍贯:
			<select name="pro">
				<option>--请选择--</option>
				<option value="0">河北</option>
				<option value="1">河南</option>
				<option value="2">辽宁</option>
				<option value="3">吉林</option>
			</select>省
			<select id="city">
				<option>-请选择-</option>
			</select>市
			<br> 自我介绍:
			<textarea name="intr" cols="40" rows="4">good!</textarea>
			<br>
			<input type="submit" value="保存" />
			<input type="reset" />
			<input type="button" value="普通按钮" />
		</form>
	</body>

</html>
<!--
	
-->

左右选中案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>左右选中.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style>
			input[type='button'] {
				width: 50px;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				/*	步骤分析:
				1.确定事件(单击事件)
					给按钮派发单击事件
				2.编写函数
					//a.将左边选中的第一个插入到右边*/
				$("#toRight1").click(function(){
					//a.将左边选中的第一个插入到右边
					$("#left option:selected:first").appendTo($("#right"));
				});
				
				$("#toRight2").click(function(){
					//a.将左边选中的插入到右边
					$("#left option:selected").appendTo($("#right"));
				});
				
				$("#toRight3").click(function(){
					//a.将左边选中的插入到右边
					$("#left option").appendTo($("#right"));
				});
			});
		</script>
	</head>

	<body>
		<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
					<input type="button" value="<" id="toLeft1"><br>
					<input type="button" value="<<" id="toLeft2"><br>
					<input type="button" value="<<<" id="toLeft3">
				</td>
				<td>
					<select id="right" multiple="multiple" style="width:100px" size="10">

					</select>
				</td>
			</tr>
		</table>
	</body>

</html>
	

表单效验案例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.validate.js" ></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#formid").validate({
					rules:{
						username:{
							required:true
						},
						email:{
							required:true,
							email:"email"
						},
						sex:{
							required:true
						}
					},
					messages:{
						username:{
							required:"用户名不可为空"
						}
					}
				});
			});
		</script>
	</head>

	<body>
		<form action="#" method="get" id="formid">
			<table width="60%" height="60%" align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="80%"><input type="text" name="username" id="username"></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="date" name="birthday">
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券