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