0
点赞
收藏
分享

微信扫一扫

jQuery库的初次封装

1.  AJAX代码封装  22-26

- AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。

- 接下来,手动封装一个工具类,这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字,叫做jQuery。(我这里封装的jQuery只是一个前端的库,和后端的java没有关系,只是为了方便web前端代码的编写,提高WEB前端的开发效率)

- 手动开发jQuery,源代码

E:\java学习\Ajax\course\course7\web

ajax10.html

<!--手动封装js库根据id获取元素  22-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动封装js库</title>
</head>
<body>
<script type="text/javascript">

    /*封装一个函数,通过这个函数可以获取到html页面中的节点,这个函数我给他起一个名字,叫做:jQuery*/
    /*要封装的代码是:根据id来获取元素。document.getElementById("btn")*/
    /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
    //下面这段代码是进行封装
    function jQuery(selector){

        //根据id获取元素  22
        if(typeof selector=="string"){
            // selector可能是#id,也可以能是其他的选择器,例如类选择器:.class
            if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索(也就是传过来的必须是以#号开头)
                //selector是一个id选择器
                //selector.substring(1)解释,利用substring截取字符串函数将传来的#id,截取留下id
                //var domObj = document.getElementById(selector.substring(1));
                //注意如果不写var domObj就是一个全局变量   25
                domObj = document.getElementById(selector.substring(1));
                //返回domObj
                //return domObj

                //返回jQuery对象
                return new jQuery()
            }
        }

        //页面加载完毕后注册回调函数   23
        //typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
        if(typeof selector=="function"){
            window.onload = selector
        }

        //定义一个html()函数,代替:domObj.innerHTML = ""  25
        this.html = function (htmlStr){
            //domObj全局变量
            domObj.innerHTML = htmlStr
        }

        //定义一个click()函数,代替:domObj.onclick = function(){}  25
        this.click = function (fun){
            domObj.onclick = fun
        }

        //还可以封装很多事件   25
        this.focus = function (fun){
            domObj.onfocus = fun
        }

        this.blur = function(fun) {
            domObj.onblur = fun
        }

        this.change = function (fun){
            domObj.onchange = fun
        }
        // ....

        //封装获取文本框中的用户名的value函数 ,代替domObj.value  26
        this.val = function (v){
            if(v==undefined){//如果没传参,就返回文本框的输入的
                return domObj.value
            }else{//传参了,姐把参数赋值
                domObj.value = v
            }

        }

    }

    //但是我们嫌jQuery太长,就将jQuery赋值给$符号
    $ = jQuery


//以上是封装工具类
//---------------------------------------------------------------------------------
   /* window.onload = function (){
        /!*document.getElementById("btn").onclick = function (){
            document.getElementById("div1").innerHTML = "<font color = 'red'>用户名不可用</font>"
        }*!/

        /!*jQuery("#btn").onclick = function (){
            jQuery("#div1").innerHTML = "<font color = 'red'>用户名不可用~~~</font>"
        }*!/

        $("#btn").onclick = function (){
            $("#div1").innerHTML = "<font color = 'red'>用户名不可用~~</font>"
        }
    }*/

    //把函数当作参数传走了  23
    //$(function(){})的作用是什么
    //只要你写上以上代码,就表示在页面加载完毕后,执行里面的回调函数
    /*$(function (){
        $("#btn").onclick = function (){
            $("#div1").innerHTML = "<font color = 'red'>~~~用户名不可用~~</font>"
        }
    })*/


    $(function (){
        $("#btn").click(function (){
            //  25
            //解释:$("#div1")是根据id锁定目标,然后接收一个返回值(这个返回值是一个new JQuery()就是一个
            // jQuery对象),jQuery对象里有个方法是html,是根据我么传过去的id生成的
            // 对象domObj 去调用 domObj.innerHTML = htmlStr从而执行我们传进去的html代码的
            $("#div1").html("<font color = 'red'>~~~用户名不可用</font>")

            //获取文本框中的用户名  26
            //var username = document.getElementById("username").value
            //alert(username)

            var username = $("#username").val()
            alert(username)

            //修改文本框的value   26
            //document.getElementById("username").value = "呵呵"
            $("#username").val("呵呵了~~~")
        })
    })

</script>

用户名:<input type="text" id="username">
<button id="btn">显示信息</button>
<div id="div1"></div>

</body>
</html>





