jQuery基础（jQuery效果、属性操作）

一、效果

 

参考文档：show([speed,[easing],[fn]]) | jQuery API 中文手册显示隐藏的匹配元素。这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。 - jQuery API 中文手册http://hemin.cn/jq/show.html

1. 显示效果

show([speed,[easing],[fn]])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

         $("button")
          .eq(1)
          .click(function () {
            // $("div").hide("slow");
            $("div").show(1000, function () {
              alert(1);
            });
          });

2. 隐藏效果

 hide([speed,[easing],[fn]])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

         $("button")
          .eq(0)
          .click(function () {
            // $("div").hide("slow");
            $("div").hide(1000, function () {
              alert(1);
            });
          });

3. 隐藏显示切换效果

 toggle([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

         $("button")
          .eq(2)
          .click(function () {
            // $("div").hide("slow");
            $("div").toggle(1000, function () {
              console.log("切换一次");
            });
          });

4. 下拉滑出

 slideDown([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

          $("button")
          .eq(0)
          .click(function () {
            $("div").slideDown();
          });

5. 上拉滑动 

 slideUp([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

        $("button")
          .eq(1)
          .click(function () {
            $("div").slideUp();
          });

6. 切换下拉和上拉

 slideToggle([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

         $("button")
          .eq(2)
          .click(function () {
            $("div").slideToggle();
          });

7. 淡入效果 

 fadeIn([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

          $("button")
          .eq(0)
          .click(function () {
            $("div").fadeIn();
          });

8.淡出效果 

fadeOut([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

   $("button").eq(1).click(function () { $("div").fadeOut();});

9. 切换淡入淡出

 

fadeToggle([speed],[easing],[fn])

• speed：速度（slow、normal、fast）
  • 表示速度的毫秒数：1000、2000等等
• easing：指定切换效果
  • swing、linear
• fn：可以添加显示之后的的回调函数(随着效果执行一次)

$("button").eq(2).click(function () {$("div").fadeToggle();});

10.修改透明度

 fadeTo([speed],opacity,[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

    $("button").eq(3).click(function () {$("div").fadeTo(2000, 0.5);});

11.案例-修改透明度

  <script>
      $(function () {
        $(".wrap li").hover(
          function () {
            // 渐入调整透明度
            $(this).siblings().stop().fadeTo(400, 0.4);
          },
          function () {
            $(this).siblings().stop().fadeTo(400, 1);
          }
        );
      });
    </script>

• 页面分析：鼠标放在执行部分会单独显示当前元素，隐藏其他元素 
• 代码解析：
  • ul包裹li并在里面置放图片：设置静态页面
  • 引入jQyery文件
  • 直接利用一个切换事件：hover（over，out）：此处不了解查看文档
  • 第一个事件（over事件）设置：兄弟透明度切换为低透明度
  • 第一个事件（out事件）设置：兄弟透明度切换为正常透明度 

12.自定义动画 

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

       // 注意动态变化的基础是元素定位 
       $("button").click(function () {
          $("div").animate(
            {
              left: 200,
              top: 300,
              opacity: 0.5,
              width: 500,
            },
            500
          );
        });

13. 案例-手风琴案例

 <script type="text/javascript">
      $(function () {
        $(".king li").mouseenter(function () {
          // 1.动画变大:利用链式
          $(this)
            .stop()
            .animate({
              width: 224,
            })
            .find(".small")
            .stop()
            .fadeOut()
            .siblings(".big")
            .stop()
            .fadeIn();
          $(this)
            .siblings("li")
            .stop()
            .animate({ width: 69 })
            .find(".small")
            .stop()
            .fadeIn()
            .siblings(".big")
            .stop()
            .fadeOut();
        });
      });
    </script>

• 页面效果：鼠标 放在哪个元素上小图变大图，把其他大图变小图
• 代码解析：
  • 布置静态页面：li里面包含大图小图
  • 每一个li进行浮动设置默认尺寸是宽度盒子尺寸
  • 显示当前大盒子，隐藏当前小盒子
  • 隐藏所有大盒子
  • 给小盒子设置定位
  • 获取每一个li设置mouseenter鼠标事件：利用链式编程方法设置动画效果
    • 当前元素动动画设置盒子宽度
    • 找到小盒子淡出效果
    • 并给兄弟大盒子淡入效果

二、属性操作

  1. 设置、获取元素固有属性

获取：prop（‘属性’）

设置：prop（‘属性’，‘属性值’）

自定义属性无法通过默认获取方式获取

    //获取默认属性
   $("a").prop("href")
   //设置默认属性
   $("a").prop("name", "你好");

 

2. 自定义属性操作

获取：attr（‘属性’） 

设置：attr（‘属性’，‘属性值’）

    //获取自定义属性
    $("div").attr("data-index")
    //设置自定义属性
    $("div").attr("data-index"，"123")

3.  data()数据缓存

可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前的存放的数据都会被移除

 //设置属性
 $("span").data("uname", "anan"); 
  //获取属性
 $("span").data("uname"); 
   //直接查找data开头属性
 $("div").data("index")