jQuery学习---简单封装jQuery_jqury封装-CSDN博客

本文链接：https://blog.csdn.net/lDemoni/article/details/127236131

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

<body>

<button id="btn1">学习ajax</button>
<span id="span1"></span>

<button id="btn2">学习ajax</button>
<span id="span2"></span>

<button id="btn3">学习ajax</button>
<span id="span3"></span>

<button id="btn4">学习ajax</button>
<span id="span4"></span>

<script type="text/javascript">

  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
    }

    //定义一个html函数代替：domObj.innerHTML = ""
    // function html (htmlStr){
    //     domObj.innerHTML = htmlStr
    // }

    this.html = function (htmlStr){
        domObj.innerHTML = htmlStr
    }

    //定义click函数代替 domObj.onclick = function(){}
    // function click (fun){
    //     domObj.onclick = fun
    // }
    this.click = function (fun){
        domObj.onclick = fun
    }

  }
  $ = jQuery

  //原始状态
  window.onload=function (){
    document.getElementById("btn1").onclick = function (){
      document.getElementById("span1").innerHTML = "<font color='red'>很牛逼1</font>"
    }
  }

  //封装 document.getElementById("btn1")
  window.onload=function (){
    $("#btn2").onclick = function (){
      $("#span2").innerHTML = "<font color='red'>很牛逼2</font>"
    }
  }

  //封装回调函数
  $(
      function (){
          $("#btn3").onclick = function() {
              $("#span3").innerHTML = "<font color='red'>很牛逼3</font>"
          }
      }
  )

  //封装.innerHtml
  $(function (){
      $("#btn4").click(function() {
          $("#span4").html("<font color='red'>很牛逼4</font>")
      })
  })


</script>

</body>
</html>

注意注意：js中的三个回调函数只能生效最后一个，测试时要把其余注释