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是函数