34-JQuery一

最新推荐文章于 2024-10-17 09:40:47 发布

皮卡卡卡

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量101

点赞数

分类专栏： jquery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_44808878/article/details/114973139

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第三十四章.JQuery一

jQuery是一个有原生javascript写成的插件
解决了什么问题？
1. 简化了一些常用的API，使用起来更方便
2. 自带遍历，极大的简化了特效的开发
3. 极大的简化了DOM操作
jQ的使用率相对以前来说少了很多
1. 前端开发框架流行
2. css3的流行 ……
版本：
1. 1.x.x 兼容所有浏览器
2. 2.x.x 不兼容低版本IE，摒弃一些老旧的API
3. 3.x.x 不兼容低版本IE，在2的基础上继续优化API，引入新的动画引擎需要兼容所有浏览器，选择最高版本的 1.x.x 不需要兼容低版本ie，选择最高版本的 3.x.x
占用两个全局变量

    /*
    * 占用两个全局变量
    *   $
    *   jQuery
    *
    * */

    console.log($);//ƒ (e,t){return new S.fn.init(e,t)}
    console.log(jQuery);//ƒ (e,t){return new S.fn.init(e,t)}

JQ对象

<div id="wrap"></div>

<script>
 console.log($("#warp"));//s.f.init [div#warp]
    
  //思考：打印可以看出它得到是一个对象，这样得到不是一个构造函数，用new去完成的嘛？
    
  /*
  function $(){
  	retuen Init();
  }
  
  class Init(){
  
  }
  
  //这里$其实可以理解为是个入口，真正取实例化的的init
  */
</script>

DOM对象 / JQ对象

  <div id="wrap"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>

    /*
    * $()的参数
    *   选择器字符串
    *   DOM对象 / DOM对象列表
    * */
    
    $("#wrap").style.color = 'red'; // Cannot set property 'color' of undefined
    //说明$("#wrap").style是个undefined  
      
    // jQ对象 -- 要使用jQ自己定义好的APi来达到操作页面的目的
    console.dir( $("#wrap a") );

    // DOM对象 -- 使用原生js提供DOM API来达到操作页面的目的
    console.dir( document.querySelectorAll("#wrap a") );//里面原型是HTMLDivElement
  
  </script>

JQ强大的自带遍历

<div id="wrap">
    <a href="">11111</a>
    <a href="">22222</a>
    <a href="">33333</a>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

//原生写法
document.querySelectorAll("#wrap a").forEach(n=>{
    n.style.color = "red";
});
      
//JQ写方法      
$("#wrap a").css("color","pink");
    
</script>

DOM对象与JQ对象的转换

    /*
    * $()的参数
    *   选择器字符串
    *   DOM对象 / DOM对象列表
    *    
    *
    * jQ对象 --> DOM对象
    *   通过下标取值
    *
    * DOM对象 --> jQ对象
    *   $( DOM对象/DOM对象列表 )
    **/

 //从jq对象取出DOM对象
     $("#wrap a")[1].style.color = "red";
     $("#wrap a").get(1).style.color = "red";

    let a = document.querySelectorAll("#wrap a");
    // let a = document.getElementById("wrap");
    console.log( $(a) ); //不管是数组，还是单个的DOM对象 都可以鸭 比较方便
    $(a).css("color","pink");

attr

<div id="wrap"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
 /*
  * attr
  *   操作自定义标签属性
  * removeAttr
  * */
   
    //字符串传参  单条写法
    $("#wrap").attr("pika","123456");  
    //<div id="wrap" pika="123456"></div>
  
    //对象传参  多条写法
    $("#wrap").attr( "goudan", ()=>{
        pika: "123",
        ayuan: "456"  
    } );
    //<div id="wrap" pika="123" ayuan="456"></div>
    
     $("#wrap").attr( "goudan", ()=>{
      let x= 10;
      let y= 20;
      return x+y;
    } );
    //<div id="wrap" goudan="30"></div>
    
    $("#wrap").attr({
      pika() {
        return "aaaa";
      },
      ayuan(){
        return "bbbb";
      }
    });
    //<div id="wrap" pika="aaaa" ayuan="bbbb"></div>
    
    
  /*jq设计特点：
   *   设置键值对的方式
   *   值可以用带返回的函数代替  
   **/  
</script>

<div id="wrap1"></div>

//假若提前定义好标签
<div id="wrap2" pika="皮卡" mint="薄荷"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
    //传入两个值，表示设置
    console.log( $("#wrap1").attr("pika","123456") );//<div id="wrap" pika="123456"></div>
    
    //传入一个值，表示获取
    console.log( $("#wrap2").attr("pika") );//皮卡  
    
    //removeAttr 删除标签
    console.log( $("#wrap2").removeAttr("mint"));//<div id="wrap2" pika="皮卡"></div>
    
</script>

prop

