基本概念

概念：jQuery是一个快速简洁的库

下载地址： jquery.com/

基本使用

入口函数

第一种

$(function(){
....//此处是页面 DOM 加载完成的入口
})

第二种

$(document).ready(function(){
.....//此处是页面 DOM 加载完成的入口
})

顶级对象

顶级对象就是 $

jQuery对象本质是：利用$对DoM对象包装后产生的对象（伪数组形式存储）

jQuery 对象和 DOM 对象

两者区别

DOM 对象：用原生 JS 获取来的对象就是 DOM 对象

jQuery 对象：jQuery 方法获取的元素就是 jQuery 对象

注意：只有jquery对象才能使用jquery方法，dom对象只能用原生js方法

两者转换

DOM对象转换成jQuery对象

var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

jQuery 对象转换为 DOM 对象(两种)

第一种

var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

第二种

 2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

选择器

基础选择器

层级选择器

筛选选择器

筛选方法

通过一个节点找另外一个节点（前四个常用）

样式操作

操作 css 方法

参数只写属性名，则是返回属性值

$(this).css(''color'');

参数是属性名，属性值，逗号分隔

$(this).css(''color'', ''red'');

参数可以是对象形式，方便设置多组样式

$(this).css({ "color":"white","font-size":"20px"});

设置类样式方法

添加类（addClass）

$(“div”).addClass(''current'');

移除类（removeClass）

$(“div”).removeClass(''current'');

切换类（toggleClass）

$(“div”).toggleClass(''current'');

动画效果

显示隐藏

显示：show()

1、显示语法：

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

2、显示参数

1）参数都可以省略，无动画直接显示
2）speed:三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
 <button>显示</button>
<div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
<script>
    $(function() {
        $("button").click(function() {
            $("div").show(1000, function() {
                alert("我显示了");
            });
        })
        // 一般情况下，我们都不加参数直接显示就可以了
    });
  </script>
</body>

隐藏：hide()

1、隐藏语法

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

2、隐藏参数

1）参数都可以省略，无动画直接显示
2）speed:三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
 <button>显示</button>
<div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
<script>
    $(function() {
        $("button").click(function() {
            $("div").hide(1000, function() {
                alert("我隐藏了");
            });
        })
        // 一般情况下，我们都不加参数直接显示隐藏就可以了
    });
  </script>
</body>

切换：toggle()

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1、切换语法

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

2、隐藏参数

1）参数都可以省略，无动画直接显示
2）speed: 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing: (options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
 <button>显示</button>
<div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
<script>
    $(function() {
        $("button").click(function() {
             $("div").toggle(1000);
            
        })
    });
  </script>
</body>

注意：若不带参数，直接使用显示隐藏即可（show()、hide() ）

滑动

下滑效果：slideDown()

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来

1、下滑语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>下拉效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
  $(function() {
            $("button").click(function() {
                // 向下滑动出slideDown()
                $("div").slideDown();
            })
        });
  </script>
</body>

上滑隐藏：slideUp()

1、上滑语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>上滑效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
  $(function() {
            $("button").click(function() {
                // 向上滑动隐藏slideUp()
                $("div").slideUp();
            })
        });
  </script>
</body>

滑动切换：slideToggle()

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1、上滑语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>滑动切换效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
  $(function() {
             $("button").click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
  </script>
</body>

淡入淡出

淡入效果：fadeIn（）

1、淡入语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>淡入效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
      $(function() {
          $("button").click(function() {
              // 淡入 fadeIn()
              $("div").fadeIn(1000);
          })
      });
  </script>
</body>

淡出：fadeOut()

1、淡出语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>淡出效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
      $(function() {
          $("button").click(function() {
              // 淡入 fadeIn()
              $("div").fadeOut(1000);
          })
      });
  </script>
</body>

切换效果：fadeToggle（）

1、切换语法：

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

2、显示参数

1）参数都可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>淡入淡出切换效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
      $(function() {
          $("button").click(function() {
              //切换 fadeToggle()
              $("div").fadeToggle(1000);
          })
      });
  </script>
</body>

修改透明度：fadeTo（）

渐进方式调整到指定的不透明度

1、修改透明度语法：

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

2、显示参数

1）opacity 透明度必须写，取值0~1之间;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000），必须写
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>修改透明度效果</button>
  <div style="width:150px;height: 150px;background-color: blue; display: none;"></div>
  <script>
      $(function() {
          $("button").click(function() {
              //  修改透明度 fadeTo() 速度和透明度要必须写
              $("div").fadeTo(1000, 0.5);
          })
      });
  </script>
</body>

自定义动画

animate()

1、自定义动画语法

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

2、显示参数

1）params: 若想更改的延时属性，以对象形式传递，必须写，属性名可以不用带引号，若是符合属性则需要采取驼峰命名法，其余参数可以省略;
2）speed : 三种预定速度之一的字符串（“show”、“normal”、“fast”）或表示动画时长的毫秒数（如：1000）
3）easing:(options)用来指定切换的效果，默认是“swing”,可用参数“linear”
1. fn :回调函数，在动画完成时执行的函数，每个元素执行一次

3、示例

<body>
  <button>让div动起来吧！！</button>
  <div style="width:150px;height: 150px;background-color: blue;"></div>
  <script>
      $(function() {
          $("button").click(function() {
              $("div").animate({
                  left: 400,
                  top: 300,
                  opacity: .5,
                  width: 500
              }, 500);
          })
      })
  </script>
</body>

停止动画排队

停止动画排队：stop()

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

事件切换

事件切换：hover()

功能类似 css 中的伪类 :hover

语法

  hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

3、示例

<body>
  <ul class="nav">
      <li>
          <a href="#">标题1</a>
          <ul><li><a href="">列表1</a></li><li><a href="">列表2</a></li><li><a href="">列表3</a></li></ul>
      </li>
      <li>
          <a href="#">标题2</a>
          <ul><li><a href="">列表1</a></li><li><a href="">列表2</a></li><li><a href="">列表2</a></li></ul>
      </li>
  </ul>
  <script>
      $(function() {
          // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
          $(".nav>li").hover(function() {
              // stop 方法必须写到动画的前面
              $(this).children("ul").stop().slideToggle();
          });
      })
  </script>
</body>

jQuery下篇：juejin.cn/post/710135…

jQuery从入门0开始到精通选择器样式操作动画效果（上篇）

基本概念

基本使用

入口函数

顶级对象

jQuery 对象和 DOM 对象

两者区别

两者转换

选择器

基础选择器

层级选择器

筛选选择器

筛选方法

样式操作

操作 css 方法

设置类样式方法

添加类（addClass）

移除类（removeClass）

切换类（toggleClass）

动画效果

显示隐藏

显示：show()

隐藏：hide()

切换：toggle()

滑动

下滑效果：slideDown()

上滑隐藏：slideUp()

滑动切换：slideToggle()

淡入淡出

淡入效果：fadeIn（）

淡出：fadeOut()

切换效果：fadeToggle（）

修改透明度：fadeTo（）

自定义动画

animate()

停止动画排队

事件切换

事件切换：hover()