Ajax:js基于对象编程、封装jQuery库及使用

目录：

（1）Jquery库初次封装根据id获取元素

（2）JQuery页面加载完毕之后执行回调函数

（3）回顾js基于对象编程

（4）封装jQuery的的click（）函数和 html（）函数的封装

（5）封装jQuery的val（）函数用来获取文本框中的值

（6）将上面写好的jQuery库单独写到js文件中使用时引入库

（7）引入jQuery的方法步骤

以上的ajax代码都是原生的方式，无论是get、post请求代码都是重复的，有很多重复的代码，我们可以对ajax代码进行封装

（1）Jquery库初次封装根据id获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动封装JS库jQuery</title>
</head>
<body>

<script type="text/javascript">

    /*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
    /*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
    /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
    function jQuery(selector){ // selector可能是#id，也可以能是其他的选择器，例如类选择器：.class

        // 根据id获取元素
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // selector是一个id选择器
                //var domObj = document.getElementById(selector.substring(1))
               
                // 返回的dom对象
                return domObj
            }
        }

    }

    $ = 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>"
        }
    }

</script>


<button id="btn">显示信息</button>

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

</body>
</html>

点击按钮

（2）JQuery页面加载完毕之后执行回调函数

封装用来替换window.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动封装JS库jQuery</title>
</head>
<body>

<script type="text/javascript">

    /*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
    /*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
    /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
    function jQuery(selector){ // selector可能是#id，也可以能是其他的选择器，例如类选择器：.class

        // 根据id获取元素
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // selector是一个id选择器
                //var domObj = document.getElementById(selector.substring(1))
                // 升级成全局变量
                domObj = document.getElementById(selector.substring(1))
                // 返回的dom对象
                return domObj
               
            }
        }

        // 页面加载完毕之后，注册回调函数。
        if (typeof selector == "function") {
            window.onload = selector
        }
    }

    $ = 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>"
        }
    }*/



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

   

</script>

<button id="btn">显示信息</button>

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

</body>
</html>

（3）回顾js基于对象编程

js-review.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾javascript中的类的定义，对象的创建。属性的访问，方法的访问。</title>
</head>
<body>
<script type="text/javascript">
    // 在JS当中怎么定义一个类。
    function User(a, b){
        // 属性
        this.usercode = a;
        this.username = b;
        // 方法（实例方法，通过对象调用的。）
        this.doSome = function(){
            console.log(this.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.扩展的 = function(){
        console.log("打印。。。。。")
    }

    user.扩展的()
</script>
</body>
</html>

（4）封装jQuery的的click（）函数和 html（）函数的封装

ajax10.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动封装JS库jQuery</title>
</head>
<body>

<script type="text/javascript">

    /*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
    /*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
    /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
    function jQuery(selector){ // selector可能是#id，也可以能是其他的选择器，例如类选择器：.class

        // 根据id获取元素
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // selector是一个id选择器  domObj是一个dom对象
                //var domObj = document.getElementById(selector.substring(1))
                // 升级成全局变量
                domObj = document.getElementById(selector.substring(1))
                // 返回的dom对象
                //return domObj
                // 返回的jQuery对象  只有dom对象才能调用onclick（）等方法，返回jQuery就不能调用了，需要重新封装方法
                return new jQuery()
            }
        }

        // 页面加载完毕之后，注册回调函数。
        if (typeof selector == "function") {
            window.onload = selector
        }

        // 定义它的方法，定义一个html()函数，代替：domObj.innerHTML = ""
        this.html = function(htmlStr){
            domObj.innerHTML = htmlStr
        }

        //定义它的方法，定义一个click()函数，代替：domObj.onclick = function(){} 用$("#btn").click（fun）方式调用
        this.click = function(fun){
            domObj.onclick = fun
        }

        this.focus = function (fun){
            domObj.onfocus = fun
        }

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

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

    }

    $ = 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>"
        }
    }*/

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

    $(function () {
        $("#btn").click(function(){
            $("#div1").html("<font color='red'>%%%%%%%%用户名不可用%%%%%%%%%</font>")

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

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

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

        })
    })

</script>

<button id="btn">显示信息</button>

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

</body>
</html>

（5）封装jQuery的val（）函数用来获取文本框中的值

val（）函数用来替换 document.getElementById("username").value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动封装JS库jQuery</title>
</head>
<body>

<script type="text/javascript">

    /*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
    /*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
    /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
    function jQuery(selector){ // selector可能是#id，也可以能是其他的选择器，例如类选择器：.class

        // 根据id获取元素
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // selector是一个id选择器  domObj是一个dom对象
                //var domObj = document.getElementById(selector.substring(1))
                // 升级成全局变量
                domObj = document.getElementById(selector.substring(1))
                // 返回的dom对象
                //return domObj
                // 返回的jQuery对象  只有dom对象才能调用onclick（）等方法，返回jQuery就不能调用了，需要重新封装方法
                return new jQuery()
            }
        }

        // 页面加载完毕之后，注册回调函数。
        if (typeof selector == "function") {
            window.onload = selector
        }

        // 定义它的方法，定义一个html()函数，代替：domObj.innerHTML = ""
        this.html = function(htmlStr){
            domObj.innerHTML = htmlStr
        }

        //定义它的方法，定义一个click()函数，代替：domObj.onclick = function(){} 用$("#btn").click（fun）方式调用
        this.click = function(fun){
            domObj.onclick = fun
        }

        this.focus = function (fun){
            domObj.onfocus = fun
        }

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

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

        // ....

        this.val = function(v){
            if (v == undefined) {
                return domObj.value
            }else{
                domObj.value = v
            }
        }
    }

    $ = 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>"
        }
    }*/

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

    $(function () {
        $("#btn").click(function(){
            $("#div1").html("<font color='red'>%%%%%%%%用户名不可用%%%%%%%%%</font>")

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

            //获取文本框中的数据
            var username = $("#username").val()
            alert(username)

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

        })
    })

</script>

用户名：<input type="text" id="username">

<button id="btn">显示信息</button>

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

</body>
</html>

点完成：

（6）将上面写好的jQuery库单独写到js文件中使用时引入库

复制ajax10里面封装的jQuery库的代码，复制到一个js文件中：命名jQuery-1.0.0.js

function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }

   
    }
}
$ = jQuery

jQueryTest.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试我们自己编写jQuery库（jQuery本质上就是JS的库）</title>
</head>
<body>

<!--使用jQuery库的第一件事，是把jQuery库引进来-->
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>

<script type="text/javascript">
    //$(function{}) 是页面加载完毕执行回调函数
    $(function(){
        $("#btn").click(function(){
            //alert("hello")
            // 获取文本框内容
            alert($("#usercode").val())
            // 修改文本框的value
            $("#usercode").val("张三")
            // 设置div内容
            $("#mydiv").html("我们自己封装的jQuery不是也挺好吗！！！")
        })
    })
</script>

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

点击hello

点击确定：

（7）引入jQuery的方法步骤

有时候直接在项目地下复制jQuery不能正常引入js文件，在页面js文件会404

方法1: 直接引用，src地址根据自己选择用哪家的jquery来定：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

方法2：点file>settings,找到下面的：

确定之后，在web中创建js包，里面添加你的jquery：

然后在代码写：

<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>

或者

在jsp中，添加：

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

代码写：

    <script src="<%=basePath%>/js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

最后，两种方法使用这个来判断是否引入jquery成功：

<script type="text/javascript">
        if(typeof jQuery!='undefined'){
            alert("jquery加载成功")
        }else {
            alert("jquery加载失败")
        }
    </script>

Ajax:js基于对象编程、封装jQuery库及使用

猜你喜欢