86-88

Server 2019-10-25 23:07:23 views: null

jQuery style and attribute manipulation

<!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

Above: Click the switch can be displayed or hidden content

<!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>

Code Description:

May be used in jQuery toggleClass ( 'hide'), if it is out of the hide, it is not added, the same effect as the above codes.

Property operations

enter description here

Above: attr value can be obtained using the property tag

enter description here

The figure: attr () in passing two values, it modifies the value of the property if the property is new and the property value does not exist, if the attribute exists that is.

enter description here

Above: Delete property

prop

prop for operating a checkbox and 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

Figure: $ ( '# i2') prop ( 'checked', true); when is true, the check.

enter description here

Above: When false, no check.

State edit box

<!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>

Code Description:

之前状态编辑框使用的方式是通过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 to switch menu

enter description here

Top: the way the red box with a plurality of menus, each menu corresponding to different content below

<!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>

Code Description:

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

Above: Click on the menu Third, then find what three out of its hide is removed, and then add additional content hide tag, click on the appropriate label on the realization of the corresponding content is displayed effect.

index

<!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>

Code Description:

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

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

enter description here

Above: Click on the menu for an index of

<!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>

Code Description:

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

enter description here

Above: you can see the menu two and three menu labels to see 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>

Code Description:

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

enter description here

Guess you like

Origin blog.51cto.com/daimalaobing/2445619
Recommended
The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!
Ranking
Getting the basic concepts of ROS + catkin Profile
Spring Learning (2) --- Assembling Beans in the IoC Container
js to get the src attribute of the image regularly
STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud
Short video learning - 3, pandas simple use of pivot_table
Print directory of project configuration log, output log
Understand the difference between vi and vim in Linux in 3 minutes
1 + x certificate Web front-end development HTML5 special exercises
mangodb save and insert the difference
7-1 Family tree processing (50 points) (binary tree solution)
Daily
More
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

Code World

© 2018 codetd.com