86-88

服务端 2019-10-25 23:00:27 阅读次数: 0

jQuery样式及属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>

</head>
<body>

    <input id="i1" type="button" value="开关">
    <div class="c1 hide">qweasdzzxc</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1").click(function () {
            if ($('.c1').hasClass('hide')){     //如果c1中有hide标签
                $('.c1').removeClass('hide');   //就移出hide标签
            }else {
                $('.c1').addClass('hide');      //如果没有，就添加hide标签
            }

        })
    </script>

</body>
</html>

enter description here

上图：点击开关就可以显示或隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>

</head>
<body>

    <input id="i1" type="button" value="开关">
    <div class="c1 hide">qweasdzzxc</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1").click(function () {
            $('.c1').toggleClass('hide');  
        })
    </script>

</body>
</html>

代码说明：

在jQuery中可以使用toggleClass('hide')， 如果有hide就移出，没有就添加，效果与上面代码一样。

属性操作

enter description here

上图：使用attr可以获取标签中属性的值

enter description here

上图：attr()中传入两个值，如果这个属性不存在就是新增这个属性和值，如果属性存在这是修改这个属性的值。

enter description here

上图：删除属性

prop

prop用于操作checkbox和radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>

</head>
<body>

    <input id="i2" type="checkbox">

    <input id="i1" type="button" value="开关">
    <div class="c1 hide">qweasdzzxc</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1").click(function () {
            $('.c1').toggleClass('hide');
        })
    </script>

</body>
</html>

enter description here

上图：$('#i2').prop('checked',true); 当为true时，就勾选

enter description here

上图：当false时，就不勾选。

状态编辑框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>

</head>
<body>

<a onclick="addElement();">添加</a>
<table border="1">
    <tr>
        <td target="hostname">1.1.1.11</td>
        <td target="port">80</td>
        <td target="test">test</td>
        <td target="test">test</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.12</td>
        <td target="port">80</td>
        <td target="test">test</td>
        <td target="test">test</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.13</td>
        <td target="port">80</td>
        <td target="test">test</td>
        <td target="test">test</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.14</td>
        <td target="port">80</td>
        <td target="test">test</td>
        <td target="test">test</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
</table>

<div class="model hide">
    <div>
        <input name="hostname" type="text">
        <input name="port" type="text">

    </div>
    <div>
        <input type="button" value="取消" onclick="cancleModel();">
    </div>
</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>
    function addElement() {
        $(".model,.shadow").removeClass("hide");
    }
    function cancleModel() {
        $(".model,.shadow").addClass("hide");
        $('.model input[type="text"]').val("");
    }

    $('.edit').click(function () {
        $(".model,.shadow").removeClass("hide");

        var tds = $(this).parent().prevAll();
        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();

            var a1 = '.model input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2;
            $(temp).val(text);
        })
    })

</script>

</body>
</html>

代码说明：

之前状态编辑框使用的方式是通过var port = $(tds[0]).text();获取td标签，然后使用$('.model input[name="hostname"]').val(host); 来赋值；

但是如果当数据发生变化时，比如我们新增了 <td target="test">test</td>标签，增加多少个，我们就需要相对的新增$(tds[0]).text(); 和 input[name="hostname"]').val(host); 来获取值和赋值，这样非常不灵活，且比较麻烦。

<td target="hostname">1.1.1.11</td>  我们在td标签中添加了自定义属性 target；
通过var n = $(this).attr('target');  来获取所有td标签中target属性的值，也就是hostname；
通过var text = $(this).text(); 来获取文本内容 也就是1.1.1.11和80这些内容。

var a1 = '.model input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
//最终temp拼接的字符串是   .model input[name="hostname"]

通过$(temp).val(text);  将text赋值到input对话框中。

TAB切换菜单

enter description here

上图： 途中红框中有多个菜单，每个菜单下面对应的内容也不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;  <!--默认只显示内容一，将内容二和三隐藏-->
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;  <!--居中-->
        }
        .menu .menu-item{
            float: left;    <!--默认每个菜单占一行，使用float后悬浮在一行-->
            border-right: 1px solid red;
            padding: 0 8px;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;  <!--设置边框-->
        }

    </style>

</head>
<body>

    <div style="width: 700px; margin: 0 auto">      <!--居中-->
        <div class="menu">
            <div class="menu-item">菜单一</div>
            <div class="menu-item">菜单二</div>
            <div class="menu-item">菜单三</div>
        </div>
        <div class="content">
            <div>内容一</div>
            <div class="hide">内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>

