jQuery-3

最新推荐文章于 2022-10-12 19:41:50 发布

一麻袋小猫

最新推荐文章于 2022-10-12 19:41:50 发布

阅读量129

点赞数

分类专栏： JavaScript jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/Zmongo/article/details/104657676

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
$(function() {
var arr = [“red”, “green”, “blue”];
$(“div”).each(function(i, w) {
$(w).css(“color”, arr[i]);
})
})

类似于 for in

创建元素

在这里插入图片描述

添加元素

内部添加
相当于 appendChild();
（1）$(“ul”).append(li); 内部添加并且放到内容的最后面
（2）prepend(); 内部添加并且放到内容的最前面
外部添加

删除元素

jQuery事件

事件注册
单个事件注册：
事件处理
（1）优点一

（2）优点2
事件委派：

（3）

微博案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            width: 300px;
            height: 30px;
            background-color: skyblue;
            line-height: 30px;
            padding: 0 20px;
        }
        
        li a {
            float: right;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            //点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮,并添加到li中
            $(".btn").on("click", function() {
                    var li = $("<li></li>");
                    li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                    $("ul").prepend(li);
                    li.slideDown();
                    $(".txt").val("");
                })
                //点击删除按钮，可以删除当前的微博留言
                //事件委托，利用事件冒泡可以传到a 
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });

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

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

        </ul>
    </div>
</body>

</html>

off()解绑
在这里插入图片描述

one()
只触发一次。
在这里插入图片描述
自动触发

第三种与前两种的区别是它不会触发元素的默认行为：

事件对象
只要事件被触发，就会有事件对象的产生。

对象拷贝

如果昂要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend() 方法
在这里插入图片描述
浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，修改目标对象会影响被拷贝对象：

深拷贝，前面加true，完全克隆（拷贝的对象而不是地址），修改目标对象不会影响被拷贝对象。如果里面有不冲突的属性，会合并到一起。
在这里插入图片描述

一麻袋小猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-3

遍历元素jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。$(function() {var arr = [“red”, “green”, “blue”];$(“div”).each(function(i, w) {$(w).css(“color”, arr[i]);})})类似于 for in...
复制链接

扫一扫

专栏目录