近期知识点梳理（前端 jQuery）

最新推荐文章于 2022-08-11 09:21:35 发布

wmklalala

最新推荐文章于 2022-08-11 09:21:35 发布

阅读量205

点赞数

分类专栏：前端开发 CSS 文章标签： jquery 前端 css

本文链接：https://blog.csdn.net/wmklalala/article/details/125041955

版权

前端开发同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

1.给整个div块添加超链接

<a href="#"> 
    <div></div> 
</a>

2.DWZ框架，打开新的标签页

navTab.openTab

3.点击按钮控制元素出现与隐藏

给默认隐藏的元素设置display:none; 然后通过jQuery的show()和hide()方法控制元素出现与隐藏，无需移除display:none的样式。

4.奇偶行交错的table css样式 http://t.csdn.cn/9ngZ2

<head>
    <title></title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
</head>
<body>
    <table width="90%" class="table">
        <caption>
            <h2>
                车间能源消耗比例</h2>
        </caption>
        <thead>
            <tr>
                <th>
                    车间
                </th>
                <th>
                    产量
                </th>
                <th>
                    电量
                </th>
                <th>
                    单耗
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
    </table>
</body>
</html>

5.DWZ默认折叠侧边栏 DWZ使用问题解析01

$("#siderbar.toggleCollapse div").click();
//$("#siderbar.toggleCollapse div").trrger("click"); 这个我用了无效

6.HTML原生单选按钮

<input name="Fruit" type="radio" value="" />

设置相同的name实现单选

默认选中 check="true"

可结合<c:if>实现默认选中

<c:forEach items="${userRole}" var="role" varStatus="u">
    <input type="radio" name="userRole" value="${role.id}"
        <c:if test="${userUpdate.get('userRole') eq role.roleName}">checked="checked"</c:if>
        />${role.roleName}
</c:forEach>

7.点击修改按钮显示的文本

$("#btn").text("111");

wmklalala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
近期知识点梳理（前端 jQuery）

1.给整个div块添加超链接<a href="#"> <div></div> </a>2.DWZ框架，打开新的标签页navTab.openTab3.点击按钮控制元素出现与隐藏给默认隐藏的元素设置display:none; 然后通过jQuery的show()和hide()方法控制元素出现与隐藏，无需移除display:none的样式。4.奇偶行交错的table css样式 http://t.csdn.cn/9ngZ2
复制链接

扫一扫