jQuery学习第三天

最新推荐文章于 2024-06-21 16:22:37 发布

相信光的奥特王小懒

最新推荐文章于 2024-06-21 16:22:37 发布

阅读量112

点赞数

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

本文链接：https://blog.csdn.net/weixin_51415327/article/details/120197052

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 事件注册

1.1 单个事件注册

在这里插入图片描述

1.2 事件处理

在这里插入图片描述

在这里插入图片描述
注意：当很多操作都需要触发一个函数时，可以采用第二种方式，但是要注意操作与操作之间必须用空格隔开。

在这里插入图片描述

1.3 发布微博的案例

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
            $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })

            // 2.点击的删除按钮，可以删除当前的微博留言li
            // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
            //     alert(11);
            // })
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })

        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>

1.4 事件解绑off()

解除所有事件
在这里插入图片描述
解除特定事件

解除事件委托

1.5 自动触发事件

在这里插入图片描述

2. 拷贝对象

在这里插入图片描述
注意：面试提问点：

注意：针对复杂数据类型而言，比如对象中嵌套着对象。

3. jQuery插件

在这里插入图片描述

引入相关的css和js文件，然后再html页面进行导入。
在这里插入图片描述

4. 图片懒加载

即我们页面滑动到可视区域再去加载图片，提高网页性能。
在这里插入图片描述

先导入相关的js和css代码然后复制代码使用

在这里插入图片描述

5. 全屏滚动插件

链接：https://www.dowebok.com/77.html
在这里插入图片描述

<link rel="stylesheet" href="css/fullpage.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/fullpage.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/fullpage.min.js"></script>
    <style>
        #fp-nav ul li a.active span,
        #fp-nav ul li a span {
            background-color: red!important;
        }
        .section1 {
            background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
        }
        
        .section2 {
            background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;
        }
        
        .section3 {
            background: url(http://idowebok.u.qiniudn.com/77/3.jpg) 50%;
        }
        
        .section4 {
            background: url(http://idowebok.u.qiniudn.com/77/4.jpg) 50%;
        }
        </style>
    <script>
        $(function() {
            $('#dowebok').fullpage({
                sectionsColor: ['#ffffff', '#4BBFC3', '#7BAABE', '#f90'],
                navigation: true

            });
        });
    </script>
</head>

<body>
    <div id="dowebok">
        <div class="section section1">
            <h3>第一屏</h3>
        </div>
        <div class="section section2">
            <h3>第二屏</h3>
        </div>
        <div class="section section3">
            <h3>第三屏</h3>
        </div>
        <div class="section section4">
            <h3>第四屏</h3>
        </div>
    </div>
    

</body>

</html>

相信光的奥特王小懒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习第三天

1. 事件注册1.1 单个事件注册1.2 事件处理注意：当很多操作都需要触发一个函数时，可以采用第二种方式，但是要注意操作与操作之间必须用空格隔开。1.3 发布微博的案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {
复制链接

扫一扫

专栏目录