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'});
從第幾個到第幾個