工作中的js总结

1、点击li下面匹配的内容块跟着一起改变

1 $(".dis-list li").bind("hover click", function () {
2 $this = $(this);
3 $this.addClass("active").siblings().removeClass("active");
4 $(".list-content li.item").eq($this.index()).addClass("on").siblings().removeClass("on");
5 });

2、升序降序

 1 (function ($) {
 2 
 3 $(document).ready(function () {
 4 
 5 //调序
 6 $("a[id^='ascent-']").first().hide();
 7 $("a[id^='decline-']").last().hide();
 8 
 9 //上升
10 $("a[id^='ascent-']").click(function (e) {
11 e.preventDefault();
12 var tr = $(this).parents("tr:first");
13 var id = tr.data("id");
14 var referenceId = tr.prev().data("id");
15 
16 $.post($(this).attr("href"), { id: id, referenceId: referenceId }, function (data) {
17 var trBefore = tr.prev();
18 tr.insertBefore(trBefore);
19 $("a[id^='ascent-'],a[id^='decline-']").show();
20 $("a[id^='ascent-']").first().hide();
21 $("a[id^='decline-']").last().hide();
22 });
23 });
24 
25 //下降
26 $("a[id^='decline-']").click(function (e) {
27 e.preventDefault();
28 var tr = $(this).parents("tr:first");
29 var id = tr.data("id");
30 var referenceId = tr.next().data("id");
31 
32 $.post($(this).attr("href"), { id: id, referenceId: referenceId }, function (data) {
33 var trAfter = tr.next();
34 tr.insertAfter(trAfter);
35 $("a[id^='ascent-'],a[id^='decline-']").show();
36 $("a[id^='ascent-']").first().hide();
37 $("a[id^='decline-']").last().hide();
38 });
39 });
40 
41 });
42 
43 })(jQuery);
44 
45

3、鼠标进入和离开的事件

1 $(".reminder-dropdown").mouseenter(function () {
2   　　 $(this).addClass("show-select");})
3 　　　　　　　　.mouseleave(function () {
4 　　　　$(this).removeClass("show-select");
5 });

4、高效利用JQuery

http://www.w3cfuns.com/article-1302-1.html

5、当滚动条滚动到一定的程度时，缩小导航高度，当返回的时候，还原导航高度

1 .nav-fixed { width: 100%; height: 120px; position: fixed; left: 0; top: 0; z-index: 999; background: #dadada; }

 1 <script type="text/javascript">
 2  $(document).ready(function(e) {
 3     $(document).on("scroll",function(){
 4     if($(document).scrollTop()>200){ 
 5         $(".nav").stop().animate({
 6             height:'50px'
 7         });
 8     }else{
 9         $(".nav").stop().animate({
10             height:'100px'
11         });  
12     }        
13    }); 
14 });
15 </script>