0726 jQuery练习

最新推荐文章于 2022-10-13 09:14:07 发布

xuezhezhiying

最新推荐文章于 2022-10-13 09:14:07 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/xuezhezhiying/article/details/76158289

版权

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");
});

xuezhezhiying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0726 jQuery练习

1、使用jQuery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置。body>p>鼠标的位置:span>span>p>body>script>$(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY);});script>2、
复制链接

扫一扫