JQuery 总结（7） index() data() each() 选项卡 表单验证
index() 當前標簽的索引，data()給標簽身上添加屬性，each()循環遍歷
| 1 2 3 4 5 6 7 8 9 10 | $("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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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]")
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <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'});
從第幾個到第幾個
總結
以上是生活随笔為你收集整理的JQuery 总结（7） index() data() each() 选项卡 表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery 总结（6） 锋利的jQue
- 下一篇： JQuery 总结（8）Ajax 无刷新