怎么写jquery插件

时间:2021-05-01 14:47:43

1. 添加js文件到html文件中,放下面的两行到html文档底部,</body>之前。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.hello-world.js"></script>

2. jquery插件结构

(function($) {

    $.fn.helloWorld = function() {

        // Future home of "Hello, World!"

    }

}(jQuery));

3. 让插件做一些事情吧。

(function($) {

    $.fn.helloWorld = function() {

        this.each( function() {
$(this).text("Hello, World!");
}); } }(jQuery)); 在html页面中
<script>
$(document).ready( function() {
$('h2').helloWorld();
});
</script>

4. 为了使插件变得更好,使元素能够进行其他的行为

(function($) {

    $.fn.helloWorld = function() {

        return this.each( function() {
$(this).text("Hello, World!");
}); } }(jQuery));

5. 能够使插件能够传递参数

(function($) {

    $.fn.helloWorld = function( customText ) {

        return this.each( function() {
$(this).text( customText );
}); } }(jQuery)); html中的代码:
<script>
$(document).ready( function() {
$('h2').helloWorld('¡Hola, mundo!');
});
</script>

6. 自定义参数

(function($) {

    $.fn.helloWorld = function( options ) {

        // Establish our default settings
var settings = $.extend({
text : 'Hello, World!',
color : null,
fontStyle : null
}, options); return this.each( function() {
          $(this).text( settings.text );

         if ( settings.color ) {
$(this).css( 'color', settings.color );
} if ( settings.fontStyle ) {
$(this).css( 'font-style', settings.fontStyle );
}
      });

 } }(jQuery));
html中的代码:
$('h2').helloWorld({
text : 'Salut, le monde!',
color : '#005dff',
fontStyle : 'italic'
});

7. 添加回调方法

(function($) {

    $.fn.helloWorld = function( options ) {

        // Establish our default settings
var settings = $.extend({
text : 'Hello, World!',
color : null,
fontStyle : null,
complete : null
}, options); return this.each( function() {
          $(this).text( settings.text );

         if ( settings.color ) {
$(this).css( 'color', settings.color );
} if ( settings.fontStyle ) {
$(this).css( 'font-style', settings.fontStyle );
}
        if ( $.isFunction( settings.complete ) ) {
settings.complete.call( this );
}
      });

 } }(jQuery));
html中的代码:
$('h2').helloWorld({
text : 'Salut, le monde!',
color : '#005dff',
fontStyle : 'italic',
complete : function() { alert( 'Done!' ) }
});