jQuery前端框架介绍与实例

来源：互联网发布：cg软件下载编辑：程序博客网时间：2024/06/06 07:05

1.点击图片更换图片

<script>        i = 0;        $('img').click(function(){            if(i%2==0){                this.src='b.jpg';            }else{                this.src='a.jpeg';            }            i++;        });</script>

循环单击:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
显示/影藏元素：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

<script>        $('img').toggle(            function(){                this.src='b.jpg';            },            function(){                this.src='a.jpeg';            }        )</script>

2.鼠标移上去/移开之后图片改变

hover：鼠标循环移入移出

<script>        $('img').hover(            function(){                this.src='b.jpg';            },            function(){                this.src='a.jpeg';            }        )</script>

3.实现图片左滑右滑特效。

animate：动画
jQuery优点：强悍的选择器以及内含遍历

<style>        *{            font-family:"微软雅黑" ;        }        .hero{            width: 130px;            overflow: hidden;            float: left;            margin-left: 20px;            margin-top: 20px;        }</style><script>        $('img').hover(            function(){                $(this).animate({                    'margin-left':'-40px'                },500)            },            function(){                $(this).animate({                    'margin-left':'0px'                },500)            }        )</script>

4.单击标题切换内容（显示/隐藏内容）

单击页面的标题h1，找到他的下一个兄弟，让它消失或隐藏
toggle()：()里面如果是函数，代表是事件，否则代表的是方法。

<script>    $('h1').click(function(){        $(this).next().toggle();    })</script>切换的时候还可以加时间<script>        $('h1').click(function(){            $(this).next().toggle(1000);        })</script>

5.水果移动选择

<head>        <meta charset="utf-8" />        <title>jQuery第一天</title>        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>        <style>            *{                font-family:"微软雅黑" ;            }            select{                width: 100px;                height: 120px;            }        </style>    </head>    <body>        <h1>水果选择</h1>        <form action="javascript:">            <select name="" id="s1" size="2">                <option value="">西瓜</option>                <option value="">冬瓜</option>                <option value="">香蕉</option>                <option value="">橘子</option>            </select>            <input type="button" value="" id="btn" />            <select name="" id="s2" size="2"></select>        </form>    </body>    <script>        $('#btn').click(function () {            $('#s1 option:selected' ).appendTo('#s2');        })    </script>

水果复制选择

<script>        $('#btn').click(function () {            $('#s1 option:selected' ).clone().appendTo('#s2');        })</script>

阅读全文

0 0