jquery组件和插件写法

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

#div1{width:200px; height:200px; background:#ccc;}

</style>

<script src="jquery-1.7.2.js"></script>

<script>



$.fn.toRed = function(){

    //插件里面的this 是jquery对象

    this.css("background","red");

};



$.fn.toGreen = function(){

    //插件里面的this 是jquery对象

    this.css("background","green");

};



$(function(){

    $("#div1").toggle(function(){

        $(this).toRed();

    },function(){

        $(this).toGreen();

    });    

});

</script>

</head>



<body>



<div id="div1"></div>



</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

#div1{width:200px; height:200px; background:#ccc;}

</style>

<script src="jquery-1.7.2.js"></script>

<script>



$.fn.extend({

    toRed:function(){

        this.css("background","red");

    },

    toGreen:function(){

        this.css("background","green");

    }

});



$(function(){

    $("#div1").toggle(function(){

        $(this).toRed();

    },function(){

        $(this).toGreen();

    });    

});

</script>

</head>



<body>



<div id="div1"></div>



</body>

</html>
View Code
<!--

智能社© - http://www.zhinengshe.com/



微博:@北京智能社

微信:zhi_neng_she



最具深度的前端开发培训机构 HTML+CSS/JS/HTML5

-->





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能社</title>

<link href="css.css" rel="stylesheet" type="text/css" />

<script src="../jquery-1.7.2.js"></script>

<script src="slide.js"></script>

<script>

$(function(){

    $("#play").slide();

    $("#play2").slide();

});

</script>

</head>



<body>



<div class="play" id="play">

    <ol>

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ol>

    <ul>

        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>

    </ul>

</div>



<div class="play" id="play2">

    <ol>

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ol>

    <ul>

        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>

        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>

    </ul>

</div>

</body>

</html>
View Code
//版权 北京智能社©, 保留所有权利



$.fn.slide = function (){

    var $aBtn =this.find("ol li");

    var $oUl = this.find("ul");

    var $aLi = this.find("ul li");

    

    var iNow = 0;

    

    var timer = setInterval(next,1000);

    

    this.hover(function(){

        clearInterval(timer);

    },function(){

        timer = setInterval(next,1000);

    });

    

    function next(){

        iNow++;

        

        if(iNow == $aLi.length){

            iNow = 0;

        }

        tab();

    }

    

    

    $aBtn.mouseover(function(){

        

        iNow = $(this).index();

        tab();

    });

    

    

    function tab(){

        $aBtn.removeClass("active");

        $aBtn.eq(iNow).addClass("active");

        

        $oUl.stop().animate({top:-$aLi.height()*iNow});    

    }

};
View Code

jquery组件和插件写法

你可能感兴趣的:(jquery)