jQuery基础二

最新推荐文章于 2023-06-11 13:49:24 发布

烟雨边

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量542

点赞数 2

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

本文链接：https://blog.csdn.net/Saykuray/article/details/104993809

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.动画

显示/隐藏元素

方法的参数描述
- speed：动画的速度。可用参数(“slow”, “normal”, “fast”)，或者表示动画时常的毫秒数值。
- easing ：切换效果。默认是"swing"（始末快，中间慢），可用参数(“linear” 动画速度是均速的)。
- fn：动画完成时执行的函数，每个元素执行一次。
默认显示/隐藏/切换
- show([speed], [easing], [fn])
- hide([speed], [easing], [fn])
- toggle([speed], [easing], [fn])
滑动显示/隐藏/切换
- slideDown([speed], [easing], [fn])
- slideUp([speed], [easing], [fn]])
- slideToggle([speed], [easing], [fn])
淡入淡出显示/隐藏/切换
- fadeIn([speed], [easing], [fn])
- fadeOut([speed], [easing], [fn])
- fadeToggle([speed], [easing], [fn])

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        function hideFn() {
            $("#show").slideUp("slow", "swing", function (){
                alert("show");
            });
        }
        function showFn() {
            $("#show").fadeIn("slow", "swing");
        }
        function toggleFn() {
            $("#show").toggle("slow", "swing");
        }
    </script>
</head>
<body>
    <input type="button" value="隐藏" onclick="hideFn()">
    <input type="button" value="显示" onclick="showFn()">
    <input type="button" value="切换" onclick="toggleFn()">
    <div id="show" style="width: 100px; height: 100px; background: red">        divdivdiv --9807 56太132徐v你们  </div>

    
    /body>
</html>

2.遍历

js的遍历方式
- for(初始值; 条件; 步长)
jQuery的遍历方式
1. jq对象.each(callback) 退出循序用return false，退出本轮循环用return true
2. $.each(object, [callback])
3. for…of：jquery3.0提供的新方式

3.事件绑定

jQuery绑定方式

jq对象.事件方法(回调函数);
on绑定事件/off解除绑定

jq对象.on(“事件名称”,回调函数)

jq对象.off(“事件名称”)
事件切换：toggle （jQuery1.9删除了这个方法，要使用得导入jQuery Migrate插件）

jq对象.toggle(fn1, fn2…)

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script src="../jquery-3.4.1.js"></script>
    <script>
        $(function () {
            // 绑定方式1
            $("#test1").click(function () {
                alert("点击");
            });
            // 绑定方式2
            // 链式编程
            $("#test1").on("mouseover", function () {
                alert("mouseover");
            }).on("mouseout", function () {
                alert("mouseout");
            });
            $("#test2").on("click", function () {
               $("#test1").off("mouseover").off("mouseout");
            });
            // // 事件切换 jquery1.9 删除了这个方法
            // $("#test3").toggle(function () {
            //    $("#div1").css("backgroundColor", "black");
            // },
            // function () {
            //    $("#div1").css("backgroundColor", "yellow");
            // });
        })
    </script>
</head>
<body>
<input id="test1" type="button" value="绑定事件">
<input id="test2" type="button" value="解除两个mouse事件">
<input id="test3" type="button" value="切换事件">
<div id="div1" style="width: 100px; height: 100px;"></div>
</body>
</html>

4.链式编程

在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .方法，一直写下去。

原理：jQuery中方法结束时，会返回自己this。

5.插件

$.fn.extend(object) 给jQuery获取的对象添加功能。

// 用法
$.fn.extend({
    函数名1:function() {
        
    },
    函数名2:function() {
		
    }
});

$.extend() 给 jQuery对象添加方法

$.extend({
    函数名1:function() {
        
    },
    函数名2:function() {
        
    }
})

烟雨边

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础二

文章目录1.动画显示/隐藏元素2.遍历3.事件绑定4.链式编程1.动画显示/隐藏元素方法的参数描述speed：动画的速度。可用参数(“slow”, “normal”, “fast”)，或者表示动画时常的毫秒数值。easing ：切换效果。默认是"swing"（始末快，中间慢），可用参数(“linear” 动画速度是均速的)。fn：动画完成时执行的函数，每个元素执行一次。默...
复制链接

扫一扫

专栏目录