JQuery效果应用（动画,滑动,遍历等）

最新推荐文章于 2022-04-21 08:38:14 发布

DavinDeng

最新推荐文章于 2022-04-21 08:38:14 发布

阅读量342

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/davindeng/article/details/104919143

版权

本文详细介绍了JQuery的高级特性，包括动画效果的实现，如默认显示隐藏、滑动、淡入淡出及自定义animate()方法；遍历DOM元素的多种方式，如.each()和$.each()；事件绑定的使用；以及JQuery插件的增强功能。通过案例展示了广告显示隐藏和抽奖功能的实现。

摘要由CSDN通过智能技术生成

1.选择器

基本选择器

并集选择器：

语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

层级选择器

后代选择器

语法： $("A B ") 选择A元素内部的所有B元素

子选择器

语法： $(“A > B”) 选择A元素内部的所有B子元素

过滤选择器

首元素选择器

语法： :first 获得选择的元素中的第一个元素

尾元素选择器

语法： :last 获得选择的元素中的最后一个元素

非元素选择器

语法： :not(selector) 不包括指定内容的元素

表单过滤选择器

可用元素选择器

语法： :enabled 获得可用元素

不可用元素选择器

语法： :disabled 获得不可用元素

2.DOM操作

html(),val(),text();
attr(),prop();
addClass(),removeClass(),toggleClass();
append();prepend();
after();before()

JQuery 高级

1. 动画

三种方式显示和隐藏元素

1. 默认显示和隐藏方式

show([speed,[easing],[fn]])
参数：
1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
- swing：动画执行时效果是先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
1. fn：在动画完成时执行的函数，每个元素执行一次。
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])

2. 滑动显示和隐藏方式

slideDown([speed],[easing],[fn])：往下拉，相当于滑动显示
slideUp([speed,[easing],[fn]])：往上拉，相当于滑动隐藏
slideToggle([speed],[easing],[fn])：切换

3. 淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])：淡入，相当于显示
fadeOut([speed],[easing],[fn])：淡出，相当于隐藏
fadeToggle([speed,[easing],[fn]])：切换

4. jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。
语法：

$(selector).animate({
   params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

**提示：**可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

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

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

$("button").click(function(){
   
  $("#showDiv").animate({
   left:'250px'});
});

jQuery animate() - 操作多个属性

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

请注意，生成动画的过程中可同时使用多个属性：

$("button").click(function(){
   
  $("div").animate({
   
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        function hideFn() {
    
            // $("#showDiv").hide("slow","swing",function () {
    
            //     //alert("隐藏了。。。")
            // });

            //$("#showDiv").hide(5000,"swing");//5秒之内隐藏

            $("#showDiv").slideUp(2000,"swing");
        }

        function showFn() {
    
            // $("#showDiv").show("slow","swing",function () {
    
            //     //alert("显示。。。")
            // });

            $("#showDiv").slideDown(3000);
        }

        function toggleFn(){
    
            //切换显示和隐藏
            // $("#showDiv").toggle(4000,"linear",function () {
    
            //
            // });

            $("#showDiv").fadeToggle(3000);
        }

        function animateFn(){
    
            $("#showDiv").animate({
    
                left:'250px',
                opacity:'0.5',
                height:'150px',
                width:'150px'
            },2000);
        }
    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button"