PHP高级 js.jquery 第51天

2013-01-02 22:21:54 0  category: 第三阶段php

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>





推荐文章

PHP高级 js.jquery 第49天
php-fsockopen-demo

推荐文章

文章归档

2017 / 03
2016 / 05
2016 / 02
2016 / 01
2015 / 06
2015 / 04
2015 / 02
2015 / 01
2014 / 11
2014 / 08
2014 / 07
2014 / 06
2014 / 05
2014 / 04
2014 / 03
2013 / 11
2013 / 10
2013 / 09
2013 / 08
2013 / 07
2013 / 06
2013 / 05
2013 / 04
2013 / 01
2012 / 12
2012 / 11
2012 / 10
2012 / 09
2012 / 08
2012 / 04

category

friend links

PHP RELEASES
PHP 手册在线