组件编写1-----使用JQ生成组件

最新推荐文章于 2024-01-14 15:39:02 发布

a263531947

最新推荐文章于 2024-01-14 15:39:02 发布

阅读量1.5k

点赞数 1

文章标签： js JQ

本文链接：https://blog.csdn.net/a263531947/article/details/52971830

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件编写2—–使用方法生成组件

组件编写3—–对象生成组件

在JQ中添加一个方法，我们需要把这个方法绑定到JQ的$.fn对象下面，这样我们就可以像调用JQ的方法一样使用它。
下面的例子是在添加JQ新方法addBg，为对象添加背景

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ添加新方法</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
.text{margin:10px;}
</style>
<script>
//在JQ中添加新方法addBg
$.fn.addBg = function(color){
    this.css("background",color);
    return this;   //返回该对象，让JQ可以继续链式调用
}
</script>
</head>
<body>
<div class="text">123</div>
<button id="btn">改变背景色</button>
<script>
$("#btn").click(function(){
    $(".text").addBg("red");
})
</script>
</body>
</html>

这里写图片描述
addBg 里面的this是一个JQ对象来的，所以可以直接使用JQ的方法，执行完addBg方法后，应该执行return this;这样可以继续使用JQ的链式调用。

我们在编写一个插件的时候，往往要做的事件很多，而且还需要提供接口，让初始化后的组件可以调用。使用JQ初始化插件，其实它是在该方法中先初始化一个组件对象，再把这个对象return出去，外部接收后进行调用。
下面写一个下拉框的组件。

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>组件开发1----jq绑定</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
.demo{margin:10px;}
</style>
<script>
//添加插件
jQuery.fn.extend({
    selection : function(option){
        var $that = this;
        function dropList(){
            //拼接结构
            function _struct(){
                var str = '<select class="r-select">';
                for(var i=0;i<option.data.length;i++){
                    if(option.default == i){
                        str += '<option selected=selected value="'+ option.data[i] +'">'+ option.data[i] +'</option>';
                    }else{
                        str += '<option value="'+ option.data[i] +'">'+ option.data[i] +'</option>';
                    }
                }
                str += '</select>';
                $that.empty().append(str);
            }
            function _bind_Event(){
                //下拉框改变时，执行回调
                $that.delegate(".r-select","change",function(){
                    option.selectBack && option.selectBack.call($(this)[0],$(this).val());
                });
            }
            //改变当前值
            function _change(val){
                var obj = $that.find('.r-select option[value="'+ val +'"]');
                obj.prop("selected","selected");
                option.selectBack && option.selectBack.call(obj.closest(".r-select")[0],obj.val());
            }
            function _init(){
                _struct();  //初始化时生成结构
                _bind_Event();  //绑定事件
            }
            _init();
            return {
                change : _change    //返回一个接口，让用户通过这个接口改变下拉框的值
            }
        }
        return dropList();  //执行方法，并返回给外部使用
    }
})
</script>
</head>

<body>
<div class="demo" id="select1"></div>
<div class="demo" id="select2"></div>
<script>
var data = ["选择1","选择2","选择3","选择4","选择5"];
//选择后的回调
function callBack(data){
    console.log("现在的选择是: " + data);
    console.log("对象: ",this);
}

//初始化
var mySelect1 = $("#select1").selection({
    'data' : data,
    default : 0,
    selectBack : callBack
});
var mySelect2 = $("#select2").selection({
    'data' : data,
    default : 0,
});

window.setTimeout(function(){
    mySelect1.change("选择3");    //  改变值
},2000);

</script>
</body>
</html>