PHP高级 js.jquery 第51天

bd.html

<html>
    <head>
        <script src="jquery-1.4.2.js"></script>
        <script>
            $(function(){
                //找到button当中的第一个
                $('button:first').click(function(){
                    //找到textarea的高
                    var $height=$('textarea').height();

                    //如果高小于500的时候执行
                    if($height<500){
                        //让高度增加50像素
                        $('textarea').height($height+50);
                    }   

                })

                $('button:last').click(function(){

                    var $height=$('textarea').height();

                    if($height>100){
                        $('textarea').height($height-50);
                }   

                })

            })

        </script>

    </head>

    <body>
        <button>变大</button><button>变小</button><br />

        <textarea rows="10" cols="50">美人可以有很多个。</textarea>
    </body>
</html>

cp.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function(){

        //找到ul 下的li下的大于4,但是排除最后一个
        var $cate=$('ul li:gt(4):not(:last)');
        //无论如何将其隐藏
        $cate.hide();
        //找到showmore下的一个层级,a元素
        var $showmore=$('.showmore>a');
        //当点击a标签的时候,执行下面的方法

        $showmore.click(function(){
            //如果$cate是隐藏的,则让其显示,如果是显示的则让其隐藏
            if($cate.is(':hidden')){

                $cate.show();

                //找到所有的ul 下的li 过滤找到内容包含奥林巴斯...将他们加上高亮的css
                $('ul li').filter(':contains(奥林巴斯),:contains(佳能),:contains(尼康)').addClass('promoted');
                //找到.showmore下的span,将他们的背景图片,变为img/up.gif,将文字也发生变化
                $('.showmore span').css('background','url(img/up.gif) no-repeat').html('隐藏部份品牌');
            }else{

                $cate.hide();

                //去取掉对应的高亮显示的css
                $('ul li').removeClass('promoted');

                $('.showmore span').css('background','url(img/down.gif) no-repeat').html('显示全部品牌');

            }

            return false;

        })

    })

</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
    <a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>

gd.html

<html>

    <head>
        <script src="jquery-1.4.2.js"></script>

                <script>
            $(function(){
                //找到第一个
                $('button:first').click(function(){
                    //判断是否为动化,如果不是动画执行的时候,执行以下代码
                    if(!$('textarea').is(':animated'))

                        $('textarea').animate({scrollTop:'+=15px'},'slow');//让滚动手柄发生变化,让它的效度较慢,是每次加上15个像素   

                })  

                $('button:last').click(function(){

                    if(!$('textarea').is(':animated'))
                        $('textarea').animate({scrollTop:'-=15px'},'slow'); 

                })

            })

        </script>

    </head>

    <body>
        <button>向下滚动</button>
        <button>向上滚动</button>
        <br />

        <textarea rows="5">bjkk</textarea>

    </body>

</html>

li.html

<html>
    <head>
        <script src="jquery-1.4.2.js"></script>
<style type="text/css">
#menu {
    width:300px;
}
.has_children{
    background : #555;
    color :#fff;
    cursor:pointer;
}
.highlight{
    color : #fff;
    background : green;
}
div{
    padding:0;
}
div a{
    background : #888;
    display : none;
    float:left;
    width:300px;
}
</style>

<script type="text/javascript">
    $(function(){

        $('.has_children').click(function(){

            $(this).addClass('highlight').children('a').show().end().siblings().removeClass('highlight').children('a').hide();

        })  

    })

