jQuery方法

最新推荐文章于 2023-03-10 16:13:26 发布

Boss.陈

最新推荐文章于 2023-03-10 16:13:26 发布

阅读量143

点赞数 1

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

本文链接：https://blog.csdn.net/Boss_Chen0502/article/details/90578158

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery方法

隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
下面是博主自己写的案例供大家参考：
案例效果
在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 60px;
            color: red;
        }
        li{
            float: left;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
<script>
    $(function () {
        $("ul li").on("mouseenter", function () {
            $(this).text("★").prevAll("li").text("★").end().nextAll().text("☆");
        });
        $("ul li").on("mouseleave", function () {
            if ($("li.current").length === 0) {
                $(li).text("☆");
            } else {
                $(this).text("★").prevAll("li").text("★").end().nextAll().text("☆");
            }
        });
        $("ul li").on("click", function () {
            $(this).attr("class","current").siblings().removeAttr("class");
        });
    })
</script>
</body>
</html>

each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

//参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
Element是一个 js对象，需要转换成jquery对象

案例展示
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        li{
            width:200px;
            height: 200px;
            background-color: skyblue;
            margin: 20px;
            list-style: none;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            float: left;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<script>
    $(function () {
        $("li").each(function (index,element) {
            $(element).css("opacity",$(element).text()*0.1);
        })
    })
</script>
</body>
</html>

Boss.陈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery方法

jQuery方法隐式迭代隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。下面是博主自己写的案例供大家参考：案例效果源代码：<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录