JavaScript - jQuery

2019/07/29 JavaScript JQuery

jQuery 是一个 JavaScript 函数库,是一个比较常见的 JavaScript 框架。

目录

语法

$(document).ready(function(){
    ...
    $(selector).action()
    ...
});
  • $:定义 jQuery

  • ready():jQuery 入口函数, DOM 加载完毕执行,防止在文档完全加载前运行 jQuery

    简写:

      $(function(){
    
      });
    
  • selector:所选择的 HTML 元素

  • action():对元素进行的操作

选择器

语法 描述
$("*") 所有元素
$(this) 当前元素
$("p") 所有 p
$(":button") 所有 button 和 type="button" 的 input
$(".myclass") 所有 class 为 myclass 的元素
$("#div_to_hide") id 为 div_to_hide 的元素
$("p.intro") 所有 class 为 intro 的 p
$("p.first") 第一个 p
$("ul li:first") 第一个 ul 的第一个 li
$("ul li:first-child") 所有 ul 的第一个 li
$("[href]") 所有带有 href 的元素
$("a[target="_blank"]") 所有 target="_blank" 的 a
$("a[target!="_blank"]") 所有 target!="_blank" 的 a
$("tr.even") 所有偶数位置的 tr
$("tr.odd") 所有奇数位置的 tr

事件

  • 隐藏/显示

      /**
       * @speed   : 速度控制,可选 "slow"/"fast"/milliseconds
       * @callbck : 回调函数,当前事件执行完毕后执行
       */
      $(selector).hide(speed, callbck);
      $(selector).hide(speed, callbck);
      $(selector).toggle(speed, callbck);         // 隐藏已显示的和显示已隐藏的元素
    

    Nice to see ya!

  • 淡入/淡出

      /**
       * @speed   : 速度控制,可选 "slow"/"fast"/milliseconds
       * @callbck : 回调函数,当前事件执行完毕后执行
       * @opacity : 淡入淡出效果
       */
      $(selector).fadeIn(speed, callbck);
      $(selector).fadeOut(speed, callbck);
      $(selector).fadeToggle(speed, callbck);
      $(selector).fadeTo(speed, opacity);         // 淡入淡出至指定透明度
    

    Nice to see ya!

  • 滑动

      $(selector).slideDown(speed, callback);     // 下滑
      $(selector).slideUp(speed, callback);       // 上滑
      $(selector).slideToggle(speed, callback);
    

    Nice to see ya!

  • 动画

      /**
       * 使用动画
       * @params  : 形成动画的 css 属性
       */
      $(selector).animate({
          param1: value,
          param2: value,
          ...
      }, speed, callback);
      /**
       * 停止动画
       * @stopAll : 停止动画队列,默认为 false
       * @goToEnd : 立即完成当前动画,默认为 false
       */
      $(selector).stop(stopAll, goToEnd);
    
正在加载今日诗词....

Access Statistics

Table of Contents