效果
隐藏与显示 hide() 和 show()
<body> <button>点击</button> <div class="fi"> 今天周六 </div> </body> </html> <script> var bs = 0; $("button").click(function(){ if(bs%2==0){ $(".fi").hide(1000); //1秒后消失 }else{ $(".fi").show(1000); //1秒后显示 } bs++; }) </script>
淡入淡出
fadeIn(speed,callback)淡入fadeOut(speed,callback)淡出fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换、fadeTo(speed,opacity,callback)
<body> <button>点击</button> <div class="fi"> 今天周六 </div> </body> </html> <script> var bs = 0; $("button").click(function(){ if(bs%2==0){ $(".fi").fadeOut(1000); }else{ $(".fi").fadeIn(1000); } bs++; }) </script>
<body> <button>点击</button> <div class="fi"> 今天周六 </div> </body> <script> $("button").click(function(){ $(".fi").fadeTo(1000,0.5); }) </script>
滑入滑出 slideDown(speed,callback);slideUp(speed,callback);滑入滑出切换 slideToggle(speed,callback);
<body> <button>点击</button> <div class="fi"> 今天周六 </div> </body> <script> var bs = 0; $("button").click(function(){ if(bs%2==0){ $(".fi").slideDown(1000); }else{ $(".fi").slideUp(1000); } bs++; }) </script>
遍历
祖先
parent 直接父元素 parents 父元素一直到html until parents 父元素一直到until但不包括
<body> <button>点击</button> <div class="aa"> <div class="bb"> <div class="cc"> <div class="dd"> </div> </div> </div> </div> </body> <script> $("button").click(function(){ console.log($(".dd").parent()); console.log($(".dd").parents()); console.log($(".dd").parentsUntil(".aa")); }) </script>
后代 children 找子代 find 找后代一直到没有返回空
<body> <button>点击</button> <div class="aa"> <div class="bb"> <div class="cc"> <div class="dd"> </div> </div> </div> </div> </body> <script> $("button").click(function(){ console.log($(".aa").children()); console.log($(".aa").find("*")); console.log($(".aa").find(".ff")); }) </script>
找同胞 siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,找上一个同胞元素
与选择器类似
过滤 first() 方法返回被选元素的首个元素。last() 方法返回被选元素的最后一个元素。eq() 方法返回被选元素中带有指定索引号的元素。filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。该方法通常用于缩小在被选元素组合中搜索元素的范围。not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。slice() 把匹配元素集合缩减为指定的指数范围的子集。
<body> <button>点击</button> <div class="aa">1</div> <div class="bb">2</div> <div class="cc">3</div> <div class="dd">4</div> </body> <script> $("button").click(function(){ $("div").css("color","red").filter(".cc").css("color","blue");
$("div").css("color","red").not(".cc").css("color","blue"); }) </script>
<body> <button>点击</button> <div class="aa">1</div> <div class="bb">2</div> <div class="cc">3</div> <div class="dd">4</div> <div class="dd">5</div> <div class="dd">6</div> <div class="dd">7</div> </body> <script> $("button").click(function(){ $("div").slice(2,4).css("color","red"); //以下标0开始不包括所取的最后一位,与radom类似 }) </script>
<body> <button>点击</button> <div class="aa">1</div> <div class="bb">2</div> <div class="cc">3</div> <div class="dd">4</div> <div class="dd">5</div> <div class="dd">6</div> <div class="dd">7</div> </body> </html> <script> $("div").each(function(){ console.log($(this).html()); }) </script>
内置遍历数组 map(值,下标) each(下标,值)
<script> var attr=[1,2,3,4,5] $.map(attr,function(i,j){ console.log(i,j); }) </script>
<script> var attr=[1,2,3,4,5] $.each(attr,function(i,j){ console.log(i,j); }) </script>