<div id="wrap" pika="皮卡"></div>

<script>
    /* prop
        操作合法标签属性
     	  removeProp
     */
    
     /*$("#wrap").prop("title","哈哈哈");

    $("#wrap").attr("pika","asd");*/
 
//当获取同一个选择其的时候，可以定义一个变量 $wrap来获取 简写    
let $wrap = $("#wrap");
    
    $wrap.prop("title","哈哈哈");//<div id="wrap" pika="皮卡" title="哈哈哈"></div>

    $wrap.attr("pika","asd");//<div id="wrap" pika="asd" title="哈哈哈"></div>
    
    $warp.removePorp("pika");//<div id="wrap" title="哈哈哈"></div>
    
</script>

addClass

<div id="wrap">
    <p></p>
    <p></p>
    <p></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

  <script>  
	/*
    * addClass
    * removeClass
    * toggleClass
    * */

    let $wrapP = $("#wrap p");

    $wrapP.addClass("goudan");//<p class="goudan"><p class="goudan"><p class="gooudan"></p>
      
</script>

 <div id="wrap"></div>
  <input type="text">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

  <script>

    /*
    * html
    * text
    * val
    * */

    $("#wrap").html("<b>加粗标签</b>");
    $("#wrap").text("<b>加粗标签</b>");

    $("input").val("输入框");

    console.log($("#wrap").html());//文字"加粗标签"加粗了
    console.log($("#wrap").text());//<b>加粗标签</b>
    console.log($("input").val());//获取文本框的内容 文本框

  </script>

总结-属性
1. attr
2. removeAttr
3. prop
4. removeProp
5. addClass
6. removeClass
7. toggleClass
8. html
9. text
10. val
CSS

  <div id="wrap"></div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

  <script>
    /*
    * css
    * */

    // $("#wrap").css("width","100px");
    $("#wrap").css({
      width : 100,//不需要加单位，默认添加px
      height : 100,
      backgroundColor : "pink"
    });

    console.log($("#wrap").css("backgroundColor"));//rgb(255, 192, 203)

  </script>

offset

 <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    #wrap{
      position: relative;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #wrap .nav{
      position: absolute;
      width: 100px;
      height: 100px;
      margin-top: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div class="nav"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

     console.log( $("#wrap .nav").offset() );//{top: 20, left: 0}

    $("#wrap .nav").offset({
      top : 12,
      left : 50
    });
      
    console.log( $("#wrap .nav").offset() );//{top: 12, left: 50}

      //自动计算，自动加单位，很舒服啊
  </script>

srcollTop

<body style="height: 2000px">
  <div></div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    setTimeout(()=>{
      $("html,body").scrollTop(200);
    },2000);
      //0.2s后回到顶部
  </script>

宽高

<style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    #wrap{
      width: 100px;<!--width: 20%-->
      height: 120px;
      padding: 10px 20px;
      border: 5px solid red;
      margin: 2px 3px;
    }
  </style>
</head>
<body>
  <div id="wrap"></div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    /*
    * width
    * height
    *
    * innerWidth
    * innerHeight
    *
    * outerWidth
    * outerHeight
    *
    * */

     //console.log($("#wrap").css("width"));//100px

     //console.log( $("#wrap").width() );//不传参数获取width的值 没有单位的数字 100
     //假若width： 20%
     //console.log( $("#wrap").width() );//不传参数获取width的值 160
     
     //console.log( $("#wrap").width( 200 ));//设置宽为200px

     console.log($("#wrap").innerWidth());//获取 width(100)+左右padding(20+20)=140 
     $("#wrap").innerWidth(200);

     console.log($("#wrap").outerWidth());//获取 width(100)+padding(20+20)+border(5+5) =150
    $("#wrap").outerWidth(200)

  </script>

总结：API

width
height
innerWith
innerHeight
outerWith
outerHeight

JQ自己的筛选 eq

<div id="wrap">
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    let $p = $("#wrap p");
    // $p.css("color" , "red");
    $p.eq(1).css("color",'pink');//222 变粉色

  </script>

链式操作

<div id="wrap">123</div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    /*
    * jq设计特性 -- 链式操作
    *   几乎所有 非获取功能 的函数的返回值都是jq对象本身
    *
    * */
    // console.log($("#wrap").html()); //123
      
    // console.log($("#wrap").html("新的内容"));//r.fn.init [div#wrap]
    //打印看到 函数的返回值都是jq对象本身 那么 就可以.操作 狂点 
    $("#wrap")
      .html("新的内容")
      .css("color",'red')
      .width(200)
      .addClass("goudan");
//<div id="wrap" class="goudan" style="color: red; width: 200px;">新的内容</div>

     console.log($("#wrap") === $("#wrap")); //false  两次创建的jq对象实例 不等 

    let $wrap = $("#wrap"); //建立引用关系
    console.log($wrap === $wrap);//true

  </script>