jQuery（六）元素属性操作和jQuery循环

最新推荐文章于 2024-04-06 13:09:14 发布

码界索隆

最新推荐文章于 2024-04-06 13:09:14 发布

阅读量1.3k

点赞数 2

文章标签： jquery javascript css3

本文链接：https://blog.csdn.net/cool66boy/article/details/123413969

版权

文章目录

jQuery元素属性操作
jQuery循环
- 练习-手风琴式展示图片

jQuery元素属性操作

html() //取出或设置元素内包裹的内容

            var $box = $('.box');
            alert($box.html());//弹出'这是一个盒子'

            $box.html('这是一个被改变内容的盒子');

prop() //取出或设置某个属性值
没有设置的属性值读取为空

            alert($box.prop('class'));//弹出'box'
            alert($box.prop('title'));//弹出为空

            $box.prop({'class':'add'});

演示图：

读取
改变

jQuery循环

对jQuery选择的对象集合分别进行操作，需要用到jQuery循环操作，此时可以用对象上的each方法。

    <script>
        $(function(){
            var $list = $('ul li');
            $list.each(function(){
                alert($(this).html());
            })
        })

    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

演示图：
请添加图片描述

练习-手风琴式展示图片

<!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>
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            var $li = $('ul li');
            var $side = $('.side');
            var $img = $('li img');
            $side.click(function(){
                var $index = $side.index($(this));
                // alert($index);
                $li.eq($index).animate({
                    'left': 30*$index
                });//单个点击了的图片移动
                $li.eq($index).prevAll().each(function(){
                    $(this).animate({
                    'left': 30*$li.index($(this))
                });//带动其他图片一起向左移动
                });
                $li.eq($index).nextAll().each(function(){
                    $(this).animate({
                    'left': 520-30*(4- $li.index($(this)))
                });//带动其他图片一起向右移动
                });
                })
        })
    </script>
    <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            width: 520px;
            height: 500px;
            margin: 58px auto;
            overflow: hidden;
        }
        ul{
            position: relative;
            list-style: none;
            height: 600px;
            padding: 0;
        }
        .side{
            width: 30px;
            height: 500px;
            background-color: pink;
            float: left;
            font-size: 20px;            
            text-align: center;
            color: #fff;
            word-break: break-all;
        }
        .side:hover{
            background-color: #e7adb7;
        }
        .color1{
            background-color: lightcoral;
        }
        .color1:hover{
            background-color: #df7878;
        }
        .color2{
            background-color: burlywood;
        }
        .color2:hover{
            background-color: #c9a67a;
        }
        .color3{
            background-color: chocolate;
        }
        .color3:hover{
            background-color: #bb5d1a;
        }
        img{
            height: 500px;
        }
        li{
            height: 500px;
            width: 431px;
            position: absolute;
        }
        li:nth-child(2){
            left: 430px;
        }
        li:nth-child(3){
            left: 460px;
        }
        li:nth-child(4){
            left: 490px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <span class="side">智秀美图01</span>
                <img src="./img/img1.jpg" alt="">
            </li>
            <li>
                <span class="side color1">智秀美图02</span>
                <img src="./img/img2.jpg" alt="">
            </li>
            <li>
                <span class="side color2">智秀美图03</span>
                <img src="./img/img3.jpg" alt="">
            </li>
            <li>
                <span class="side color3">智秀美图04</span>
                <img src="./img/img4.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>

效果图：
请添加图片描述
注：项目进入死循环解决不了问题后，要先停一下在想，千万不可转牛角尖

关键部分：

                $li.eq($index).prevAll().each(function(){
                    $(this).animate({
                    'left': 30*$li.index($(this))
                });//带动其他图片一起向左移动
                });
                $li.eq($index).nextAll().each(function(){
                    $(this).animate({
                    'left': 520-30*(4- $li.index($(this)))
                });//带动其他图片一起向右移动
                });

码界索隆

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery（六）元素属性操作和jQuery循环

文章目录jQuery元素属性操作jQuery循环练习-手风琴式展示图片jQuery元素属性操作html() //取出或设置元素内包裹的内容 var $box = $('.box'); alert($box.html());//弹出'这是一个盒子' $box.html('这是一个被改变内容的盒子');prop() //取出或设置某个属性值没有设置的属性值读取为空 alert($box.prop(
复制链接

扫一扫