T O P

[资源分享]     了解jQuery

  • By - 楼主

  • 2021-03-28 14:00:01
  • jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库

    jQuery下载地址:

    http://jquery.com/download/
    https://www.bootcdn.cn/jquery/

    使用过程中,具体参考 API 应用手册

    https://jquery.cuishifeng.cn/

    • jquery极大的简化了DOM操作,让编程变得更加简单高效
    jQuery常见操作
    • $()方法:在DOM操作中,jquery封装了一个获取元素的方法$()

      • 在jquery中,只有一个全局变量$,这也是jQuery的特点,这样避免了全局变量的污染

      • 最开始变量不叫做$,叫做jQuery()方法,在库中两个名字是并存的,都可以使用。

    $("p").css("background-color","red");
    jQuery("p").css("background-color","red");
    
    • 经常出现的错误:$未定义(jQuery文件引入错误)

    jquery对象

    • 通过$()方法获取到的内容叫做jQuery对象

      • jQuery对象内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate()等方法都是jQuery()对象的方法。

      • 通过$()获取的元素是一组元素,进行操作时是批量操作。

     <style>
        p{
            width: 80px;
            height: 50px;
           }
     </style>
    
    <body>
       <p>1</p>
       <p>2</p>
       <p>3</p>
       <p>4</p>
       <p>5</p>
       <p>6</p>
       <p>7</p>
       <p>8</p>
    
      <script src="../jq/jquery-1.12.4.min.js"></script>
      <script>
       //通过 $()方法 获取到的是jQuery对象
       //获取的是一组html的元素,会进行批量操作
      $("p").css("background-color","skyblue")
      $("p").html("hello");
      $("p").animate({"width" : 100},1000);
      
     </script>
    </body>
    
    • jQuery对象得到后,只能使用jQuery对象的方法,不能使用原生js元素对象的方法
    console.log($("p").innerHTML);//undefined
    
    • 原生JS对象也不能使用jQuery的方法
    
    var p = document.getElementsByTagName("p");
    p[0].html("change this p");//报错,没有html这个方法
    
    
    • jQuery对象实际是一个类数组对象,内部包含所有的获取的原生JS对象,以及大量的jQuery的方法和属性
    console.log($("p"));
    

    jQuery对象中原生Js对象的个数

    • $().length
    console.log($("p").length);
    
    • $().size()
    console.log($("p").size())
    
    转换
    • jQuery转原生:直接利用数组下标方式,得到jQuery封装的原生对象
    var $p = $("p");
    //通过jQuery获取p对象(类数组对象,包含所有p,所以后续使用通过下标调用即可)
    $p[0].innerHTML = "112233";//使用原生js方法
    
    • 原生转jQuery:将原生对象用$()方法包裹即可
    //原生js对象转换jQuery对象
    var op = document.getElementsByTagName("p")[0];
    $(op).css("background-color","red");
    //使用$()包裹op,将op获取的对象作为一个参数,传入jQuery对象中,这样就可以使用jQuery对象的方法了
    
    

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册