jquery默认遍历box数组

        <style type="text/css">
            .box{
                width: 200px;
                height: 50px;
                background-color: #ccc;
                margin-bottom: 10px;
            }
        </style>
        <script src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </body>
    <script type="text/javascript">
            //两种方法读取对象集合的长度
            console.log($('.box').length);
            console.log($('.box').size());
            
            //操作内容
            var arr = ['aaa','bbb','ccc','ddd','eee'];
            //点击盒子添加数组对应的内容
            $('.box').click(function(){                    //jquery默认遍历box数组
                $(this).html(arr[$(this).index()])        //index()是this点击当前的下标
            })
    </script>

- 阅读剩余部分 -

js对象和jquery对象相互转换

        <style type="text/css">
            .box{
                width: 200px;
                height: 50px;
                background-color: #ccc;
                margin-bottom: 10px;
            }
        </style>
        <script src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </body>
    <script type="text/javascript">
        //js    对象只能使用原生js语法操作
        //jquery对象只能使用jquery语法操作
        var $box = $('.box');
        
        //从jquery对象集 转换成 js对象
        //get(index)  得到指定索引值的 原生js对象
        $box.get(0).style.backgroundColor = 'hotpink'
        
        //$box[index]得到指定索引值的 原生js对象
        $box[1].style.backgroundColor = 'orange';
        
        
        //js对象转换成jquery对象
        var boxList = document.getElementsByClassName('box');
        
        $(boxList).html('haha')
    </script>

待续。。。

老江程序生涯

知识的搬运工,技术成就梦想。

知识的海洋很辽阔,永远也不要自我膨胀。

越努力越幸运

每天记录一点点。

操作css类

    <body>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
        </ul>
    </body>
    <script type="text/javascript">
            //操作css类
            $('li:lt(2)').css({
                'fontsize':12,        //像素可以不写px,直接写数字
                color:'green',
                'line-height':'40px',        //有-的语法用引号
                backgroundColor:'orange',    //或者驼峰命名
                'margin-bottom':10
            })    
    </script>

- 阅读剩余部分 -