jQuery必會的增刪改查Dom操作1(val、next、prve、nextAll、nextUntil、siblings、parent 、 parents、closest、slice

jQuery必會的增刪改查Dom操作1

nextAll 和 nextUntil

slice

取賦值相關方法：val

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <form action="" method="GET">
        <h3>選擇你喜歡的明星</h3>
        <select name="star" id="">
            <option value="s">喬丹</option>
            <option value="a">詹姆斯</option>
            <option value="b">庫裏</option>
        </select>
        <h3>一句話簡單介紹你喜歡的明星</h3>
        <input type="text" name="easy" value="cst">
        <h3></h3>
        三分準：<input type="checkbox" name="special" value="three">
        組織好：<input type="checkbox" name="special" value="org">
        突破強：<input type="checkbox" name="special" value="strong">
        <h3>具體描述該明顯的技術特點</h3>
        <textarea name="des" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="login">
    </form>
    <div></div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    val 獲取表單相關的元素的val值;
    注意如果.val沒有指定獲取的某個標籤裏面的value值，默認選擇顯示第一個；
    */
    console.log($('input[type=checkbox]').eq(1).val())
    console.log($('input[type=checkbox]').val())

    //獲取from表單裏面全部的name屬性值和value屬性值並且用&拼接起來
    console.log($('form').serialize())
    //獲取from表單裏面全部的name屬性值和value屬性值，展示形式以json對象來展示
    console.log($('form').serializeArray())

    //val 賦值,選中input的type爲checkbox屬性的標籤，給value值加上它們的下標
    $('input[type=checkbox]').val(function (index, oldValue) {
        return oldValue + index
    })
    //val 賦值，選中特定的元素進行賦值
    $('input[type=checkbox]').eq(1).val('xyz')
    /*
    val 賦值，如果給from表單外的標籤進行賦值，
        賦值的內容是不會顯示到標籤裏面的，但是值是可以賦值的。
    */
    $('div').val('xyz');
    console.log('查看div裏面的vaule值：', $('div').val())

</script>

</html>

next和prev對比看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- next -->
    <button>change</button>
    <span class="demo">xyz</span>
    <p class="demo">lm</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        點擊button按鈕，使button按鈕下面的第一個p標籤改變，
        而上面的body裏面的button按鈕下面的第一個標籤是span，
        所以點擊button按鈕不會有任何變化。
    */
    $('button').click(function () {
        $(this).next('p').css({ fontSize: "30px", color: "#ff0000" })
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- prev -->
    <span class="demo">xyz</span>
    <p class="demo">lm</p>
    <button>change</button>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        點擊button按鈕，使button按鈕上面的第一個p標籤改變
    */
    $('button').click(function () {
        $(this).prev('p').css({ fontSize: "30px", color: "#ff0000" })
    })
</script>

</html>

nextAll 和 nextUntil

nextAll

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="wrapper">
    全選：<input type="checkbox">
    banana：<input type="checkbox">
    apple：<input type="checkbox">
    orange：<input type="checkbox">
    <input type="submit" value="login">
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  $('input[type="checkbox"]').eq(0).click(function () {
    if ($(this).prop('checked')) {
      $(this).nextAll('input[type="checkbox"]').prop('checked', true);
    } else {
      $(this).nextAll('input[type="checkbox"]').prop('checked', false);
    }
  })
</script>

</html>

nextUntil

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- nextUntil -->
    <!-- 單獨一個參數 -->
    <div class="wrapper">
        <h1>水果</h1>
        全選：<input type="checkbox">
        banana：<input type="checkbox">
        apple：<input type="checkbox">
        orange：<input type="checkbox">

        <h1>nba</h1>
        全選：<input type="checkbox">
        Rose：<input type="checkbox">
        Curry：<input type="checkbox">
        James：<input type="checkbox">

        <input type="button" value="submit">
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //水果和nba是兩個部分，點擊全選兩個互不影響
    $('h1').next().click(function () {
        if ($(this).prop('checked')) {
            /*
            nextUntil('h1', 'input[type="checkbox"]'):
                第一個參數表示：到哪裏爲止(h1)；
                第二個參數表示：只選擇中間的那些元素('input[type="checkbox"]');
                
            this當前的元素，到下一個元素h1
            */
            $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);
        } else {
            $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', false);
        }
    })
</script>

</html>

siblings

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- siblings -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        獲取第二個li的全部兄弟節點，
        使之發生改變css({backgroundColor:'#0000ff',fontSize: '10px'}
    */
    $('li')
        .eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
        .siblings().css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- siblings -->
    <ul>
        <span>span1</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <span>span2</span>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <span>span3</span>

    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        獲取第二個li,全部的span兄弟節點.
    */
    $('li')
        .eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
        .siblings('span').css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>

</html>

parent & parents & closest & offsetParent

parent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- parent -->
    <div class="shop" data-id="101">
        <p>basketball-nike</p>
        <button>add</button>
    </div>

    <div class="shop" data-id="102">
        <p>basketball-adidas</p>
        <button>add</button>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //獲取button的父級
    $('button').click(function () {
        console.log($(this).parent()
        )
    })

</script>

</html>

parents

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- parents -->
    <div class="shop" data-id="101">
        <div>
            <p>basketball-nike</p>
            <button>add</button>
        </div>
    </div>

    <div class="shop" data-id="102">
        <div>
            <p>basketball-adidas</p>
            <button>add</button>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //獲取button的所有父級（parents()不填參數的情況下）
    console.log($('button').eq(0).parents())

    //獲取指定的父級(parents()填寫參數)
    console.log($('button').eq(0).parents('.shop'))

</script>

</html>

closest

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>

    </style>
</head>

<body>
    <!-- closest -->
    <div class="wrapper">
        <ul>
            <li>
                <ul data-id="101">
                    <li>nike</li>
                    <li>200$</li>
                    <li>
                        <button>add</button>
                    </li>
                </ul>
            </li>
            <li>
                <ul data-id="102">
                    <li>nike</li>
                    <li>200$</li>
                    <li>
                        <button>add</button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        closest:
            離你最近的，滿足條件的父級或者多個父級(如果自己滿足條件，那麼會選擇自己)。
    */
    console.log($('button').eq(0).closest('button'))

    //獲取標籤 <ul data-id="101"></ul>裏面的data-id屬性的值
    console.log($('button').eq(0).closest('ul').attr('data-id'))

</script>

</html>

offsetParent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper {
            position: relative;
        }
    </style>
</head>

<body>
    <!-- offsetParent -->
    <div class="wrapper">
        <div class="box">
            <span>123</span>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
       獲取有定位的父級
    */
    console.log($('span').offsetParent())

</script>

</html>

slice

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
      
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
     slice():
         左閉右開
    */
    //獲取第四個li到第五個li的背景顏色變成紅色
    console.log($('li').slice(3, 5).css({ backgroundColor: "#ff0000" }))

</script>

</html>

jQuery必會的增刪改查Dom操作1(val、next、prve、nextAll、nextUntil、siblings、parent 、 parents、closest、slice

jQuery必會的增刪改查Dom操作1

取賦值相關方法：val

next和prev對比看

next

prev

nextAll 和 nextUntil

nextAll

nextUntil

siblings

parent & parents & closest & offsetParent

parent

parents

closest

offsetParent

slice

杭州的 IT 崩盤了麼？

開源高性能結構化日誌模塊NanoLog

Python 潮流週刊#55：分享 9 個高質量的技術類信息源！

Azure Virtual Network (22) 多訂閱使用Azure DNS解析問題 Windows Azure Platform 系列文章目錄

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

盒模型及盒模型應用

VSCode快速編輯html(Emmet)

jQuery之工具方法extend插件擴展

數據結構之核心基礎之線性結構

微信 URL Scheme詳細參數、判斷是否爲微信內置瀏覽器

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結