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

最新推荐文章于 2022-12-30 10:29:21 发布

GarfieldEr007

最新推荐文章于 2022-12-30 10:29:21 发布

阅读量867

点赞数

分类专栏： jQuery 文章标签： JQuery 总结选项卡表单验证

原文链接：https://www.cnblogs.com/nice2018/p/10674734.html

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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'});
从第几个到第几个