jquery经常用到的代码段

1.1jquery实现手风琴效果

     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <script>
     $(document).ready(function(){
              $('ul').on('mouseover','li',function(){
         var $this=$(this); 　　 //指向鼠标事件
         $('li').removeClass('big');
         $this.addClass('big');
         })
     })

     </script>

1.2原生JS实现手风琴效果

<script type="text/javascript">
   function mouseover(e){
            var list = $('#subject li');
            var target = $(e.target).parents('li');

            list.removeClass('big');
            target.addClass('big');
        }

        (function(){
            var outer = $('#subject');
            outer.find('li').on('mouseover', mouseover);
        })()

    </script>

2.

<script>  //原生JS实现
    function show(index){
        //先找到type2里面的dd标签
        var dd = document.getElementById("type2").getElementsByTagName("dd");
        for(var i=0;i<dd.length;i++){
            if(i==index){
                dd[i].className = "selected";
            }else{
                dd[i].className = null;
            }
        }
    }
</script>

3.

$(".li").on('click', ".deleteon", function(){
$(this).parent().remove();
})    
//单击.li下的.deleteon类，然后接着删除.li

on和click的区别是前者可以动态添加删除本身，后者不可以删除本身

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>    <script>    $(document).ready(function(){             $('ul').on('mouseover','li',function(){        var $this=$(this);  //指向鼠标事件        $('li').removeClass('big');        $this.addClass('big');        })    })
    </script>

4.简便添加事件函数

         function addLoadEvent(func){
             var oldonload = window.onload;  //得到一个onload事件的函数
             if(typeof window.onload != 'function'){ //判断类型是否为function,typeof 返回字符串
                 window.onload = func;

             }else{
                 window.onload = function(){
                     oldonload();//调用之前覆盖的onload事件的函数      func();//调用当前事件函数
                     func();  //调用当前事件
                 }
             }
         }

　　addLoadEvent(createEle)    //createEle是函数