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

来源：互联网发布：詹姆斯总决赛数据科比编辑：程序博客网时间：2024/06/05 10:30

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>

1 0