2. 回顾js中的基于对象编程  24

E:\java学习\Ajax\course\course7\web

js-review.html

<!--回顾javascript中的类的定义,对象的创建,属性的访问,方法的访问  24-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾javascript中的类的定义,对象的创建,属性的访问,方法的访问</title>
</head>
<body>
<script type="text/javascript">
    //在JS当中定义一个类
    function User(usercode,username){
        //属性
        this.usercode = usercode
        this.username = username
        //方法(实例方法,通过对象调用)
        this.doSome = function (){
            console.log(username+"doSome...")
        }
        //静态方法(直接用类名调用)
        User.doOther = function (){
            console.log("user doOther....")
        }
    }

    /*User = function (usercode,username){
        //属性
        this.usercode = usercode
        this.username = username
        //方法(实例方法,通过对象调用)
        this.doSome = function (){
            console.log(username+"doSome...")
        }
        //静态方法(直接用类名调用)
        User.doOther = function (){
            console.log("user doOther....")
        }
    }*/

    //创建对象,访问对象的属性,访问对象的方法,访问静态方法
    // User(); 直接这样调用,你只是把它当做一个普通的函数去执行,不会创建对象,在堆中没有这个对象。
    // new User(); 这样调用的话,其实就是调用该类的构造方法,创建对象,并且在堆中分配空间。
    var user = new User("111","zhangsan");
    //访问属性
    alert(user.usercode+","+user.username)
    //调用方法(实例方法)
    user.doSome()
    //调用静态方法
    User.doOther()

    //后期想给某个类型阔赞方法,还可以使用prototype属性
    User.prototype.print = function (){
        console.log("打印。。。。")
    }
    user.print()

</script>

</body>
</html>

3. 将jQuery单独写到js文件中使用是引入库  27

E:\java学习\Ajax\course\course7\web

jQueryTest.html

<!--测试我们自己写jQuery库   27-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试我们自己写jQuery库</title>
</head>
<body>

<!--首先要引进来jQuery库-->
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
    $(function (){
        $("#btn").click(function (){
            //alert("hello")
            //获取文本框中的内容
            alert($("#username").val())
            //修改文本框中的内容
            $("#username").val("张三")
            
            //设置div里的内容
            $("#mydiv").html("我们自己封装的jQuery")
        })
    })
</script>

<button id="btn">hello</button><br>
用户代码:<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>

E:\java学习\Ajax\course\course7\web\js

js库  jQuery-1.0.0.js

// 将jQuery单独写到js文件中使用是引入库  27

/*封装一个函数,通过这个函数可以获取到html页面中的节点,这个函数我给他起一个名字,叫做:jQuery*/
/*要封装的代码是:根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){

    //根据id获取元素  22
    if(typeof selector=="string"){
        // selector可能是#id,也可以能是其他的选择器,例如类选择器:.class
        if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索(也就是传过来的必须是以#号开头)
            //selector是一个id选择器
            //selector.substring(1)解释,利用substring截取字符串函数将传来的#id,截取留下id
            //var domObj = document.getElementById(selector.substring(1));
            //注意如果不写var domObj就是一个全局变量   25
            domObj = document.getElementById(selector.substring(1));
            //返回domObj
            //return domObj

            //返回jQuery对象
            return new jQuery()
        }
    }

    //页面加载完毕后注册回调函数   23
    //typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
    if(typeof selector=="function"){
        window.onload = selector
    }

    //定义一个html()函数,代替:domObj.innerHTML = ""  25
    this.html = function (htmlStr){
        //domObj全局变量
        domObj.innerHTML = htmlStr
    }

    //定义一个click()函数,代替:domObj.onclick = function(){}  25
    this.click = function (fun){
        domObj.onclick = fun
    }

    //还可以封装很多事件   25
    this.focus = function (fun){
        domObj.onfocus = fun
    }

    this.blur = function(fun) {
        domObj.onblur = fun
    }

    this.change = function (fun){
        domObj.onchange = fun
    }
    // ....

    //封装获取文本框中的用户名的value函数 ,代替domObj.value  26
    this.val = function (v){
        if(v==undefined){//如果没传参,就返回文本框的输入的
            return domObj.value
        }else{//传参了,姐把参数赋值
            domObj.value = v
        }

    }

}

//但是我们嫌jQuery太长,就将jQuery赋值给$符号
$ = jQuery

举报

相关推荐

0 条评论