0726 jQuery练习

来源：互联网发布：思迅天店软件怎么样编辑：程序博客网时间：2024/05/22 03:40

1、使用jQuery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置。

<body><p>鼠标的位置:<span></span></p></body><script>$(document).mousemove(function(e){    $("span").text(e.pageX + ", " + e.pageY);});</script>

2、遍历数组[2，4，6，8]，为每个元素加1

<script>    $(function(){        var arr =[2,4,6,8];        $.each(arr,function(i,item){            alert(item+=1);        });    });</script>
3、鼠标悬停改变样式

<script>    $(function(){        $('div').mouseover(function(){            $(this).css("background-color","red");        }).mouseout(function(){            $(this).css("background-color","#7d7d7d");        })    });</script>
4、单选水果，点击改变图片，显示选择的水果图片

<body><img src="gg.jpg" alt=""/><h3>选择你喜欢的水果：</h3><input type="radio" name="fruit" value="a">苹果<input type="radio" name="fruit" value="b">西瓜<input type="radio" name="fruit" value="c">香蕉<input type="radio" name="fruit" value="d">葡萄<input type="radio" name="fruit" value="e">梨<button id="i1">改变图片</button></body><script>    $(function(){        $("#i1").click(function(){            var val=$("input:checked").val();            switch(val) {                case 'a':                    $("img").attr('src','ti.jpg');                    break;                case 'b':                    $("img").attr('src','mm.jpg');                    break;                case 'c':                    $("img").attr('src','tmm.jpg');                    break;                case 'd':                    $("img").attr('src','tt.jpg');                    break;                case 'e':                    $("img").attr('src','tii.jpg');                    break;            }            });    });</script>

5、

//增加1行

$("#btn1").click(function(){    $("<tr><td>幸福从天而降</td><td>￥18.50</td></tr>").insertAfter("#l1");});

//删除第2行

$("#btn2").click(function(){    $("#l1").remove();});

//修改标题样式

$("#btn3").click(function(){    $("table tr:first-child").css('background-color','blue');});

//复制最后一行

$("#btn4").click(function(){    $("table tr:last-child").clone(true).appendTo("table");});

阅读全文

0 0