casesWebStageDay16

案例一: 使用jquery重写省市联动
事件:change
遍历元素
追加内容

实现: 重写省市联动的下拉选择框:
$(function(){

		//7.在开始遍历之前,先清空,初始化选择效果
		$("#city").html("<option>-请选择-</option>")
		
		//4.遍历数组 cities ,先转化为jquery对象
		$(cities).each(function(index,ele){//此处index与上面index是不是一个变量??
			//alert(ele)	ele代表该数组中的元素
			var cityName=ele;
			//5.将名字拼接成option标签
			var option="<option>"+cityName+"</option>"
			//6.将option标签追加到城市下拉选择框中
			$("#city").append(option)
		})			
	})		
})

---

1.遍历:
1)原生的js:
for(var i=0;i<元素数组.length;i++){
数组[i]
…
}

2)jquery:
	方式1:
		jquery对象.each(function(index,ele){
			//开始遍历的内容
			index:索引
			ele:正在被遍历的元素
			this:正在被遍历的元素
		});
	方式2:
		$.each(要被遍历的对象,function(index,ele){
			//开始遍历的内容
		
		})
注:现在就暂时认为两种遍历方式一样  换种写法(实际是有区别的)

---

2.val()—html()—text()
val()---->操作value属性
html()—>操作标签体内容
text()—>操作标签体内容

//三个方法都可以带参数
jquery对象.val()//获取对象value属性值
jquery对象.val("值");//设置对象value属性值


jquery对象.html()--->获取标签体
jquery对象.html(值) 设置标签体

jquery对象.text()--->获取标签体
jquery对象.text(值) 设置标签体


html方法操作元素的innerHTML属性-->标签体
text操作元素的innerText属性-->标签里的纯文本(很少用)

---

3.提供插入内容的操作
以下的语法中 a b c d 代表的是一个选择器
3.1)内部插入操作:

	a.append(b);//将b追加到a的标签体内的末尾
	a.prepend(b);//将b追加到a的标签体内的头部


	b.appendTo(a);//将b追加到a的标签体内的末尾
	b.prependTo(a);//将b追加到a的标签体内的头部

3.2)外部插入:
	
	c.after(d);//在c的后面插入d
	c.before(d);//在c的前面插入d
	

	c.insertAfter(d);//将c插入到d的后面
	c.insertBefore(d);//将c插入到d的前面

3.3)删除:
	empty()//清空子元素
	remove()//自杀 清除自己

---

案例二: 左右选中移动:
需求:
在下拉选择框中允许多选 ,点击对应的按钮 一次做到
可以将选择元素的第一个 移动到对边去
选择元素的所有移动到对边去
将元素移动到对边去

    处理下拉选择器多选的问题:
select标签:
	multiple:控制是否允许多选的
	size:控制显示几个选项

实现:

$(function(){
//1.为按钮添加点击事件,取出选中的第一个
$("#toRight1").click(function(){
//取出左边的选中的第一个
$("#left>option:selected:first").appendTo("#right")
})

//2.为按钮添加点击事件,取出选中的所有
$("#toRight2").click(function(){
	//取出左边的选中的所有
	$("#left>option:selected").appendTo("#right")
})

//3.为按钮添加点击事件,取出所有
$("#toRight3").click(function(){
	//取出左边的所有
	$("#left>option").appendTo("#right")
})

})

---

4.表单对象属性过滤选择器:
:enabled 可用的
:disabled 不可用
:checked 选中的 针对单选 多选 下拉
:selected 选中的 针对下拉选择框 的option的

---

5.插件的学习(主要学习一种思想,如何使用插件:下载,引入,具体操作查看api,培养学习能力,举一反三)
validator:验证 校验
jquery是什么?就是js–>在js原生api上封装一些好用的方法
validator是基于jquery开发的插件

5.1)怎么用:
	下载
	解压  拿出-->jquery.validate.js

	1)先导入jquery
	2)导入它自己
	3)需要你页面加载成功以后,指明你要校验的表单
		$("选择器").validate({
			rules:{}
			messages:{}
		});
	4)什么叫做规则
		required:必填的 true|false
		number:必须是数值类型
		digits:必须是整数
		min:最小值
		max:最大值
		range[min,max]:范围区间
		minlength:最小长度
		maxlength:
		rangelength[]: 长度大小范围
		email:必须邮件格式
		equalTo:跟xx相同  equalTo:取值 选择器
	5)规则写法问题:
		$("选择器").validate({
			rules:{
				这个位置
			}
			messages:{}
		});
		
		写法问题:
			格式1:
				rules:{
					要校验的字段的name属性的名字:规则名
					username:required
				}
			格式2:
				rules:{
					要校验的字段的name属性的名字:{
						规则名:规则值,
						规则名:规则值
						.....
					}
					例子:
					password:{
						required:true,
						number:true
						.....
					}
					
				}

	6)自定义规则:
	$.validator.addMethod(name,fn,message);
	name:规则名 唯一
	fn:函数  写的校验逻辑
		function(value,ele,params){
			value:正在被校验的元素本身的值
			ele:正在被校验的元素本身
			params:规则的参数数组

		}
		//函数必须返回一个bool值  

	message:默认的错误提示信息

	7)自定义错误信息
		
		$("选择器").validate({
			rules:{
				
			}
			messages:{
				这个位置
			}
		});

		写法问题:
			格式1:
				messages:{
					要校验的字段的name属性的名字:"提示信息"
					username:required
				}
			格式2:
				messages:{
					要校验的字段的name属性的名字:{
						规则名:"提示信息",
						规则名:"提示信息"
						.....
					}
					例子:
					password:{
						required:"密码必填",
						number:"必须为数值类型"
						.....
					}	
				}

---

案例三: 表单验证(jQuery插件,了解即可,重要的是思想)

$(function(){
//选择表单,调用验证方法validate({…})
$("#formid").validate({
//rules部分
rules:{
username:{
required:true,
rangelength:[6,12]
},
password:{
required:true,
number:true,
rangelength:[6,12]
},
repassword:{
required:true,
equalTo:"[name=‘password’]"
},
email:{
required:true,
email:“email”
},
sex:{
required:true
}
},
//messages部分
messages:{
username:{
required:“必填”,
rangelength:“长度在{0}~{1}之间”
},
password:{
required:“必填”,
number:“必须为数值”,
rangelength:“长度在{0}~{1}之间”
},
repassword:{
required:“必填”,
equalTo:“必须跟密码一致”
},
email:{
required:“必填”,
email:“必须是邮件”
},
sex:{
required:“性别必选”
}
}

});

})

☆ 自定义规则(身份证)

if(reg.test(value)){
//是身份证
return true;
}else{
return false;
}
}else{
//必须返回一个boolean值
return false;
}
//必须返回一个boolean值
return true;
},“不符合身份证规则”)