表格全选，获取复选框中的值，联动效果，表单校验之插件

上期回顾

就绪函数

jQuery(document).ready(function(){

 

});

$(function(){});//简写

 

事件：和js 比较jQuery要去掉on

 

//取值

document.getElementById().value;

$(”选择器”).val();

//赋值

document.getElementById().value = ?;

$(”选择器”).val(?);

 

“我是空格”   获取跨层级子孙元素。

 

基本选择器

ID

CLASS

标签

层级选择器

> 子标签

+ 同级下的下一个兄弟标签

~ 同级下的所有兄弟标签

过滤选择器

:first

:last

:eq(index)

:lt(index) <

:gt(index) >

:even 偶数

:odd 奇数

属性选择器

[属性名=’属性值’]

[属性名！=’属性值’]

[属性名$=’我是字符串’]  后缀包含

表单选择器

禁用：disabled

激活：enabled

被点击：checked

被选择：selected

 

jQuery特效

show(time,fn) | hide(time,fn)   单位 毫秒

fadeIn() | fadeOut | fadeToggle

slideDown() | slideUp | slideToggle

 

jQuery 操作css

对象.css(”属性名”,”属性值”)

对象.addClass()

对象.removeClass()

this关键字

关于this关键字的使用。https://www.cnblogs.com/diantao/p/4514238.html

$(this)  |  this

两个获取的都是对象但是不同，使用的时候必要时可相互转换。

var obj1 = document.getElementById(?);

var obj2 = $(”#?”);

$(this)这个是jQuery读取对象的方式，所以后面只能书写jQuery的形式

this 的形式是直接从循环或者事件中读取JavaScript对象。 操作的时候必须使用JavaScript的形式进行操作

案例：表格的全选/全不选功能

1. 给按钮绑定点击事件
2. 获取除表头中选框之外的所有选框对象
3. 分别给一下获取的选框修改属性  checked
4. 想办法保证表头的选择的状态和下面的选框状态一致。
5. attr和prop的使用：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

	
		
		
			
			
	

	
		
			


				

					
					

					
角色
					
技能
				
				

					

					
孙悟空
					
龟派气功，元气弹，瞬间移动，超级赛亚人4
				
				

					

					
贝吉塔
					
超级赛亚人4，超级赛亚人3
				
				

					

					
克林
					
元气斩
				
				

					

					
比克
					
魔贯光杀炮
				
				

					

					
悟饭
					
潜力股
				
			
		
	

案例：联动效果

对象.html()  //以HTML形式获取或者填充

对象.text()  //以文本形式获取或者填充  

对象.each(匿名函数) //可以遍历对象

$.each(数组，function（index，value）) 循环的使用   // 可以直接循环数组

思路

1. 两个数组 省级数组一维，市级信息是二维的。
2. 将省级信息填充到省级下拉列表中
3. 省级下拉列表绑定change事件
4. 获取省级当前选中的value值
5. 根据value值取到对应的市级数组
6. 将找到的市级信息填充到市级下拉列表中

	
		
		
		
		
		
	
	
		
			
省市联动
			
			
				===请选择1===

			
		
	

表单校验（jQuery插件）validate.js

validate校验的意思 validate.js是jQuery的一个插件，帮助我们快速的检查当前表单中的内容是否合法。

注意1：插件使用的时候依赖jQuery.js  并且引入时必须放在jQuery.js之后。顺序：jQuery--validate--汉化包

注意2：为了能够让validate生效，必须在就绪函数中书写。

给当前表单添加验证插件

案例代码

总结

jQuery循环遍历操作

1. $对象.each(function(){});  //有jquery对象时用
2. $.each(arr,function(index,value){}); //数组时使用

 

$(this)  |  this 的异同

相同点：都是对象

不同点

$(this) 返回的是jQuery对象，之后的操作只能是jquery语法，this返回的是JavaScript，只能使用js语法操作。

转化

jquery 转 js：$对象[*]

js 转 jquery$：(js对象)

 

案例：全选全不选

使用jquery操作属性  

attr[attribute] 1.6之前方法，存在兼容性问题

prop[properties] 主流

$对象.prop(”属性名”);  //获取属性

$对象.prop(”属性名”,”属性值”);  //赋值

 

案例：复选框获取选中的值

substring(beginIndex，endIndex);从begin到end之间的字符串，可以简化为substring(beginIndex)

 

案例：联动效果

$对象.text()

$对象.html()

 

插件：

就绪函数中书写   ：   $(”表单”).validate();