jquery添加自定义函数与二次封装函数

先上源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>input的隐藏显示密码</title>
    </head>
    <body>
        <input type="password" name="pwd" id="pwd" value="" />
        <button onclick="fun1()">显示密码</button>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            function fun1(){
                $('#pwd').tog('attr','type','password','text');
            }
            $.fn.attra = function(prop,value1,value2){
                $(this).attr(prop)==value1?$(this).attr(prop,value2):$(this).attr(prop,value1)
            }
            $.fn.tog = function(function1,prop,value1,value2){
                eval('$(this).'+function1+'("'+prop+'");')==value1?eval('$(this).'+function1+'("'+prop+'","'+value2+'");'):eval('$(this).'+function1+'("'+prop+'","'+value1+'");')
            }
        </script>
    </body>
</html>

这个是做了一个密码框 查看密码的demo

圈重点

1.自己封装jquery函数

　　$.fn.tog = function（）{}

　　这种声明一个函数 调用对象必须是JQ对象 如果想继续链式操作 可以加上return this;

2.参数是函数 给函数传参

function aaa(fun1,value1){
    fun1(value1)
    //fun1 为函数  value1 为fun1调用的参数
}

如果封装的函数是一个window 对象的函数 也就是说 不是一个对象的方法时 这么做是一点问题都没有的

但是我要封装的是一个JQ函数 JQ函数如果当作一个参数传进来的时候对象就会变成window 

就算连对象一起传进来  aaa($('#aaa').attr,1) 函数内调用的时候也是会报错的

解决办法就是 把函数名作为字符串传过来 当函数内调用的时候转换就也可以了

转换函数 eval

eval('$(this).'+function1+'("'+prop+'");')

把整个调用函数都拼成字符串 当作参数传给eval 

3. 我定义的函数的使用说明

tog 函数是指在两个参数之间取反  使用 类似于 attr('type','text')  css()这种第一个函数传类型 第二个参数传值的情况

eg :$('#pwd').tog('attr','type','password','text'); 当 attr type 为text时 将 type转换成 password  当type 为password时转换成text

　  $('#pwd').tog('css','display','block','none');

 

posted @ 2018-10-11 15:42  Charles王志会  阅读(285)  评论(0)    收藏  举报