web前端之锋利的jQuery七：jQuery表格应用、其他应用

最新推荐文章于 2022-09-29 00:13:59 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2022-09-29 00:13:59 发布

阅读量632

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53492758

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

web前端之锋利的jQuery七：jQuery表格应用、其他应用

内容主要包含表格应用、字体变换、网页选项卡

jQuery表格应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery对表单的操作</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $("tbody>tr").click(function(){
            $(this).addClass("selected")
            .siblings().removeClass("selected");
        });

    });
    </script>
    <style type="text/css">
    table{
        border: 1px black solid;
    }
    .even{
        background: #FFF38F;
    }
    .odd{
        background: #ffffee;
    }
    .selected{
        background: red;
    }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>杭州</th>
            </tr>
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>杭州</th>
            </tr>
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>杭州</th>
            </tr>
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>杭州</th>
            </tr>
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>杭州</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

其他应用：

1.字体变换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>网页字体大小</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("span").click(function(){
            var thisEle=$("#para").css("font-size");//获取到当前font-size的值
            var textFontSize=parseInt(thisEle,10);//使用parseInt去掉单位
            var cName=$(this).attr("class");
            if(cName == "bigger"){
                textFontSize += 2;
            }else if(cName == "smaller"){
                textFontSize -= 2;
            }
            $("#para").css("font-size",textFontSize);
        });
    });
    </script>
    <style type="text/css">
    .bigger{
        background: #ccc;
        padding: 5px;
    }
    .smaller{
        background: blue;
        color: #fff;
        padding: 5px;
    }
    </style>
</head>
<body>
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
        </div>
        <div>
            <p id="para">
                jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
            </p>
        </div>
    </div>
</body>
</html>

2.网页选项卡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>网页选项卡</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var $div_li=$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")//添加li元素高亮
                .siblings().removeClass("selected");//去除其他li元素高亮
            var index=$div_li.index(this);//获取当前单击的li元素在全部li元素中的索引
            $("div.tab_box>div").eq(index).show()
                .siblings().hide();
        });
    });
    </script>
    <style type="text/css">
    .tab_menu ul li{
        float: left;
        background: #ccc;
        list-style-type:none;
        margin-right: 5px;
        border: 1px solid black;
        position: 3px;
    }
    .tab_menu ul li.selected{
        background: #fff;
    }
    .tab_box{
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px black solid;
        margin-top: 20px
    }

    .hide{
        display: none;
    }

    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>时事</div>
            <div class="hide">体育</div>
            <div class="hide">娱乐</div>
        </div>
    </div>
</body>
</html>

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之锋利的jQuery七：jQuery表格应用、其他应用

web前端之锋利的jQuery七：jQuery表格应用、其他应用内容主要包含表格应用、字体变换、网页选项卡jQuery表格应用：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xht
复制链接

扫一扫