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'}); 从第几个到第几个
转载于:https://www.cnblogs.com/nice2018/p/10674734.html
相关资源：JAVA上百实例源码以及开源项目