JQuery总结------元素选择，操作，特效动画

末蓝、 2022-06-08 03:50 238阅读 0赞

作为一名后端开发，怎么可以不懂点前端~~~  
这里将常用的JQuery函数进行了一些总结

# 1.什么是jquery? #

总的来说，jQuery 是一个 JavaScript 函数库。  
jQuery 库包含以下特性：（忽略废话。。因为真的不知道怎么解释）

<table> 
 <thead> 
  <tr> 
   <th align="center">作用</th> 
   <th align="center">简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">HTML 元素选取</td> 
   <td align="center">选择HTML元素</td> 
  </tr> 
  <tr> 
   <td align="center">HTML 元素操作</td> 
   <td align="center">对选择的元素进行操作</td> 
  </tr> 
  <tr> 
   <td align="center">CSS 操作</td> 
   <td align="center">用于改变HTML元素css属性—-$(“p”).css(“background-color”,”red”);</td> 
  </tr> 
  <tr> 
   <td align="center">HTML 事件函数</td> 
   <td align="center">各类事件函数，例如click等</td> 
  </tr> 
  <tr> 
   <td align="center">JavaScript 特效和动画</td> 
   <td align="center">各类JS特效</td> 
  </tr> 
  <tr> 
   <td align="center">HTML DOM 遍历和修改</td> 
   <td align="center">操控DOM，很有用</td> 
  </tr> 
  <tr> 
   <td align="center">AJAX</td> 
   <td align="center">实现AJAX，相对于JS ajax方便了很多</td> 
  </tr> 
  <tr> 
   <td align="center">Utilities</td> 
   <td align="center">工具函数</td> 
  </tr> 
 </tbody> 
</table>

下面详细说说：

## 1.HTML选取 ##

选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

//公式
    $(selector).action()
    //$:表示这是个是Jquery
    //selector:表示选择什么HTML元素
    //action:表示执行的操作

*  selector:

#### 1）jQuery 元素选择器： ####

可以使用 CSS 选择器来选取 HTML 元素  
例如：

//元素选择器
    $("p").action()
    //类选择器
    $(".class").action()
    //id选择器
    $("#id").action()
    //交集选择器
    $("p#id").action()
    //并集选择器
    $("p,class").action()
    //后代选择器
    $("p class").action()
    //子元素选择器
    $("p>class").action()
    //相邻兄弟选择器
    $("p+class").action()
    //通用兄弟选择器
    $("p~class").action()
    //还有序选择器，属性选择器等暂时不说

#### 2)jQuery 属性选择器 ####

jQuery 使用 XPath 表达式来选择带有给定属性的元素。  
例如：

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
    //这些语法比较多，有机会开单章。。。

#### 3）jQuery CSS 选择器 ####

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

//把p标签的背景色该为yellow
    $("p").css("background-color","yellow");

## 2.JQuery事件处理格式 ##

jQuery 事件处理方法是 jQuery 中的核心函数。  
是指的是当 HTML 中发生某些事件（触发）时所调用的方法。。  
通常会把 jQuery 代码放到 部分的事件处理方法中：

例如：

<head>
    <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script>
    </head>
    //单击后，<p>的内容隐藏
    //嵌套使用

## 3.JQuery常用的特效动画 ##

#### 1.隐藏，显示 ####

<table> 
 <thead> 
  <tr> 
   <th>隐藏</th> 
   <th align="left">显示</th> 
   <th align="left">切换</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hide()</td> 
   <td align="left">show()</td> 
   <td align="left">toggle()</td> 
  </tr> 
 </tbody> 
</table>

$("#id").click(function(){ 
      $("p").hide();
    });
    $("#id").click(function(){ 
      $("p").show();
    });
    $("#id").click(function(){ 
      $("p"). toggle();
    });

#### 2.淡入淡出 ####

<table> 
 <thead> 
  <tr> 
   <th>淡入</th> 
   <th align="left">淡出</th> 
   <th align="left">转换（转换成另外一种）</th> 
   <th align="left">是否给定透明度</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fadeIn()</td> 
   <td align="left">fadeOut()</td> 
   <td align="left">fadeToggle()</td> 
   <td align="left">fadeTo()</td> 
  </tr> 
 </tbody> 
</table>

$(document).ready(function(){ 
      //slow代表缓慢（淡入）
      $("#id").click(function(){ 
      $("p").fadeIn("slow");
      });
      //fast代表快速（淡出）
      $("#id").click(function(){ 
      $("p").fadeOut("fast");
      });
      //3000代表毫秒
      $("#id").click(function(){ 
      $("p").fadeToggle(3000);
      });
      //给定透明度，0~1
      $("#id").click(function(){ 
      $("p").fadeTo("slow",0~1);
      }); 
    });

#### 3.滑动 ####

淡出淡入或者隐藏时怎么滑动

<table> 
 <thead> 
  <tr> 
   <th>下滑</th> 
   <th align="left">上滑</th> 
   <th align="left">切换</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>slideDown()</td> 
   <td align="left">slideUp()</td> 
   <td align="left">slideToggle()</td> 
  </tr> 
 </tbody> 
</table>

$("#id").click(function(){ 
      $("p").slideDown() ;
    });
    $("#id").click(function(){ 
      $("p").slideUp();
    });
    $("#id").click(function(){ 
      $("p").slideToggle();
    });

#### 4.jQuery 动画 ####

利用animate() 方法来创建动画

格式：
    $(selector).animate({
       params},speed,callback);

//animate:表示这是个动画
    //param:必须：定义形成动画的CSS属性
    //speed:可选：规定动画时长
    //callback:可选:规定返回的函数
    //=====================================
    //例如：左移
    $("button").click(function(){ 
      $("div").animate({left:'250px'});
    }); 
    
    //======================================
    //同时设置多个属性
    $("button").click(function(){ 
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    }); 
    //====================================
    //利用相对值设定
    $("button").click(function(){ 
      $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });
    //=====================================
    //使用队列值，就是按照顺序执行
    $("button").click(function(){ 
      var div=$("div");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow");
      div.animate({width:'100px',opacity:'0.8'},"slow");
    });
    //=====================================
    //使用其他的动画效果，这里使用了显示隐藏
    $("button").click(function(){ 
      $("div").animate({
        height:'toggle'
      });
    });

#### 5.jQuery 停止动画 ####

$(selector).stop(stopAll,goToEnd);
    //stopAll：可选：表示其他的动画序列是否继续
    //goToEnd：可选：表示是否立即结束
    
    例如：
    $(selector).stop(true,true);
    //两值均默认false

#### 6.callback停止动画 ####

回调函数，此函数的前提是动画已经完全完成

格式：
    $(selector).animate({params},speed,callback);
    例如：
    $("p").hide(1000,function(){ 
    alert("我是callback");
    });

#### 6.Chaining概念 ####

表示可以像链表一样执行多个函数,注意，是顺序执行！

例如：
    $("p").hide().show().sildeUp().slideDown();