---

一、关于jQuery

  什么是jQuery ？

• jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

• 开始使用 jQuery 可能很容易，也可能具有挑战性，这取决于您对 JavaScript、HTML、CSS 和一般编程概念的经验。 
• 要知道的一件重要事情是 jQuery 只是一个 JavaScript 库 。 jQuery 的所有功能都是通过 JavaScript 访问的，因此对 JavaScript 有深入的了解对于理解、构建和调试代码至关重要。 虽然定期使用 jQuery 可以随着时间的推移提高您对 JavaScript 的熟练程度，但如果不了解 JavaScript 的内置结构和语法，就很难开始编写 jQuery。

  jQuery的特点  

1. 轻量级。核心文件才几十kb，不会影响页面加载速度。

2. 跨浏览器兼容，基本兼容了现在主流的浏览器。

3. 链式编程、隐式迭代。

4. 对事件、样式、动画支持，大大简化了DOM操作。

5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。

6. 免费、开源。

  下载  

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

各个版本的下载：jQuery CDN

二、初步使用

1. 引入

<script type="text/javascript" src='js/jquery-3.6.0.min.js'></script>

2. 准备工作

相当于JS中的 window.onload(function( ){ })

  方式一  

$(document).ready(function(){

                alert("页面加载完成");

})

  方式二  

$(function () {  

   alert("页面加载完成");

}) ;

三、 jQuery选择器

  第一节：基础选择器  

语法：$("选择器")  里面写css选择器如：

1：基础选择器

$("#demo")    ：获取id

$(“.demo”)     : 获取类选择器

$(“div”)        : 获取标签选择器

$(“div,p,span”)   :获取多个元素(并集选择器)

$(“div.demo”)    :获取交集选择器

$(“div>li”)       : 获取子代选择器

$(“div li”)       : 获取后代元素选择器

2：筛选选择器

$("div:first")               获取第一个 div元素

$("div:last")                获取最后一个div元素 

$("div:eq(2)")            获取div元素中，索引为2的元素 ，从0开始

$(div:odd)                获取到div元素中，索引为奇数的元素

$(div:even)                获取到div元素中，索引为偶数的元素

代码举例：

<ul>

                                   <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>

</ul>

<script>

                        $(function(){

                                var v   = $("li:eq(1)").text();

                                var odd = $("li:odd");

                                console.log(v);

                                console.log(odd)

                        })

</script>

  第二节：更改样式  

2.1 语法格式

$('div').css('属性', '值')   

举例：$("div").css("color","red");

注意：它会让页面所有div标签都变为红色，称之为隐式迭代，不需要我们在遍历。

2.2 链式编程 

$(".red1").siblings().css("color","red")

当期元素的兄弟元素变为红色，自己不变色。

$(".red1").css("color","blue") .siblings().css("color","red")

当期元素的兄弟元素变为红色，自己变蓝色。

2.3 对象形式

$(".red1").css({ color:"red",'font-size':"20px"});

属性可以不加‘’，但-需要注意。

2.4 类的方式

$("div").addClass("current"); //添加类

$("div").removeClass("current");//删除类

$("div").toggleClass("current");//切换类

  第三节：tab栏切换  

示例代码：

<div class="tab">

                                <div class="nav" >

                                        <a href="javascript:;" class="hover">公司新闻</a>

                                        <a href="javascript:;">公司动态</a>

                                        <a href="javascript:;">行业新闻</a>

                                </div>

                               

                                <div class="nav_con">

                                        <div>公司新闻-show</div>

                                        <div>公司动态-show</div>

                                        <div>行业新闻-show</div>

                                </div>

                </div>

                <script src="js/jquery-3.6.0.min.js"></script>

               

                <script type="text/javascript">

                  $(function(){

                          $(".tab .nav a").click(function(){

                                 $(this).addClass("hover").siblings().removeClass("hover");

                                  var index = $(this).index();

                                  $(this).parent().siblings().find("div").eq(index).show().siblings().hide();

                          })

                  })

                </script>

---

四、JQUERY动画

  第一节：显示隐藏  

show() / hide() / toggle() ;

举例：

show(speed,easing,fn)

Speed：速度，slow,normal fast 或者毫秒

$("#demo").click(function(){

         $(this).hide(2000)

})

  第二节：滑入滑出  

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

<button>下拉滑动</button>

            <button>上拉滑动</button>

            <button>切换滑动</button>

            <div></div>

            <script>

                $(function() {

                    $("button").eq(0).click(function() {

                        // 下滑动 slideDown()

                        $("div").slideDown(500);

                    })

                    $("button").eq(1).click(function() {

                        // 上滑动 slideUp()

                        $("div").slideUp(500);

                    })

                    $("button").eq(2).click(function() {

                        // 滑动切换 slideToggle()

                        $("div").slideToggle(500);

                    });

                });

            </script>

  第三节：淡入淡出  

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

      <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>

五 、JQUERY属性操作

   第一节：元素固有属性prop()  

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

<input  type="button" name="hello" value="查看信息" id="btn"/>

<script type="text/javascript">

                        $("#btn").click(function(){

                                console.log($(this).prop("name"));

                        })

</script>

  第二节： 元素自定义属性值 attr()  

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

$("#btn").click(function(){

                                console.log($(this).attr("index"));

})

  第三节： 数据缓存 data()  

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

六、JQUERY位置操作

  第一节：尺寸操作  

   <div></div>

    <script>

        $(function() {

            // 1. width() / height() 获取设置元素 width和height大小

            console.log($("div").width());

            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小

            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小

            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin

            console.log($("div").outerWidth(true));

        })

</script>

  第二节：位置操作  

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset() 定义和用法

方法设置或返回被选元素相对于文档的偏移坐标。

返回偏移坐标：

$(selector).offset()

设置偏移坐标：

$(selector).offset({top:value,left:value})

使用函数设置偏移坐标：

$(selector).offset(function(index,currentoffset))

Position() 方法使用

jQuery position() 方法 | 菜鸟教程

scrollTop()方法使用

jQuery scrollTop() 方法 | 菜鸟教程

  第三节：动画练习  

$(function(){

                   var boxtop = $(".main").offset().top;

                 

                   $(window).scroll(function(){

                      var scrolltop = $(document).scrollTop();

                      console.log(scrolltop);

                      if(scrolltop>=boxtop){

                          $(".backtop").fadeIn();//显示

                      }else{

                         $(".backtop").fadeOut(); //淡出

                      }

                      

                   })



              $("#backtop").click(function(){

                  

                   $("body,html").stop().animate({

                       scrollTop:0

                   },3000,'linear',function(){

                      alert("执行结束");

                   })

                  

               })

              

            })

---

总结

就此停笔，希望对你有所帮助吧，最后依旧诚挚祝福看到文章的你有个好心情~