jQuery小知识点

最新推荐文章于 2024-09-19 14:37:27 发布

从此江山别

最新推荐文章于 2024-09-19 14:37:27 发布

阅读量118

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43894722/article/details/84842521

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

替换

<body>
<ul>
    <p>1</p>

    <p>2</p>

    <p>3</p>

    <p>4</p>

    <p>5</p>
</ul>
</body>
<script src="../../../jquery-3.1.1.min.js"></script>
<script>
    var ps = $("p");
    ps.map(function (index) {
        var value = ps[index].innerHTML;
        $(ps[index]).replaceWith("<li>" + value + "</li>");
    })
</script>

获取宽高

<style>
        #ccy1{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px solid yellow;
        }
    </style>
</head>
<body>
    <div id="ccy1">1</div>
    <div id="ccy2">2</div>
</body>
<script src="../../../jquery-3.1.1.min.js"></script>
<script>
    /*var offset = $("#ccy2").offset();
    console.log(offset.left);
    console.log(offset.top);*/
    /*$("#ccy2").offset({
        top:100,
        left:200
    });*/
    console.log($("#ccy1").width());
    console.log($("#ccy1").height());
    console.log($("#ccy1").innerWidth());
    console.log($("#ccy1").innerHeight());
    console.log($("#ccy1").outerWidth());
    console.log($("#ccy1").outerHeight());
</script>

打地鼠动画

<body>
<table width="200" height="200" border="1px solid black">
    <tr>
        <td id="td0"></td>
        <td id="td1"></td>
        <td id="td2"></td>
    </tr>
    <tr>
        <td id="td3"></td>
        <td id="td4"></td>
        <td id="td5"></td>
    </tr>
    <tr>
        <td id="td6"></td>
        <td id="td7"></td>
        <td id="td8"></td>
    </tr>
</table>
</body>
<script src="../../../jquery-3.1.1.min.js"></script>
<script>
    var random = 0;
    var space = 1000;
    setInterval(function () {
        var random = Math.floor(Math.random() * 9);
        $("td").css("backgroundColor", "white");
        $("td").eq(random).css("backgroundColor", "red");
        $("td").click(function (e) {
            var id = e.target.id;//td*
            var num = parseInt(id.substr(2));
            if (num == random) {
                console.log("哎呦！");
            } else {
                console.log("打不着！打不着！")
            }
        });
    }, space);

</script>

截取

<body>
<input type="text" value="123456"/>
</body>
<script src="../../../jquery-3.1.1.min.js"></script>
<script>
    $("input").select(function(e){
        var start = e.target.selectionStart;
        var end = e.target.selectionEnd;
        console.log($(this).val().substring(start,end));
    })
</script>