</body>
</html>

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;    <!--悬浮在菜单时，鼠标显示为一个小手-->
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;  <!--让选中的菜单背景为红色-->
        }

    </style>

</head>
<body>

    <div style="width: 700px; margin: 0 auto">
        <div class="menu">
            <div class="menu-item active">菜单一</div>
            <div class="menu-item">菜单二</div>
            <div class="menu-item">菜单三</div>
        </div>
        <div class="content">
            <div>内容一</div>
            <div class="hide">内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>

</body>
</html>

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;
        }

    </style>

</head>
<body>

    <div style="width: 700px; margin: 0 auto">
        <div class="menu">
            <div class="menu-item active" a="1">菜单一</div>    <!--添加自定义属性a-->
            <div class="menu-item" a="2">菜单二</div>
            <div class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>     <!--添加自定义属性b，b属性的值与a属性的值相同-->
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {     <!--点击获取菜单标签-->
            $(this).addClass('active').siblings().removeClass('active');    <!--点击哪个菜单就添加active，被点击的菜单背景色就会变为红色，其他兄弟标签移除active-->
        })
    </script>

</body>
</html>

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;
        }

    </style>

</head>
<body>

    <div style="width: 700px; margin: 0 auto">
        <div class="menu">
            <div class="menu-item active" a="1">菜单一</div>
            <div class="menu-item" a="2">菜单二</div>
            <div class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var value = $(this).attr('a');      
            $('.content').children("[b='" + value + "']").removeClass('hide').siblings().addClass('hide');
        })
    </script>

</body>
</html>

代码说明：

var value = $(this).attr('a');    获取a属性的值，用于查找对应b属性相应值的标签。

$('.content').children("[b='" + value + "']")   前半部分就是通过拼接的方式，通过value来获取b属性对应值的标签

.removeClass('hide').siblings().addClass('hide');  后半部分移除当前content中b标签的hide，这样就会显示点击标签对应的内容，然后将其他兄弟标签添加hide，隐藏内容。

enter description here

上图：点击菜单三，然后找到内容三，将其hide移除掉，然后将其他内容标签添加hide，就实现了点击相应标签就显示相应的内容效果。

索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;
        }

    </style>

</head>
<body>

<div style="width: 700px; margin: 0 auto">
    <div class="menu">
        <div class="menu-item active" >菜单一</div>
        <div class="menu-item" >菜单二</div>
        <div class="menu-item" >菜单三</div>
    </div>
    <div class="content">
        <div >内容一</div>
        <div class="hide" >内容二</div>
        <div class="hide" >内容三</div>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
         var v = $(this).index(); 
         console.log(v)
    })
</script>

</body>
</html>

代码说明：

我们将menu和content中的自定义属性删除；

var v = $(this).index();   获取点击菜单的索引

enter description here

上图：获取到点击菜单的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;
        }

    </style>

</head>
<body>

<div style="width: 700px; margin: 0 auto">
    <div class="menu">
        <div class="menu-item active" >菜单一</div>
        <div class="menu-item" >菜单二</div>
        <div class="menu-item" >菜单三</div>
    </div>
    <div class="content">
        <div >内容一</div>
        <div class="hide" >内容二</div>
        <div class="hide" >内容三</div>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
         var v = $(this).index();
         var m = $('.content').children().eq(v);
         console.log(m)
    })
</script>

</body>
</html>

代码说明：

var m = $('.content').children().eq(v);  根据v这个索引值获取content下面对应索引的children标签

enter description here

上图：可以看到菜单二和菜单三的标签，能看到hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 8px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .active{
            background-color: red;
        }

    </style>

</head>
<body>

<div style="width: 700px; margin: 0 auto">
    <div class="menu">
        <div class="menu-item active" >菜单一</div>
        <div class="menu-item" >菜单二</div>
        <div class="menu-item" >菜单三</div>
    </div>
    <div class="content">
        <div >内容一</div>
        <div class="hide" >内容二</div>
        <div class="hide" >内容三</div>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
         var v = $(this).index();
         var m = $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');

    })
</script>

</body>
</html>

代码说明：

var m = $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
对点击的索引标签移出hide，兄弟标签添加hide。

enter description here

猜你喜欢

转载自blog.51cto.com/daimalaobing/2445619
88
86
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022