jQuery练习题

Posted 2020-12-27 caseywei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery练习题相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jq获取鼠标的位置</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: #585858;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">

</div>
</body>
<script type="text/javascript">
    $(‘#d‘).mousemove(function(f){
        /* var xx = f.originalEvent.x|| f.originalEvent.layerX||0;
         var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/
        var xx = f.pageX;
        var yy = f.pageY;
        $(this).text(xx+‘,‘+yy);
    })
    /*根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下
     e.pageX和e.originalEvent.x的区别（因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象）。

     根据jq源码，jq版e对象下的pageX和原生的pageX是一致的，但是增加了对旧版本IE的实现部分。

     于是题目可蜕化为原生e.pageX与e.x的区别，以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。
     考虑jq的跨平台特性，我们在不清楚具体情况的时候，直接通过其补丁的实现方式来猜测属性的定义。

     根据jq对无原生pageX的浏览器的补丁实现
     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 )
     - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
     到这里我们已经基本清楚pageX的涵义，是包含了滚动条的计算的。

     实际上，e.pageX在各（支持的）浏览器下的表现都是一致的，都是表达点击位置相对于整个文档的位置，用题主的话说就是“计算了滚动条”。
     兼容性来说，e.pageX除了在IE系列中低于IE9的版本中是不支持的，IE9+和其它主流浏览器全部一致支持。

     可是e.x的情况很复杂……
     首先，fx不支持e.x。这没啥好说的。

     其次，除IE外的其它主流浏览器，opera、chrome（以及其它同内核的浏览器），都支持e.x属性,
     其值为“相对可视区域的坐标”——没错，对它们来说，e.x == e.clientX。用题主的话说就是“没有计算滚动条”。

     再来看看e.x属性的发明者IE。IE全系列支持e.x
     被点击对象所在的坐标系（即最近一个指定position: relative的tag的左上角的border外边界为原点）的坐标位置。
     如果自身及上层均没有指定position: relative属性，则蜕变为相对于“相对可视区域的坐标”。

     题外话，通过F12发现，IE一旦涉及滚动条后计算居然不是整像素数，而是会出现误差小数的！*/
</script>
</html>

<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript获得鼠标位置</title>
</head>
<body>
<script>
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
鼠标X轴:
<input id=xxx type=text>
鼠标Y轴:
<input id=yyy type=text>
</body> -->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>遍历数组【2，4，6，8】，为每个元素加1</title>

</head>
<body>

</body>
<script type="text/javascript">
    var a=‘2468‘;
    var reg=/[0-9]/g;//为什么用/^[0-9]&/g不可以输出数组
    b=a.match(reg);
    for(var i=0;i< b.length;i++){
        alert(parseInt(b[i])+1);
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        div{
            background-color: #585858;
            color: white;
            float: left;
            margin: 10px 20px 10px;
            padding: 45px 10px 20px 10px;
            width: 150px;
            height: 50px;
            text-align: center;

        }
        .a{
            background-color: #ff6600;
        }
    </style>
</head>
<body>
<div>资讯动态</div>
<div>产品世界</div>
<div>市场营销</div>
</body>
<script>
    $(‘div‘).mouseover(function(){
        // $(this).css(‘background-color‘,‘#ff6600‘);
        $(this).addClass(‘a‘);
    }).mouseout(function(){
        //$(this).css(‘background-color‘,‘#585858‘);
        $(this).removeClass(‘a‘);
    })
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>单选水果，点击改变图片，显示选择的水果图片</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
    <img src="../../image/水果.jpg" />
    选择你喜欢的水果
    <input type="radio" value="pg" name="sg"/>苹果
    <input type="radio" value="cz" name="sg"/>橙子
    <input type="radio" value="yt" name="sg"/>油桃
    <input type="radio" value="mht" name="sg"/>猕猴桃
    <input type="radio" value="cm" name="sg"/>草莓
    <button>点击查看水果图片</button>
</div>

</body>
<script type="text/javascript">
    $(‘button‘).click(function () {//button点击的方法，click
        if ($(‘input:radio[value="pg"]:checked‘).val()) {
            $(‘img‘).attr(‘src‘,‘../../image/苹果.jpg‘);

        }
        if ($(‘input:radio[value="cz"]:checked‘).val()) {
            $(‘img‘).attr(‘src‘,‘../../image/橙子.jpg‘);
        }
        if ($(‘input:radio[value="yt"]:checked‘).val()) {
            $(‘img‘).attr(‘src‘,‘../../image/油桃.jpg‘);
        }
        if ($(‘input:radio[value="mht"]:checked‘).val()) {
            $(‘img‘).attr(‘src‘,‘../../image/猕猴桃.jpg‘);
        }
        if ($(‘input:radio[value="cm"]:checked‘).val()) {
            $(‘img‘).attr(‘src‘,‘../../image/草莓.jpg‘);
        }
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        table{
            border: 1px solid black;
            border-collapse:collapse;
        }
        td{
            border: 1px solid black;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>书名</td>
        <td>价格</td>
    </tr>
    <tr id="tr2">
        <td>看得见风景的房间</td>
        <td>￥30.00</td>
    </tr>
    <tr>
        <td>60个瞬间</td>
        <td>￥60.00</td>
    </tr>

</table>
<button id="button1">增加一行</button>
<button id="button2">删除第二行</button>
<button id="button3">修改标题样式</button>
<button id="button4">复制最后一行</button>
</body>
<script type="text/javascript">
    var td=$("<tr><td>幸福从天而降</td><td>￥18.50</td></tr>");
    $(‘#button1‘).click(function(){
        var tdc=td.clone();
        $(tdc).insertAfter($(‘#tr2‘));
        $(‘#tr2‘).after($(tdc));
    })
    $(‘#button2‘).click(function(){
        var tr2=$(‘table tr:eq(2)‘);//eq(2)表示第三行。
        tr2.remove();
    })
    $(‘#button3‘).click(function(){
        $(‘table tr:eq(0)‘).
                css({‘color‘:‘red‘,‘font-size‘:‘20px‘,‘font-weight‘:‘bolder‘});
    })
    $(‘#button4‘).click(function(){
        $(‘table tr:last-child‘).clone().appendTo(‘table‘);
    })
</script>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(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>
</head>
<body>
<img src="../img/b.jpg"/>
<br />
<h1>请选择水果</h1>
<input type="radio" name="fruit" value="a" checked="checked" />香蕉
<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" />西瓜
<input type="button" id="b" value="改变图片" />
</body>
</html>
以上是关于jQuery练习题的主要内容，如果未能解决你的问题，请参考以下文章