2022-06-07 jQuery笔记(一) jq基本使用,引入,选择器,事件,显隐滑动淡进淡出效果,动画和停止动画,回调,链式操作

1.第一个jQuery例子

        $(document).ready(function() {
            $("p").click(function() {
                console.log(this);
                $(this).hide();
            })
        })

2.jQuery库功能

• html元素选取
• html元素操作
• css操作
• html DOM操作
• html事件函数
• html动画和特效
• ajax

3.script标签的简化

为何只有<script>没有<script type=“text/javascript”>
因为html5中javascript是html5和现代浏览器的默认脚本语言

4.引入jQuery

下载，然后本地引入
不用下载，引入链接
如百度的:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

5.jQuery语法

$（selector）.action(){}

其中,$是美元符号，selector是选择符，用来查询html元素，action表示对元素进行的操作
如：

$("p").hide();//隐藏<p>标签

6.文档就绪事件

$（document）.ready.function()｛｝

DOM加载完后才可以DOM操作，
否则可能出现：

• 隐藏一个不存在的元素
• 获得未完全加载的图像的大小

7.jQuery选择器

• 元素选择器
• id选择器
• class选择器

等等
*容易搞混：

ul li:first 选择第一个ul中的第一个li
ul li:first.child 选择每一个ul的第一个li

8.jQuery事件

事件：页面对不同访问者的响应

事件处理程序：当html发生某些事件时调用的方法

例如：dblclick（双击），hover（悬停），unload（离开页面）

事件语法：与DOM事件等效的方法

如：

点击事件：$（“p”）.click();

9.jQuery效果

9.1.显示与隐藏

隐藏：hide（）
显示：show（）
切换显隐状态：toggle（）
示例:
  $(document).ready(function() {
      $("p").click(function() {
          // $("div").show('slow');//div要在display:none状态才能显示
          // $("div").hide('slow');//div要在display:block状态才能隐藏
          $("div").toggle('slow');//对于隐藏的div就显示,显示的div就隐藏
      });
  })

9.2.淡入淡出

淡入：fadeIn()
淡出：fadeOut()
切换淡入淡出：fadeToggle()
透明度改变：fadeTo()
	语法：selector.fadeTo(speed,opacity,callback);
	其中，speed是步长可以是"fast","slow",3000毫秒等，opacity是目标透明度，callback是回调（可选）
	例:
	  $(document).ready(function() {
      $("p").click(function() {
          // $("div").fadeIn('slow');//div要在display:none状态才能淡进显示
          // $("div").fadeOut('slow');//div要在display:block状态才能淡出隐藏
          // $("div").fadeToggle('slow');//对于隐藏的div就淡进显示,显示的div就淡出隐藏
          $("div").fadeTo('slow', 0.7); //from当前透明度to设置的透明度(0到`1之间)
      });
  })

9.3.滑动

向下滑动：slideDown()
向上滑动：slideUp()
切换滑动方向：slideToggle()
示例:
  $(document).ready(function() {
      $("p").click(function() {
          // $("div").slideDown('slow');//div要在display:none状态才能向下展开
          // $("div").slideUp('slow');//div要在display:block状态才能向上收起
          $("div").slideToggle('slow');//对于隐藏的div就展开,显示的div就把它收起
      });
  })

10.jQuery效果：动画

使用animate（）创建自定义动画
语法：$（selector）.animate({params,speed,callback}),
如：$（“div”）.animate({left:"250px"})//div要设置position

其中，params是css属性，speed是步长值，比如“slow”，“fast”，1000毫秒等等,callback是回调函数,元素需要设置位置属性,否则动不起来

10.1.animate（）可操作多个属性

    $(document).ready(function() {
        $("p").click(function() {
            $("div").animate({//div要设置position:absolute
                left: "250px",
                opacity: .6,
                height: "300px",
                // backgroundColor: "red"//属性名要变成驼峰命名法
                /*颜色动画不在核心jq库中,要从官网下载*/
            });
        });
    })

10.2.animate（）可操作相对属性值

    $(document).ready(function() {
        $("p").click(function() {
            $("div").animate({
            /*该值相对于元素的当前值*/
                left: "+=50px",//点一次向右移动50px
            });
        });
    })

10.3.animate（）可使用预定义的值

    $(document).ready(function() {
        $("p").click(function() {
            $("div").animate({
                height: "toggle"//如高度可以设置为show,hide,toggle
            });
        });
    })

10.4.animate（）使用队列功能

同一selector编写多个animate，
jQuery会创建包含这些方法调用的“内部”队列，
然后逐一进行这些animate的调用
如：

$(document).ready(function() {
    $("p").click(function() {
        $("div").animate({
            height: "toggle"
        });
        $("div").animate({
            height: "show"
        });
        $("div").animate({
            top: "+=150px"
        });
        $("div").animate({
            top: "-=150px"
        });
    });
})

11.jQuery效果:停止动画

使用stop（）停止进行中的animate
例子：
body：

button#stop 停止滑动
div#flip 点击滑动
div#panel Hello world

script：

$（document）.ready(function(){
  $("#flip").click(function(){
     $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
     $("#panel").stop();
  });
})

完整代码:

<style>
    #panel,
    #flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }
    
    #panel {
        height: 600px;
        padding: 50px;
        display: none;
    }
</style>

<body>
    <button id="stop"> 停止滑动</button>
    <div id="flip"> 点击滑动</div>
    <div id="panel">Hello world</div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#flip").click(function() {
                $("#panel").slideDown(10000); //10s
            });
            $("#stop").click(function() {
                $("#panel").stop();
            });
        })
    </script>
</body>

效果:

12.jQuery效果:callback

就是操作完之后可以设置一个回调

    $(document).ready(function() {
        $("p").click(function() {
            $("div").hide("slow", () => {
                alert("藏好了...");
            })
        });
    })

13.jQuery效果:链式操作

不用再一个一个地进行操作dom，而是可以像promise一样，在后面用.链起来，多个事件css样式等
例:

    $(document).ready(function() {
        $("p").click(function() {
            $("div").css("border", "10px solid red").slideUp(4000).slideDown(3000)
            //先加边框,向上滑动隐藏再落下显示
        });
    })