简单详细：js---jQuery-CSDN博客

本文链接：https://blog.csdn.net/qq_59430243/article/details/135935374

js---jQuery

1、jQuery安装

1、Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

2、Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

为了方便也可以再自己的本地创建jQuery.js文件

将上述链接打开例如：http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js，

内容如下：

把里面内容复制到jQuery.js文件中，然后引用---注意路径即可

<script src="js/jQuery.js"></script>

打开链接时注意Google和Microsoft的区别，也可以自己自行搜索jQuery文件，再次附上一个网址

jquery下载所有版本（实时更新）

2、文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

  // jQuery functions go here

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

简写：

   $(function(){
      // 找元素。操作方式。执行什么操作
     $(".btn").click(function(){
        $(".box").hide()
        $(".btn").hide()
     })
   })

事件绑定方式一：找元素。操作方式。执行什么操作

       $(".btn").click(function(){
          $(".box").hide()
          $(".btn").hide()
       })

事件绑定方式二：找元素。操作方式。执行什么操作

        $(".btn").on("click",function(){
            $(".box").hide()
        })
        
        //可自定义参数，更换时方便
         var type = "click"
         $(".btn").on(type,function(){
            $(".box").hide()
         })

事件绑定方式三：绑定未来元素----通过 $("body").append('') 添加的元素

            父辈        事件    添加的元素 操作
         $("body").on("click",".btn",function(){
            $(".box").hide()
         })

3、部分方法举例：

1、添加-- $("selector").append('')

$("body").append('<input type="button" value="按钮" class="btn">')

2、实现显示和消失--$("selector").toggle()

        var flag=0
        $("body").on("click",".btn",function(){
          if(flag==0){
            $(".box").hide()
            flag=1
          }else{
            $(".box").show()
             flag=0
          }           
         })
         等价于：
          $("body").on("click",".btn",function(){
             $(".box").toggle()//一行实现显示和消失
          }

3、动画--$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。（可以是一个值，也可以是多个值）

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

        $(".box").animate({
           left:'100px',
           fontSize:'30px'
        },2000)

jQuery animate() - 使用预定义的值

        $(".box").animate({
            height:'toggle'
        },2000);

animate使用队列功能

        $(".box").animate({
            left:'100px'
        },2000);
        $(".box").animate({
             fontSize:'30px'
         },2000);
         $(".box").animate({
             height:'300px'
         },2000);
         $(".box").animate({
             width:'hide'
         },2000)

动画停止

        $("body").on("click",".btn1",function(){
             $(".box").stop()
             $(".box").stop(true)
             $(".box").stop(true,true)
         })

"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。

"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

"停止但要完成" 会立即完成当前活动的动画，然后停下来。

此外，jQuery的方法有很多，再次不一一赘述，感兴趣的可以去下方网址了解更多的方法

w3school 在线教程