jQuery例子

本文展示了如何使用jQuery为HTML列表隔行设置不同背景色,以及通过选择器和ID处理DOM元素。示例中,偶数行被设置为红色,奇数行为绿色。同时,对一组`div`元素进行了样式调整,包括设置宽度、高度、边框,并为具有特定类别的`div`设置粉色背景,为带有特定ID的`div`添加标题和居中样式。这些例子演示了jQuery在DOM操作和样式应用方面的基本用法。
摘要由CSDN通过智能技术生成

使用jQuery实现隔行变色

<body>

    <ul>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
        <li>one step one footprint!</li>
    </ul>

    <script>
       let li = $("li");
       for (let i = 0; i < li.length; i++) {

           if(i % 2==0){
               li[i].style.backgroundColor="red";
           }else {
               li[i].style.backgroundColor="green";
           }
       }
    </script>
</body>

利用不同选择器可以处理好整体与部分的关系

<body>
    <div class="important" id="first"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="important"></div>

    <script>
        let div = $("div");
        let important = $(".important");
        let first = $("#first");

        div.css("weight","100%").css("height","80px").css("border","black solid 1px");
        important.css("backgroundColor","pink");
        first.html("标题");
        first.css("textAlign","center");
    </script>
</body>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值