jQuery基础01：选择器 + 样式操作 + 动画

最新推荐文章于 2023-05-31 08:33:36 发布
最新推荐文章于 2023-05-31 08:33:36 发布
阅读量402 收藏
点赞数
分类专栏： # jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666644/article/details/109278301
版权

1.1. jQuery 介绍

1.1.3 jQuery的优点

  1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
  2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
  3. 链式编程、隐式迭代。
  4. 对事件、样式、动画支持，大大简化了DOM操作。
  5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
  6. 免费、开源。

1.2. jQuery 的基本使用

1.2.1 jQuery 的下载

​ jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

1.2.2. 体验jQuery

​ 步骤：

  • 引入jQuery文件。
  • 在文档最末尾插入 script 标签，书写体验代码。
  • $(‘div’).hide() 可以隐藏盒子。

1.2.3. jQuery的入口函数

​ jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

​ 总结：

  1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
  2. 相当于原生 js 中的 DOMContentLoaded。
  3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
  4. 更推荐使用第一种方式。

1.2.4. jQuery中的顶级对象$

  1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。

  2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。

    把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

1.2.5. jQuery 对象和 DOM 对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <span></span>
  <script>
    // 1. DOM 对象：用原生js获取过来的对象就是DOM对象
    var myDiv = document.querySelector('div'); // myDiv 是DOM对象
    console.dir(myDiv);

    /*
       jQuery对象：用jquery方式获取过来的对象是jQuery对象
       本质：通过$把DOM元素进行了包装
    */
    $('div').hide(); // $('div')是一个jQuery 对象
    console.dir($('div'));

    /*
      jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
      原生js方法：
        var myDiv = document.querySelector('div');
        myDiv.style.display = 'none'
      jQuery方法：$('div').hide()

      错误写法：
        myDiv.hide()
        $('div').style.display = 'none'
    */
  </script>
</body>

</html>

​ 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

  1. 用原生 JS 获取来的对象就是 DOM 对象
  2. jQuery 方法获取的元素就是 jQuery 对象。
  3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

在这里插入图片描述

1.2.6. jQuery 对象和 DOM 对象转换

​ DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

/*
  1.DOM对象转换成jQuery对象，方法只有一种:$(DOM对象) 例如：$(box)
    获取DOM对象
    把DOM对象转换为 jQuery 对象
*/
var box = document.getElementById('box');
var jQueryObject = $(box);

/*
  2.jQuery 对象转换为 DOM 对象有两种方法：index是索引号
    jQuery对象[索引值]      $('div')[index]
    jQuery对象.get(索引值)  $('div').get(index)
*/
var domObject1 = $('div')[0];
var domObject2 = $('div').get(0);

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

1.3. jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准

1.3.1. 基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号
名称用法描述
ID选择器$("#id")获取指定ID的元素
全选择器$("*")匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$(“div”)获取同一类标签的所有元素
并集选择器$(“div,p,li”)选取多个元素
交集选择器$(“li.current”)交集元素

1.3.2. 层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称用法描述
子代选择器$(“ul>li”)使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器$(“ul li”)使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

基础选择器和层级选择器案例代码

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

1.3.3. 筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

语法用法描述
:first$(“li:first”)获取第一个li元素
:last$(“li:last”)获取最后一个li元素
:eq(index)$(“li:eq(2)”)获取到的li元素中，选择索引号为2 的元素，索引号index从0开始
:odd$(“li:odd”)获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”)获取到的li元素中，选择索引号为偶数的元素

案例代码

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

1.3.4 知识铺垫

jQuery 设置样式
$('div').css('属性', '值')  $("div").css("color", "red");
jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
隐式迭代
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div>惊喜不，意外不</div>
  <div>惊喜不，意外不</div>
  <div>惊喜不，意外不</div>
  <div>惊喜不，意外不</div>
  <ul>
    <li>相同的操作</li>
    <li>相同的操作</li>
    <li>相同的操作</li>
  </ul>
  <script>
    // 1. 获取四个div元素 
    console.log($("div"));

    // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
    $("div").css("background", "pink");
    // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
    $("ul li").css("color", "red");
  </script>
</body>

</html>

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作
链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

1.3.5 筛选方法

