JQuery 总结（7） index() data() each() 选项卡 表单验证

index() 当前标签的索引，data()给标签身上添加属性，each()循环遍历

$("h1").click(function () {
	    val=$(this).index();
	   $(this).text(val)<!-- }) -->

	   $("h1").each(function (i) {
          $(this).data({"num":i+1});
	   })
         $("h1").click(function () {
         	$(this).find("span").text($(this).data("num"))
         })

选项卡 TAB

	<div class="c">
		<h1>开始展示内容1 </h1>
		<h1>开始展示内容2 </h1>
		<h1>开始展示内容3</h1>
	</div>
	<div class="con">
		<p>内容1</p>
		<p>内容2</p>
		<p>内容3</p>
	</div>
	
	<script>
		
		$("h1").hover(function () {
			idx=$(this).index();
			$("p").eq(idx).show();
			$("p").not($("p").eq(idx)).hide();

		})

	</script>

　表单注册验证 

 首先每个表单后面 带一个span , 用jquery 隐藏hide ，
然后在jquery获取input的value [ 这个可以用js对象 this.value] 来判断 如果成功  那么 next().show()   ,以此类推

为了提交的时候强制验证，当from提交时候 给每个input执行blur，[ 判断的时候如果成功再给每个input  增加data（{“num”：1}） ]
  最后each tot+=这个属性 如果 tot不等于 总数  那么return false

$("input").not($("input[type='submit']"))
$("input[type!=submit]")

 

<form action="xx.php"method="post">
		<div class="yh">
			用户：
			<input type="text" name="name" class="les">
			<p class="error">用户名小于六位</p>
		</div>
		<div class="yh">
			密码：
			<input type="password" name="password" class="les">
			<p class="error">密码小于8位</p>
		</div>
		<div class="yh">
			密码：
			<input type="password" name="repassword" class="les">
			<p class="error">两次密码不一致</p>
		</div>
		<div class="yh">
			手机：
			<input type="txt" name="phone" maxlength="11" class="les">
			<p class="error">手机长度11位</p>
		</div>
		<input type="submit" value="ok">

	</form>
	<script>
		$(".error").hide();
		$("input[name=name]").blur(function () {
			valname=this.value;
			if (valname.length<6) {
				$(this).next().show()
				$(this).data({"num":0})
			}else{
				$(this).next().hide()
				$(this).data({"num":1})
			}
		})
		$("input[name=password]").blur(function () {
			valname=this.value;
			if (valname.length<8) {
				$(this).next().show()
				$(this).data({"num":0})
			}else{
				$(this).next().hide()
				$(this).data({"num":1})
			}
		})
		$("input[name=repassword]").blur(function () {
			valname2=$("input[name=password]")[0].value;
			valname=this.value;
			if (valname!=valname2) {
				$(this).next().show()
				$(this).data({"num":0})
			}else{
				$(this).next().hide()
				$(this).data({"num":1})
			}
		})
		$("input[name=phone]").blur(function () {
			valname=this.value;
			if (valname.length!=11) {
				$(this).next().show()
				$(this).data({"num":0})
			}else{
				$(this).next().hide()
				$(this).data({"num":1})
			}
		})

		$("form").submit(function () {
			$("input").blur();
            var tot=0;
 
            $(".les").each(function () {
            	tot+=$(this).data('num');

            }) 
               if (tot!=4) {
               	return false
               }
            
		})
		// =$(input[name="name"]).val
	</script>

　　其他方法

1.data({"num":1}) 给jquery身上赋值
2.$('h1').each(function(i){
$(this).data({'num':i});
});
3.hover
$('img').hover(
function(){
this.src='b.png';
},
function(){
this.src='a.png';
}
);

 

eg：一个图片很大 鼠标滑过 移动位置
$('img').hover(
function(){
$(this).animate({
'margin-left':'-100px'
},500);
},
function(){
$(this).animate({
'margin-left':'0px'
},500);
}
);

 

$("img").hover(function () {
$(this).addClass('img');
},function () {
$(this).removeClass('img');
})

 

4.$('h1').length size和length获取jquery对象中dom对象的个数

 

5.$('#s1 option:selected').clone().appendTo('#s2');复制选择

 

6.全选 反选 和 全不选
$('#all').click(function(){
$(':checkbox').attr({'checked':true});
});

 

$('#notall').click(function(){
$(':checkbox').attr({'checked':false});
});

 

$('#unall').click(function(){
$(':checkbox').each(function(){
this.checked=!this.checked;
});
});

 

$('#ok').click(function(){
$(':checked').parent().parent().appendTo('.info');
});
7.
// $('h1:first').css({'color':'#00f'});
// $('h1:last').css({'color':'#00f'});
// $('h1:not(:first)').css({'color':'#00f'});
// $('h1:even').css({'color':'#00f'});
// $('h1:odd').css({'color':'#00f'});
// $('h1:eq(2)').css({'color':'#00f'});
// $('h1:gt(1)').css({'color':'#00f'});
// $('h1:lt(1)').css({'color':'#00f'});
8.$('h1[name!=user123]').css({'color':'#00f'});
9.$('h1').slice(2,3).css({'color':'#00f'});
从第几个到第几个