jQuery学习笔记之四

类数组的操作 array a1.html

jquery对象里面可能会包含多个dom对象,所谓类数组,指的就是这些dom对象
- each(fn(i)):循环遍历每一个元素,$(this)代表被迭代的dom对象 i表示正在被遍历的那个对象的下标
- eq(index):返回index+1位置处的jquery对象
- index(obj):返回下标,其中obj可以是dom对象或者jquery对象
- length:获得jquery对象包含的dom对象的个数
- get():返回dom对象组成的数组
- get(index):返回index+1个dom对象


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js">script>
<script type="text/javascript">
    $(function(){
        $('#b1').click(function(){
            var $obj = $('ul li');
            //alert($obj.length);
            //$obj.css('font-size','60px');
            //遍历
            /* $obj.each(function(i){
                //i表示正在被遍历的那个节点的下标,下标从0开始的
                if(i==0){
                    $(this).css('font-size','60px');
                }else if(i==1){
                    $(this).css('font-style','italic');
                }else{
                    $(this).css('background-color','red');
                }
            });*/
            //取下标对应处的dom对象,然后将这个dom对象封装成jquery对象
            /* var $o = $obj.eq(1);
            $o.css('font-size','60px'); */
            //index:返回节点在类数组中的下标
            //var $o = $obj.eq(1);
            //var index = $obj.index($o);
            //alert(index);
            //获得dom对象组成的数组
            //var arr = $obj.get();
            //arr[2].innerHTML = 'hello'
            //取index对应处的dom对象
            var obj = $obj.get(1);
            $(obj).css('font-size','60px');
        });
    });
script>
head>
<body style = "font-size:30px;">
    <ul>
        <li>item1li>
        <li>item2li>
        <li>item3li>
    ul>
    <input type="button" value = "点击" id ="b1"/>
body>
html>

动画案例


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js">script>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #d1{
        border: 1px solid #aaaaaa;
        margin-left: 200px;
        margin-top: 40px;
        width: 750px;
        height: 1334px;
        overflow: hidden;
        position: relative;
    }
    #adv,#num{
        position: absolute;
    }
    ul li{
        list-style: none;
        display: inline;
    }
    ul img{
        width: 750px;
        height: 1334px;
        display: block;
    }
    #num{
        right: 5px;
        bottom: 5px;
    }
    #num li{
        float:left;
        color:#FF7300;
        text-align:center;
        line-height:16px;
        width:16px;
        height:16px;
        font-family: Arial;
        font-size: 12px;
        cursor: pointer;
        overflow: hidden;
        margin: 3px 1px;
        border: 1px solid #FF7300;
    }
    .on{
        line-height: 21px;
        line-height: 21px;
        height: 21px;
        font-size: 16px;
        margin: 0 1px;
        border: 0;
        background-color: red;
        font-weight: bold;
    }
style>
<script type="text/javascript">
    $(function(){
        $('#num li').mouseenter(function(){
            //需要知道光标指向哪个li
            var index = $('#num li').index(this);
            //依据index(下标),滚动图片
            showImage(index);
        }).eq(0).mouseenter();
        //光标进入停止滚动图片,光标离开开始滚动图片
        var i = 0;
        var taskId;
        $('#d1').hover(function(){
            //光标进入
            clearInterval(taskId);
        },function(){
            //光标离开
            taskId = setInterval(function(){
                showImage(i);
                i++;
                if(i==5){
                    i = 0;
                }
            },2000);
            //模拟离开操作
        }).mouseleave();
    });
    //滚动图片的函数
    //stop(true):在执行当前动画之前,先清空之前的动画
    function showImage(index){
        $('#adv').stop(true).animate({'top':-index*1334},1000);
        //加亮光标指定的li
        $('#num li').eq(index).addClass('on').siblings().removeClass('on');
    }
script>
head>
<body>
    <div id ="d1">
        <ul id ="adv">
            <li><img src="../images/1.jpg"/>li>
            <li><img src="../images/2.jpg"/>li>
            <li><img src="../images/3.jpg"/>li>
            <li><img src="../images/4.jpg"/>li>
            <li><img src="../images/5.jpg"/>li>
        ul>
        <ul id="num">
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
        ul>
    div>
body>
html>

你可能感兴趣的:(jQuery)