语法用法说明
parent()$(‘li’).parent()查找父级
children(selector)$(‘ul’).children(‘li’)相当于$(‘ul>li’),最近一级（亲儿子）
find(selector)$(‘ul’).find(‘li’)相当于$(‘ul li’),后代选择器
siblings(selector)$(’.first’).siblings(‘li’)查找兄弟节点，不包括自己本身
nextAll(selector)$(’.first’).nextAll()查找当前元素 之后所有的同辈元素
prevAll(selector)$(’.last’).prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$(‘div’).hasClass(‘protected’)检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$(‘li’).eq(2)相当于$(‘li:eq(2)’),index从0开始
代码示例：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="yeye">
    <div class="father">
      <div class="son">儿子</div>
    </div>
  </div>

  <div class="nav">
    <p>我是屁</p>
    <div>
      <p>我是p</p>
    </div>
  </div>
  <script>
    // 注意一下都是方法 带括号
    $(function () {

      // 1. 父元素  parent()  返回的是 最近一级的父级元素 亲爸爸
      console.log($(".son").parent().html()); // <div class="son">儿子</div>

      /*
        2. 子元素
        (1) 亲儿子 children()  类似子代选择器  ul>li
            $(".nav").children("p").css("color", "red");
        (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
      */
      $(".nav").children("p").css("color", "red");
      $(".nav").find("p").css("color", "red");
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <ol>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li class="item">我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
  </ol>
  <ul>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
  </ul>
  <div class="current">俺有current</div>
  <div>俺木有current</div>
  <script>
    // 注意一下都是方法 带括号
    $(function () {
      // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
      $("ol .item").siblings("li").css("color", "red");

      /*
        选择第n个元素
          方法一：
            var index = 2;
            $("ul li:eq(2)").css("color", "blue");
            $("ul li:eq("+index+")").css("color", "blue");

          方法二：推荐写法
            var index = 2;
            $("ul li").eq(2).css("color", "blue");
            $("ul li").eq(index).css("color", "blue");
      */
      var index = 2;
      // (1) 我们可以利用选择器的方式选择
      // $("ul li:eq(2)").css("color", "blue");
      // $("ul li:eq("+index+")").css("color", "blue");

      // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
      $("ul li").eq(2).css("color", "blue");
      $("ul li").eq(index).css("color", "blue");

      // 3. 判断是否有某个类名
      console.log($("div:first").hasClass("current")); // true
      console.log($("div:last").hasClass("current")); // false
    });
  </script>
</body>

</html>

1.3.6 案例：淘宝服饰精品案例

思路分析:

  1. 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
  2. 需要得到当前小li 的索引号，就可以显示对应索引号的图片
  3. jQuery 得到当前元素索引号 $(this).index()
  4. 中间对应的图片，可以通过 eq(index) 方法去选择
  5. 显示元素 show() 隐藏元素 hide()

1.3.7 案例：单选按钮–排他思想

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>
  <script>
    $(function () {
      // 1. 隐式迭代 给所有的按钮都绑定了点击事件
      $("button").click(function () {
        // 2. 当前的元素变化背景颜色
        $(this).css("background", "pink");
        // 3. 其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings("button").css("background", "");
      });
    })
  </script>
</body>

</html>

1.4. jQuery 样式操作

jQuery中常用的样式操作有两种：css() 和 设置类样式方法

1.4.1. 方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

注意：css() 多用于样式少时操作，多了则不太方便

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    /*
      操作样式之css方法
        1.参数只写属性名，则是返回属性值
          console.log($("div").css("width")); // 200px
        2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
          $("div").css("width", "300px");
          $("div").css("width", 300);

        错误写法：$("div").css(height, "300px"); 属性名一定要加引号
    */
    $(function () {

      console.log($("div").css("width")); // 200px
      // $("div").css("width", "300px");
      // $("div").css("width", 300);
      // $("div").css(height, "300px"); 属性名一定要加引号

      // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
      $("div").css({
        width: 400,
        height: 400,
        backgroundColor: "red"
      })
    })
  </script>
</body>

</html>

1.4.2. 方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 150px;
      background-color: pink;
      margin: 100px auto;
      transition: all 0.5s;
    }

    .current {
      background-color: red;
      transform: rotate(360deg);
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="current"></div>
  <script>
    $(function () {

      /*
         1. 添加类 addClass()
            $("div").click(function() { $(this).addClass("current") });
         2. 删除类 removeClass()
            $("div").click(function() { $(this).removeClass("current") });
      */
      // 3. 切换类 toggleClass()
      $("div").click(function () {
        $(this).toggleClass("current");
      });
    })
  </script>
</body>

</html>

注意：

  1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。

  2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，

    不影响原先的类名。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .one {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all .3s;
    }

    .two {
      border: 10px solid pink;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="one two"></div>
  <script>
    /*
      原生js方法：覆盖原有类名
        var one = document.querySelector(".one");
        one.className = "two";
      jquery方法：在原有类名基础上修改
        $(".one").addClass("two"); // 这个addClass相当于追加类名 不影响以前的类名
        $(".one").removeClass("two"); // 删除类名two
    */
    $(".one").addClass("two");
  </script>
</body>

</html>

1.4.3. 案例：tab 栏切换

思路分析:

  1. 点击上部的li，当前li 添加current类，其余兄弟移除类。
  2. 点击的同时，得到当前li 的索引号
  3. 让下部里面相应索引号的item显示，其余的item隐藏
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }
  </style>
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价（50000）</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">
        商品介绍模块内容
      </div>
      <div class="item">
        规格与包装模块内容
      </div>
      <div class="item">
        售后保障模块内容
      </div>
      <div class="item">
        商品评价（50000）模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>
    </div>
  </div>
  <script>
    $(function () {
      // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
      $(".tab_list li").click(function () {
        // 链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
        // 2.点击的同时，得到当前li 的索引号
        var index = $(this).index();
        console.log(index);
        // 3.让下部里面相应索引号的item显示，其余的item隐藏
        $(".tab_con .item").eq(index).show().siblings().hide();
      });
    })
  </script>
</body>

</html>

1.5. jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

  • 显示隐藏：show() / hide() / toggle() ;
  • 划入画出：slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定义动画：animate() ;

注意：

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

jQuery为我们提供另一个方法，可以停止动画排队：stop()

1.5.1. 显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

建议：平时一般不带参数，直接显示隐藏即可

语法规范如下:

  1. 显示语法规范：show（[speed，[easing]，[fn]]）

    隐藏语法规范：hide([speed，[easing]，[fn]])

    切换语法规范：toggle（[speed，[easing]，[fn]]）

  2. 显示参数、隐藏参数、切换参数

    1. 参数都可以省略，无动画直接显示。
    2. speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒值
    3. easing：（Optional）用来指定切换效果，默认是 “swing”，可用参数 “linear”
    4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次
代码演示
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

1.5.2. 滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

语法规范如下:

  1. 下滑效果语法规范：slideDown([speed，[easing]，[fn]])

    上滑效果语法规范：slideUp([speed，[easing]，[fn]])

    滑动切换效果语法规范：slideToggle([speed，[easing]，[fn]])

  2. 下滑、上滑、滑动切换 效果参数

    1. 参数都可以省略，无动画直接显示。
    2. speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒值
    3. easing：（Optional）用来指定切换效果，默认是 “swing”，可用参数 “linear”
    4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次
代码演示
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

小案例：下拉菜单略（详情参看源码）。

1.5.3 淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

语法规范如下:

  1. 淡入效果语法规范：fadeIn([speed，[easing]，[fn]])

    淡出效果语法规范：fadeOut([speed，[easing]，[fn]])

    淡入淡出切换效果语法规范：fadeToggle([speed，[easing]，[fn]])

  2. 淡入效果参数

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

  3. 渐进方式调整到指定的不透明度：fadeTo([speed，opacity，[easing]，[fn]])

  4. 效果参数

    1. opacity 透明度必须写，取值 0~1之间

    2. speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）

      或表示动画时长的毫秒数值必须写

    3. easing：（Optional）用来指定切换效果，默认是 “swing”，可用参数 “linear”

    4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

代码演示
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

1.5.4 自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;

语法规范如下:

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

代码演示

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5.5 停止动画排队

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

​ 停止动画排队的方法为：stop() ;

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

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

1.5.6. 事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out)     // 其中over和out为两个函数
  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

hover事件和停止动画排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>
落花流雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2022-06-07 jQuery笔记(一) jq基本使用,引入,选择器,事件,显隐滑动淡进淡出效果,动画和停止动画,回调,链式操作
GAARA
06-07 286
1.第一个jQuery例子 2.jQuery库功能 3.script标签的简化 4.引入jQuery 5.jQuery语法 6.文档就绪事件 7.jQuery选择器 8.jQuery事件 事件：页面对不同访问者的响应 事件处理程序：当html发生某些事件时调用的方法 事件语法：与DOM事件等效的方法 9.jQuery效果 9.1.显示与隐藏 9.2.淡入淡出 9.3.滑动 10.jQuery效果：动画 10.1.animate（）可操作多个属性 10.2.animate（）可操作相对属性值 10.3.ani
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1527
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
JQuery基本知识、选择器、事件、DOM操作、动画
weixin_30788239的博客
02-10 96
基本知识： 　　Jquery是一套JS方法包也称为JS框架 前端框架 　　目前比较好用的是1.7.2版本，正常开发只需要min文件 选择器： 　　基本选择器：格式：$("XXX")　　 过滤选择器： 事件： 注：未来元素是指页面加载时没有，但有可能在操作中通过JS添加进去的元素，通过未来元素的方法对所有现有以及未来可能添加的某一些元素委托事件 DOM操作： 　　...
jQuery基础入门（选择器，常用事件，基础动画，Ajax）
qq_45596525的博客
01-04 230
文章目录前言一、jQuery是什么？二、基本语法三、选择器1.各类选择器的使用2.示例四、常用事件1.常用事件罗列2.解决名称冲突五、基础动画1.显示与隐藏2.淡入淡出3.自定义动画六、Ajax1.JQ原生版2.$.get / $.post参考资料 前言 2021第一更 提示：以下是本篇文章正文内容，下面案例可供参考 一、jQuery是什么？ jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：???? HTML 元素选取 HTML 元素操作 CSS 操作 HTML
JQuery使用方法四（事件+动画）
weixin_43765641的博客
10-01 491
注意：off括号中不写参数则为删除全部事件，如果删除某一个事件则括号传入指定值。每当鼠标移入div1范围中就触发mousemove事件。注意：在范围内移动到不同的位置也会触发。每点击一下就执行一次。3、同时绑定多个事件。4、同时添加多个事件。
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
jQuery选择器 jQuery提供了一套丰富的选择器，使得开发者可以更加方便地选取DOM元素。这些选择器主要分为以下几类： #### 1.1 基础选择器 - `$(‘#id’)`：通过ID选择器选取ID为指定字符串的元素。 - `$(‘.class...
皮卡丘：css3 + javascript + jQuery
02-14
1. **选择器**: CSS3提供了更强大的选择器，如类选择器、属性选择器和伪类，帮助精确地定位和操作页面元素。 2. **动画**: CSS3的`transition`和`animation`属性允许创建平滑的过渡效果和自定义动画，比如皮卡丘的...
jQuery+CSS3多张图片选择动画特效代码
03-20
每个图片元素应该有一个可识别的类名，以便于jQuery选择和操作。 ```html <!-- 更多图片... --> ``` 2. **CSS样式**：接下来，定义基本的CSS样式，包括未选中和选中状态的图片样式。利用CSS3的`transition`...
jQuery+CSS3动画模态窗口特效代码
03-20
CSS3是CSS（层叠样式表）的最新版本，提供了许多新的特性和功能，如动画、过渡和选择器。在模态窗口特效中，CSS3的动画和过渡属性被用来创建平滑的打开和关闭效果，如淡入淡出、滑动等。这些动画可以增强用户体验，...
jQuery+CSS3镜像文字动画垂直导航菜单特效
06-05
CSS3的动画功能通过`@keyframes`规则定义了一段动画的过程，然后可以将这个动画应用到任何选择器上。在这个特效中，我们可能会看到如下的CSS3关键帧动画定义： ```css @keyframes mirrorEffect { 0% { transform: ...
jQuery基础
01-01
jQuery 基础，包含javaScript 语法一览，有提示的Note 都是需要注意的，易出错的，
jquery基础
qq_46670673的博客
04-14 215
jquery 基础 学习目标 1.jquery概念 2.jquery的常见选择器 3.熟练掌握jquery操作节点的属性、内容、样式 4.熟练掌握jquery的文档处理、筛选 5.熟练掌握jquery的常见事件和效果 6.熟练掌握jquery的ajax 一、jquery概念 1.1 Jquery介绍 jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write
JQuery遍历
零怀念的博客
08-26 473
后代 1.find(选择器)：返回被选元素的所有后代元素集合 2.children（选择器)：返回被选元素的所有直接子元素集合（括号里可以为空） 示例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
jQuery基础知识点汇总
最新发布
heliuerya的博客
05-31 1434
class 选择器： 语法：$(".class值") 根据 class样式值 查找标签对象 class表示css中的样式，这是使用样式的名称定位dom对象。组合选择器： 语法：$("#id,.class,标签名") 是多个被选对象之间使用逗号分隔后形成的选择器，可以组合id，class，标签名等，举例：$("body" > "div");$("选择器").attr("username","张三") //设置数组中的所有dom对象的username属性值为"张三"。
Jquery基础入门
郊眠寺
09-26 731
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
JQuery 基础知识学习（详尽版）
菜鸟心声：学的不仅是技术，更是梦想！
03-13 3033
JQuery 详尽的基础知识学习jQuery 语法jQuery 选择器jQuery 选择器（大全）jQuery 事件ready()holdReady()on()off()one()其他事件案例01jQuery CSS样式案例02jQuery DOM遍历遍历父元素案例03遍历同级元素案例04遍历子元素案例05first()last()eq(number)filter(selector)not(selector)jQuery 增删元素增加元素删除元素案例06jQuery 尺寸jQuery 效果显示隐藏淡入淡出滑
jQuery学习笔记——自定义动画animate（）详细举例
weixin_41306215的博客
04-26 279
效果：点击按钮，正方体从左left=0移动到left=800，高度不断增加 到达800后缩小返回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
jQuery选择器进行选择添加和删除样式
yujingwei1001的专栏
12-11 911
$(function () {  $("a[dq='1']").each(function(){// 遍历a标签 含有dq=1的属性 if($(this).text()==$("#provinceCode").val()){ //如果值跟省份值一致  那么增加一个样式！这是加载时候就显示的 $(this).addClass("dqdq"); } }); });

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值