</script>
</head>
<body>
<div id="menu">
    <div class="has_children">
        <span>第1章-认识jQuery</span>
        <a>1.1-JavaScript和JavaScript库</a>
        <a>1.2-加入jQuery</a>
        <a>1.3-编写简单jQuery代码</a>
        <a>1.4-jQuery对象和DOM对象</a>
        <a>1.5-解决jQuery和其它库的冲突</a>
        <a>1.6-jQuery开发工具和插件</a>
        <a>1.7-小结</a>
    </div>
    <div class="has_children">
        <span>第2章-jQuery选择器</span>
        <a>2.1-jQuery选择器是什么</a>
        <a>2.2-jQuery选择器的优势</a>
        <a>2.3-jQuery选择器</a>
        <a>2.4-应用jQuery改写示例</a>
        <a>2.5-选择器中的一些注意事项</a>
        <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
        <a>2.7-还有其它选择器么?</a>
        <a>2.8-小结</a>
    </div>
    <div class="has_children">
        <span>第3章-jQuery中的DOM操作</span>
        <a>3.1-DOM操作的分类</a>
        <a>3.2-jQuery中的DOM操作</a>
        <a>3.3-案例研究——某网站超链接和图片提示效果</a>
        <a>3.4-小结</a>
    </div>
</div>
</body>   

</html>

qx.html

<html>

    <head>
        <script src="jquery-1.4.2.js"></script>
        <script>
            $(function(){

                $('button:first').click(function(){

                    $(':checkbox').attr('checked',true);
                })

                $('button:last').click(function(){

                    $(':checkbox').attr('checked',false);
                })

                $('button:eq(1)').click(function(){

                    $(':checkbox').each(function(){

                        $(this).attr('checked',!$(this).attr('checked'));   

                    });
                })

            })
        </script>

    </head>

    <body>

        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
        <input type="checkbox" value="1">aaaaaaaaaaaaaaaaaaaaaaaaaa<br />

        <button>全选</button><button>反选</button><button>全不选</button>

    </body>

</html>

select.html

<html>
    <head>
        <script src="jquery-1.4.2.js"></script>

        <script>
            $(function(){

                $('button:first').click(function(){

                    var $se=$('#one option:selected');

                    $se.appendTo('#two');   

                })
                $('button:last').click(function(){

                    var $se=$('#two option:selected');

                    $se.appendTo('#one');   

                })

            })
        </script>
    </head>

    <body>

        <select id="one" size="10">
            <option>钟</option>
            <option>容祖儿</option>
            <option>王晓</option>
            <option>柏芝</option>

        </select>
        <button>右移</button>
        <button>左移</button>

        <select id="two" size="10">

        </select>
    </body>

</html>

xl.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>

<script>
    $(function(){

        var $next=$('span.next');
        //每页显示的数
        var total=4;
        //当前的页码
        var page=1;

        $next.click(function(){
            //通过当前的对象,找到父级div.v_show停止
            var $v_show=$(this).parents('div.v_show');
            //再通过v_show去找v_content
            var $v_content=$v_show.children('.v_content');
            //再通过v_content去找,v_content_list,最终我们要移动的也是v_content_list
            var $v_list=$v_content.children('.v_content_list');
            //再找li,确定总页数
            var $li=$v_content.find('li');

            //总页数
            var $count=Math.ceil($li.length/total);

            //每页显示的宽度
            var $width=$v_content.width();

            //如果当前页它等于总页数,那就是最后一页,如果为最后一页则移动到最开始处,如果不是最后一页,则向左移动指定的宽度
            if(page==$count){

                $v_list.animate({left:'0px'},'slow');
                page=1;
            }else{
                $v_list.animate({left:'-='+$width+'px'},'slow');
                page++;

            }

            //找到.highlight_tip 下面的所有span,找到指定的个数,因为它的计数是从0开始记的,所以要在页码上-1,然后让这一个加上current的样式,让它的兄弟元素全部去掉current的效果
            $('.highlight_tip span').eq(page-1).addClass('current').siblings().removeClass('current');

        })
        var $prev=$('span.prev');
        $prev.click(function(){
            //通过当前的对象,找到父级div.v_show停止
            var $v_show=$(this).parents('div.v_show');
            //再通过v_show去找v_content
            var $v_content=$v_show.children('.v_content');
            //再通过v_content去找,v_content_list,最终我们要移动的也是v_content_list
            var $v_list=$v_content.children('.v_content_list');
            //再找li,确定总页数
            var $li=$v_content.find('li');

            //总页数
            var $count=Math.ceil($li.length/total);

            //每页显示的宽度
            var $width=$v_content.width();

            //如果点击倒退prev,在第一页的时候,我们需要做的是移到最后一个上面去。因为它倒退的时候,记数为0,1,2,3,所以说我们需要用总页数-1 乘以宽度
            //由于从第一页直接退到了最后一页上面,所以页码要发生变化,直接变到page=4 上面去,不然会有BUG

            //如果不是第一页,则将左移动的宽相加,然后,把页码page--
            if(page==1){
                $v_list.animate({left:'-='+($width*($count-1))+'px'},'slow');
                page=4;
            }else{
                $v_list.animate({left:'+='+$width+'px'},'slow');
                page--;

            }

            $('.highlight_tip span').eq(page-1).addClass('current').siblings().removeClass('current');

        })

    })

