JQuery语法练习

最新推荐文章于 2021-09-19 15:37:15 发布

枕梦

最新推荐文章于 2021-09-19 15:37:15 发布

阅读量438

点赞数

分类专栏： HTML5+JQuery 文章标签： JQuery .clone .appendTo .each .pageX .pageY

本文链接：https://blog.csdn.net/qq_37768482/article/details/76216442

版权

HTML5+JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

 
 1.mousemove事件 

 
 2.通过API文档查找获取鼠标位置的函数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1、	请使用jQuery编写一个函数，
    此函数绑定到body的mousemove事件上，可以获取鼠标的位置。-->
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(document).mousemove(function(e){
            $("span").text(e.pageX + ", " + e.pageY);
        });
    </script>
    <title>mousemove</title>
</head>
<body>
    <span></span>
</body>
</html>

 
  2.遍历数组【 
  2 
  ， 
  4 
  ， 
  6 
  ， 
  8 
  】，为每个元素加 
  1 
 

 
  数组的遍历函数 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--2、	遍历数组【2，4，6，8】，为每个元素加1-->
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $.each( [2,4,6,8], function(i, n){
            alert( "Item # " + i + ": " + n +'     遍历数组加1为：      '+(n+1));
        });
    </script>
    <title>遍历数组</title>
</head>
<body>

</body>
</html>

 
鼠标移到菜单上时改变菜单样式 
  

 
   鼠标移出菜单时恢复为原来的样式 
  

 
鼠标的移动（mouseover、mouseout） 
  

 
改变样式（.css） 
  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--3、	鼠标移到菜单上时改变菜单样式
        鼠标移出菜单时恢复为原来的样式-->
    <style>
        div{
            float: left;
            width: 150px;
            height: 40px;
            background-color: #828282;
            border: 1px solid white;
            border-radius: 20px 20px 0 0;
            text-align: center;
            font-size: 18px;
            color: white;
            padding-top: 15px;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            $('div').mouseover(function(){
                $(this).css('background-color','red');
            }).mouseout(function(){
                $(this).css('background-color','#828282');
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div>资讯动态</div>
    <div>产品世界</div>
    <div>市场营销</div>
</body>
</html>

 
单选水果，点击改变图片，显示选择的水果图片 
  

 
获取单选框的属性值(.checked) 
  

2.改变图片（图片地址发生改变.attr()）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--4、	单选水果，点击改变图片，显示选择的水果图片-->
    <style>
        div{
            float: left;
            width: 350px;
            height: 300px;
            overflow: hidden;
        }
        div img{
            width: 350px;
            height: 300px;
        }
        p{
            margin-top: 20px;
            font-size: 30px;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            $('#button').click(function(){
                if ($('#apple').get(0).checked){
                    $("img").attr("src", "../../img/苹果.jpg");
                }else if ($('#banana').get(0).checked){
                    $("img").attr("src", "../../img/香蕉.jpg");
                }else if ($('#grape').get(0).checked){
                    $("img").attr("src", "../../img/葡萄.jpg");
                }else if ($('#pear').get(0).checked){
                    $("img").attr("src", "../../img/梨.jpg");
                }else if ($('#weatermelon').get(0).checked){
                    $("img").attr("src", "../../img/西瓜.jpg");
                }
            })

        })
/*方法二：
        $(function(){
            $("#b").click(function(){
                var val=$("input:checked").val();
                switch(val) {
                    case 'a':
                        $("img").attr('src','../img/a.jpg');
                        break;
                    case 'b':
                        $("img").attr('src','../img/b.jpg');
                        break;
                    case 'c':
                        $("img").attr('src','../img/c.jpg');
                        break;
                    case 'd':
                        $("img").attr('src','../img/d.jpg');
                        break;
                    case 'e':
                        $("img").attr('src','../img/e.jpg');
                        break;
                }
            })
        })	*/
 </script>
    <title>使用getAttribute读取节点的属性值</title>
</head>
<body>
    <div>
        <img src="../../img/水果.jpg" alt="">
    </div>
    <div>
        <p>选择你喜欢的水果：</p><br>
        <input type="radio" name="radio" value="apple" id="apple">苹果
        <input type="radio" name="radio" value="banana" id="banana">香蕉
        <input type="radio" name="radio" value="grape" id="grape">葡萄
        <input type="radio" name="radio" value="pear" id="pear">梨
        <input type="radio" name="radio" value="weatermelon" id="weatermelon">西瓜
        <br><br><br><br>
        <input type="button" name="button" value="改变图片" id="button">
    </div>
</body>
</html>

 
    5 
    、实现如图所示功能

 
表格中增加一行（.append()） 
   

 
删除一行（.remove()） 
   

 
修改标题样式（获取标题属性（table tr:first-child）、修改样式（.css）） 
   

 
复制最后一行（获取最后一行属性（table tr:last-child）、复制（.clone().appendTo()）） 
   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table{
            border: 1px solid black;
            text-align: center;
            border-collapse:collapse;
            width: 500px;
            height: 300px;
        }
        td{
            border: 1px solid black;
        }
        div{
            margin-top: 20px;
        }
        div input{
            margin-left:20px;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            var row_count = 4;
            //增加一行
            $('#a').click(function(){
                var table1 = $('#table1');
                var row = $("<tr></tr>");
                var td = $("<td></td><td></td>");
                row.append(td);
                table1.append(row);
                row_count++;
            })
            //删除第二行
            $('#b').click(function(){
                    $("#table1 tr:gt(0):eq(0)").remove();
            });
            //修改标题
            $('#c').click(function(){
                $('table tr:first-child').css('background-color','red')
            });
            //复制最后一行
            $("#d").click(function(){
                $('table tr:last-child').clone().appendTo($('#table1'))
            });
        })
    </script>
    <title>操作表格</title>
</head>
<body>
    <table id="table1">
        <tr id="1">
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr id="2">
            <td>看得见风景的房间</td>
            <td>￥30.00</td>
        </tr>
        <tr  id="3">
            <td>幸福从天而降</td>
            <td>￥18.50</td>
        </tr>
        <tr  id="4">
            <td>60个幸福瞬间</td>
            <td>￥32.00</td>
        </tr>
    </table>
<div>
    <input type="button" value="增加一行" id="a">
    <input type="button" value="删除第二行" id="b">
    <input type="button" value="修改标题样式" id="c">
    <input type="button" value="复制最后一行" id="d">
</div>
</body>
</html>

枕梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery语法练习

1.请使用jQuery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置。知识点：1.mousemove事件2.通过API文档查找获取鼠标位置的函数  $(documen
复制链接

扫一扫

专栏目录