jquery经常用到的代码段

1.1jquery实现手风琴效果

 1     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 2     <script> 
 3     $(document).ready(function(){
 4              $('ul').on('mouseover','li',function(){
 5         var $this=$(this); 　　 //指向鼠标事件
 6         $('li').removeClass('big');
 7         $this.addClass('big');
 8         })
 9     })
10 
11     </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>

<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>

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

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

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

4.简便添加事件函数

 1         function addLoadEvent(func){
 2             var oldonload = window.onload;  //得到一个onload事件的函数
 3             if(typeof window.onload != 'function'){ //判断类型是否为function,typeof 返回字符串
 4                 window.onload = func;
 5 
 6             }else{
 7                 window.onload = function(){
 8                     oldonload();//调用之前覆盖的onload事件的函数      func();//调用当前事件函数
 9                     func();  //调用当前事件
10                 }
11             }
12         }

　　addLoadEvent(createEle)    //createEle是函数