</script>

</head>

<body>

<div class="v_show">
    <div class="v_caption">
        <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
        <div class="highlight_tip">
            <span class="current">1</span><span>2</span><span>3</span><span>4</span>
        </div>
        <div class="change_btn">
            <span class="prev" >上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多>></a></em>
    </div>
    <div class="v_content">
        <div  class="v_content_list">
            <ul>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
             </ul>
        </div>
    </div>
</div>

</body>
</html>

xxk.html

<html>

    <head>

        <style>
            .one{width:200px;height:50px;border:1px solid #ccc}
            .one ul{width:200px}
            .one li{float:left;background:#ccc;border:1px solid green;width:60px;height:50px;}

            .one .red{background:red}

            .two{width:200px;height:200px;border:1px solid #ccc}

            .two .dis{display:none}

        </style>
        <script src="jquery-1.4.2.js"></script>
        <script>
            $(function(){
                //找到所有的ul 下的li ,绑定一个鼠标放上去的事件
                $('ul li').bind('mouseover',function(){

                    //当前放上去的这个li增加一个red样式,它的兄弟节点,全部去掉样式
                    $(this).addClass('red').siblings().removeClass();

                    //找到当前的对象this,在ul下的li当中的第几个上面
                    var $index=$('ul li').index(this);

                    //找到two下面的所有的div,让与li相同的第几个元素显示,它的兄弟节点全部隐藏

                    $('.two div').eq($index).show().siblings().hide();

                })  

            })

        </script>

    </head>

    <body>
        <div class="one">
            <ul>
                <li class="red">dkslf</li>
                <li>dls;af</li>
                <li>dks</li>
            </ul>

        </div>

        <div class="two">
            <div>djs;fja;ifewaf;</div>
            <div class="dis">
                a;jf;ewafji;afiwfwe

            </div>

            <div class="dis">
        dkls;a;jf;aaefiowjfa;;efjwa;f;jfa;
            </div>

        </div>

    </body>

</html>

zs.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
 <!--   引入jQuery -->
 <script src="jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
    $(function(){

        //找到.tooltip
        var $tooltip=$('.tooltip');
        var $title=null;

        //当鼠标放到上面去的时候和离开的时候分别执行两个不同的方法
        $tooltip.mouseover(function(a){
            //将标题放到$title里面
            $title=$(this).attr('title');
            //将标题清空
            $(this).attr('title','');

            //产生一个新的DIV,将DIV的内容放到$div里面
            var $div='<div id="tooltip"><img src="'+$(this).attr('href')+'" /></div>';
            //将div放配到body里面
            $('body').append($div);

            //将产生的div找到,并且设置它的top和left值,位置位于当前鼠标所在的坐标位置e.pageX和e.pageY,将其显示

            $('#tooltip').css({top:a.pageY+'px',left:a.pageX+'px'}).show(5000);

        }).mouseout(function(){

            //找到title并且title还回去
            $(this).attr('title',$title);
            //找到tooltip再将其remove();
            $('#tooltip').remove();

        })

        //也可以通过下面的一这样一种方式来实现
        //$tooltip.hover(func1,func2);

    })

</script>

</head>
<body>
<h3>有效果:</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>

<br/><br/><br/><br/>
<br/><br/><br/><br/>

<h3>无效果:</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>
</body>
</html>