86-88

時間  2020-02-02
原文   原文鏈接

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

上圖：點擊開關就能夠顯示或隱藏內容html

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

在jQuery中可使用toggleClass('hide')， 若是有hide就移出，沒有就添加，效果與上面代碼同樣。ide

屬性操做

enter description here

上圖：使用attr能夠獲取標籤中屬性的值this

enter description here

上圖：attr()中傳入兩個值，若是這個屬性不存在就是新增這個屬性和值，若是屬性存在這是修改這個屬性的值。code

enter description here

上圖：刪除屬性htm

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時，就勾選ip

enter description here

上圖：當false時，就不勾選。ci

狀態編輯框

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

代碼說明：rem

以前狀態編輯框使用的方式是經過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

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程