11-jquery 属性操作 循环 手风琴动画示例

jquery属性操作

1、html() 取出或设置html内容：

//取出：
var $htm = $('#div1').html();
//设置：
$('#div1').html('<span>添加文字</span>');


2、prop() 取出或设置某个属性的值：

//取出图片地址：
var $scr = $("#img1").prop('src');
//设置图片的地址和alt属性：
$("#img1").prop({src:"test.jpg",alt:"test image"})

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>

        $(function(){

            //读取#img1元素的src属性值
            var $img = $("#img1").prop("src")
            alert($img)

            //读取读取#img1元素的class属性值
            var $class = $("#img1").prop("class")
            alert($class)

            //设置#img2元素的src、alt属性值
            $("#img2").prop({src:'test.jpg',alt:"test image"})

            //获取#link元素的href属性值：
            var $link = $("#link").prop("href")
            alert($link)

            //设置#link元素的href属性值：
            $("#link").prop({href:"www.baidu.com"})

         
            var $htm = $("#div1").html()
            alert($htm)

            $("#div1").html("<table><tr>a</tr><td>1</td></table>")

           
        })



    </script>
</head>
<body>
    <img src="images/goods02.jpg" alt="" id="img1" class="img1111">
    <img  alt="" id="img2">
    <div id="div1">abcdef</div>
    <a id="link">link</a>
</body>
</html>

 

 

jquery循环

 

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

$(function(){
    $('.list li').each(function(){
    $(this).html(i);
})
})

...

<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var $li = $('.list li');

            //一次操作8个li
            $li.css({backgroundColor:'red'})

            //分别设置可以用eq():
            $li.eq(3).css('background-color',"red")

            //分别设置每一个(循环)，function()中可以写一个变量比如i，那么在第一次循环时，i=0,第八次循环时i=7：
            $li.each(function(i){
                //this是循环中的每一个元素
                $(this).css({fontSize:30})

                $(this).index() //获取this的索引，值跟i相同

                //隔行换色
                if($(this).index()%2 ==0){
                    $(this).css({backgroundColor:'gold'})
                }
            })

        })


    </script>
</head>
<body>
    <ul class="list">
        <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>
</body>
</html>

 

手风琴动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .con{
            width:661px;
            height:425px;
            position: relative;
            overflow: hidden;
            margin:0 auto;
        }
        
        .con ul{
            list-style: none;
            width:3305px;
            height:425px;
            position: relative;
        }

        .con span{
            width:20px;
            height:425px;
            background-color:gold;
            color:green;
            float: left;
            box-sizing: border-box;
            padding-top:100px;
            cursor:pointer;
        }

        .con li{
            float: left
        }

        .bar01 {
            position:absolute;
            left:0px;
        }

        .bar01 span{
            background-color: green;
            color:#000;
        }

        .bar02{
            position: absolute;
            left:580px;
        }
        
        .bar02 span{
            background-color: pink;
            color:#000;
        }

        .bar03{
            position: absolute;
            left:600px;
        }

        .bar03 span{
            background-color:gold;
            color:#000;
        }

        .bar04{
            position: absolute;
            left:620px;
        }

        .bar04 span{
            background-color:cyan;
            color:#000;
        }

        .bar05{
            position: absolute;
            left:640px;
        }

        .bar05 span{
            background-color:lightgreen;
            color:#000;
        }

       
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var $li = $(".con li")

            $li.click(function(){

                $(this).animate({'left':20*$(this).index()});


                //点击时，li前面的li都向左移动
                $(this).prevAll().each(function(){
                    //这里的this是指循环选择的每个li
                    $(this).animate({left:20*$(this).index()});
                })

                //点击时，li后面的li都向右移动
                $(this).nextAll().each(function(){
                    $(this).animate({left:661-20*(5-$(this).index())});
                })    
            })

        })


    </script>
</head>
<body>
    <div class="con">
        <ul>
            <li class="bar01"><span>非洲景色01</span><img src="images/1.jpeg" alt=""></li>
            <li class="bar02"><span>非洲景色02</span><img src="images/2.jpeg" alt=""></li>
            <li class="bar03"><span>非洲景色03</span><img src="images/3.jpeg" alt=""></li>
            <li class="bar04"><span>非洲景色04</span><img src="images/4.jpeg" alt=""></li>
            <li class="bar05"><span>非洲景色05</span><img src="images/5.jpeg" alt=""></li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2019-03-28 18:38  greenfan  阅读(225)  评论(0)    收藏  举报