jquery案例3——jq隔行换色_html-js-css

一、案例描述

隔行换色

二、案例效果演示

三、案例整体代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/jQuery.min.js">script>
    <style>
        ul li {
            margin-bottom: 10px;
            padding: 5px;
        }
    style>
    <script>
        $(function() {
            //隔行变色
            $("ul li:odd").css("background", "green");
            $("ul li:even").css("background", "yellowgreen");
        });
    script>
head>

<body>
    <ul>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。li>
    ul>

body>

html>

四、总结

直接搬到自己电脑上不生效，请更改一下jq引入的路径。
或者换成线上地址

<script src="http://code.jquery.com/jquery-latest.js">script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/944521.html

jquery案例3——jq隔行换色

发表评论

评论列表（0条）