jQuery基础（一）

最新推荐文章于 2025-04-20 17:56:16 发布

原创最新推荐文章于 2025-04-20 17:56:16 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#基础

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了jQuery中显示与隐藏、淡入淡出、滑动等常见效果的使用方法及语法，包括如何利用$.ready确保DOM加载完成后再执行操作，以及如何通过$.hide、$.show、$.toggle、$.fadeIn、$.fadeOut、$.fadeToggle、$.slideDown、$.slideUp和$.slideToggle等方法控制DOM元素的显示与隐藏。

一：jQuery效果篇：
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
我们将 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

//简洁写法（与以上写法效果相同）:
$(function(){
   // 开始写 jQuery 代码...
});

显示与隐藏方法，是通过设置dom元素的display属性为none来实现隐藏的
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

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

$(selector).toggle(speed,callback)//开关，根据当前状态显示或隐藏。
淡入淡出
$(selector).fadeIn(speed,callback);淡入（出现）;
$(selector).fadeOut(speed,callback);淡出（消失）;
$(selector).fadeToggle(speed,callback);
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。;
滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”