[jQuery实战]聊聊jQuery中的那些事

绝地灬酷狼 2022-04-15 23:58 265阅读 0赞

这几天研究了一下jQuery,来聊聊

<table> 
 <tbody> 
  <tr> 
   <td><font> jQuery是什么以及我们为什么要用</font></td> 
  </tr> 
 </tbody> 
</table>

jQuery(即JavaScript Query)是一个JavaScript函数库  
但是既然有JavaScript了,我们为什么还要用jQuery呢?原因大概有以下几个方面:

*  轻量级  
    
    
     *  压缩包大小不到30kb
 *  强大的选择器  
    
    
     *  不仅支持CSS里所有选择器,还有自己独有的选择器
 *  DOM操作封装  
    
    
     *  jQuery封装了大量常用的DOM操作,使用起来很方便
 *  兼容性好  
    
    
     *  jQuery能够兼容当前主流浏览器,除此之外还修复了一些浏览器之间的差异
 *  开源  
    
    
     *  作为程序员,最喜欢的事情是什么?不是收费,而是开源.jQuery就是开源的,任何人都可以自由使用,并提出自己的意见
 *  可能是基于以上原因,很多大公司都在使用jQuery,比如Google,Microsoft,IBM等.所以,我们有必要来聊聊jQuery如何使用这个问题. 
    
    <table> 
     <tbody> 
      <tr> 
       <td><font> jQuery如何使用</font></td> 
      </tr> 
     </tbody> 
    </table>
    
    1,隐藏与显示:
    
        隐藏:$(selector).hide(speed,callback);
        显示:$(selector).show(speed,callback);
        可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
        可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
    
    但是有时候,对于一个内容,可能需要切换hide()和show()方法,怎么办呢?写if判断可以,但是jQuery提供了一个更简单的方法:
    
        $(selector).toggle(speed,callback);
        参数speed和callback是可选参数
        只需要这样一行代码,便可实现show和hide方法的切换
    
    2,淡入淡出:
    
        淡入元素:$(selector).fadeIn(speed,callback);
        淡出元素:$(selector).fadeOut(speed,callback);
        可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
        可选的 callback 参数是滑动完成后所执行的函数名称。
    
    隐藏与显示有一个方法toggle可以实现两者切换,同样淡入淡出也有一个方法,可以实现两者切换
    
        $(selector).fadeToggle(speed,callback);
        参数同样是可选
    
    3,滑动
    
        向下滑动元素:$(selector).slideDown(speed,callback);
        向上滑动元素:$(selector).slideUp(speed,callback);
        向下向上切换:$(selector).slideToggle(speed,callback);
        可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
        可选的 callback 参数是滑动完成后所执行的函数名称。
    
    4,动画-animate方法
    
        $(selector).animate({params},speed,callback);
        必需的 params 参数定义形成动画的 CSS 属性。
        可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
        可选的 callback 参数是动画完成后所执行的函数名称。
        其中animate几乎可以用来操作所有css属性
    
    5,取值赋值操作:
    
        取值:
        第一种方式:
        $('#元素 option:selected').text();     //选中的文本
        $('#元素 option:selected') .val();    //选中的值
        第二种方式:
        $("#元素").find("option:selected").text();      //选中的文本
        $("#元素").find("option:selected").val();       //选中的值
        
        赋值:
        第一种:
        $("#Type  option:["value='0']").val("0");
        第二种:
        $("#Type").val("0");
    
    6,添加元素:
    
        $("元素").append()      在被选元素的结尾插入内容
        $("元素").prepend()     在被选元素的开头插入内容
        $("元素").after()       在被选元素之后插入内容
        $("元素").before()      在被选元素之前插入内容
    
    7,删除元素:
    
        $("元素").remove()     删除被选元素（及其子元素）
        $("元素").empty()      从被选元素中删除子元素
        其中,remove() 方法也可接受一个参数，允许对被删元素进行过滤
        比如,删掉 class="a" 的所有 <p> 元素：
        $("p").remove(".a");
    
    8,遍历:
    
        遍历祖先:
        $("元素").parent()     //返回被选元素的直接父元素
        $("元素").parents()   //返回被选元素的所有祖先元素
        $("元素").parentsUntil()   //返回介于两个给定元素之间的所有祖先元素
        比如,返回介于 <span> 与 <div> 元素之间的所有祖先元素:
        $("span").parentsUntil("div");
    
    9,过滤:
    
        $("元素").first()     //返回被选元素的首个元素
        $("元素").last()      //返回被选元素的最后一个元素
        $("元素").eq()       //返回被选元素中带有指定索引号的元素
        $("元素").filter()    //匹配的元素会被返回,不匹配的元素将会从集合中删除
        比如:带有类名 "url" 的所有 <p> 元素：$("p").filter(".url");
        $("元素").not()     //返回不匹配标准的所有元素
        比如:返回不带有类名 "url" 的所有 <p> 元素：$("p").not(".url");
    
    <table> 
     <tbody> 
      <tr> 
       <td><font> 最后来张导图</font></td> 
      </tr> 
     </tbody> 
    </table>
    
    总觉得一张图,比上面的文字来的更加直接准确一些,所以最后上一张我梳理的导图(个人观点,如有偏颇之处,还望指出):  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70]  
    想说的大概就这么多了,感谢您的阅读~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70]: /images/20220416/e292680b837e4e38bdfedd6a94d3bfd5.png