jQuery——標簽操作之（樣式、文本內容、屬性、檔案處理）操作-有解無憂

一、標簽操作之樣式操作

樣式類

addClass();      // 添加指定的CSS類名，
removeClass(); // 移除指定的CSS類名，
hasClass();      // 判斷樣式存不存在
toggleClass();  // 切換CSS類名，如果有就移除，如果沒有就添加，

CSS

css("color","red")   //DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red");     //將所有p標簽的字體設定為紅色

位置：

offset()       // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position()    // 獲取匹配元素相對父元素的偏移
scrollTop()   // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()   // 獲取匹配元素相對滾動條左側的偏移
例1
$("#bb").offset({"left":100,"top":100}) 
例2
$(window).scrollTop(0);  // 跳到首頁

.offset()方法允許我們檢索一個元素相對于檔案（document）的當前位置，

和 .position()的差別在于： .position()是相對于相對于父級元素的位移，

示例：

回傳頂部示例

尺寸：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

二、標簽操作之文本內容操作

html

html()是獲取選中標簽元素中所有的內容

html(val)設定值：設定該元素的所有內容 會替換掉 標簽中原來的內容

$('ul').html('<a href="https://www.cnblogs.com/guojieying/p/#">百度一下</a>')
    //可以使用函式來設定所有匹配元素的內容
$('ul').html(function(){
    return '哈哈哈'
})

text

text() 獲取所有匹配元素包含的文本內容

text(val) 設定該所有匹配元素的文本內容

注意：值為標簽的時候 不會被渲染為標簽元素 只會被當做值渲染到瀏覽器中

val

// 用途：val()用于操作input的value值

// 示范一：
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/male">
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/female">
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/none">
$('input[type=radio]').val(['male',])

// 示范二：
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/111">
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/222">
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/333">
$('input[type=checkbox]').val(['111','222'])

三、標簽操作之屬性操作

用于ID等或自定義屬性：

attr(attrName)                               // 回傳第一個匹配元素的屬性值
$('.box2 img').attr('title','美女')          // 為所有匹配元素設定一個屬性值
attr({'title': '美女', 'alt':'圖片被狗吃了'}) // 為所有匹配元素設定多個屬性值
removeAttr('title')                        // 從每一個匹配的元素中洗掉一個屬性

用于checkbox和radio

prop('value') // 獲取value屬性的值
prop('checked',true); // 設定屬性
removeProp('value') // 移除value屬性

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題，為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")，

<h3>愛好</h3>
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/basketball">籃球
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/football">足球
<input type="checkbox" name="hobbies" value="https://www.cnblogs.com/guojieying/p/coding">編程

<h3>性別</h3>
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/male">
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/female">
<input type="radio" name="sex" value="https://www.cnblogs.com/guojieying/p/none">

<script>
    $(':checkbox[value=https://www.cnblogs.com/guojieying/p/football]').prop('checked',true);
    $(':radio[value=https://www.cnblogs.com/guojieying/p/male]').prop('checked',true);
</script>

案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h3>選單</h3>
<input type="button" value="https://www.cnblogs.com/guojieying/p/全選" id="all">
<input type="button" value="https://www.cnblogs.com/guojieying/p/反選" id="reverse">
<input type="button" value="https://www.cnblogs.com/guojieying/p/取消" id="cancel">
<p>
    蒸羊羔<input type="checkbox" name="menu">

</p>
<p>
    蒸鹿茸<input type="checkbox" name="menu">

</p>
<p>
    蒸熊掌<input type="checkbox" name="menu">

</p>
<p>
    啥訓鴨<input type="checkbox" name="menu">

</p>
<p>
    燒雛雞<input type="checkbox" name="menu">

</p>
<p>
    燒子鵝<input type="checkbox" name="menu">

</p>


<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
    $('#all').click(function () {
        $('p input').prop('checked', true);
    });

    $('#reverse').click(function () {
        $('p input').each(function () {
            $(this).prop('checked', !$(this).prop('checked'));
        })
    });

    $('#cancel').click(function () {
        $('p input').prop('checked', false);

    });


</script>
</body>
</html>

案例：全選、反選、取消

四、標簽操作之檔案處理

//內部
$(A).appendTo(B)    // 把A追加到B內部的最后面
$(A).prependTo(B)   // 把A前置到B內部的最前面

//外部
$(A).insertAfter(B)    // 把A放到B外部的后面
$(A).insertBefore(B)    // 把A放到B外部的前面

了解

//內部
$(A).append(B)  // 把B追加到A內部的最后
$(A).prepend(B) // 把B前置到A內部的最前面

//外部
$(A).after(B)    // 把B放到A外部的后面
$(A).before(B)  // 把B放到A外部的前面

移除和清空元素

$('.p1').remove()  // 從DOM中洗掉所有匹配的元素，====>把元素本身刪掉
$('.p1').empty()   // 洗掉匹配的元素集合中所有的子節點====》把元素的子元素都刪掉（包含文本內容）

案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cover {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(150, 150, 150, 0.3);
        }

        .modal {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 50%;
            top: 200px;
            margin-left: -250px;
            background-color: white;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/guojieying/p/新增" id="add">
<table border="1px" cellspacing="0px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Egon</td>
        <td>18</td>
        <td>
            <input type="button" value="https://www.cnblogs.com/guojieying/p/編輯" >
            <input type="button" value="https://www.cnblogs.com/guojieying/p/洗掉" >
        </td>
    </tr>
    </tbody>
</table>
<div ></div>
<div >
    <label for="name">姓名</label><input type="text" id="name">
    <label for="age">年齡</label><input type="text" id="age">
    <input type="button" value="https://www.cnblogs.com/guojieying/p/提交" id="submit">
    <input type="button" value="https://www.cnblogs.com/guojieying/p/取消" id="cancel">
</div>


<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
    // 顯示模態框
    function show() {
        $('.cover').removeClass('hide');
        $('.modal').removeClass('hide');
    }

    // 隱藏模態框
    function hide() {
        $('.cover').addClass('hide');
        $('.modal').addClass('hide');
    }

    // 清除輸入框內容
    function clear() {
        $('#name,#age').val('');
    }

    let current_obj='';
    function bind() {
        // 點擊編輯按鈕，修改全域變數submit_tag='edit',提交時則執行編輯內容的功能；
        $('.edit').click(function () {
            submit_tag = 'edit';
            current_obj=this;
            show();
            let name=$(this).parent().siblings()[1].innerHTML;
            let age=$(this).parent().siblings()[2].innerHTML;

            $('#name').val(name);
            $('#age').val(age);
        });

        $('.del').click(function () {
            let tdList = $(this).parent().parent().nextAll();
            for (let i = 0; i < tdList.length; i++) {
                let num = $(tdList[i]).children()[0].innerHTML;
                $(tdList[i]).children()[0].innerHTML = num - 1;
            }
            $(this).parent().parent().remove();

        });
    }

    // 為現有的編輯和洗掉按鈕系結事件
    bind();

    let submit_tag = '';
    // 點擊新增按鈕，修改全域變數submit_tag='add',提交時則執行添加新內容的功能；
    $('#add').click(function () {
        submit_tag = 'add';
        show();
    });


    // 點擊提交按鈕，根據全域變數submit_tag的值，來執行不同的功能；
    $('#submit').click(function () {
        if (submit_tag == 'add') {
            //添加新內容的功能
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');
            let td3 = document.createElement('td');
            let td4 = document.createElement('td');

            td1.innerHTML = $('tbody tr').length + 1;
            td2.innerHTML = $('#name').val();
            td3.innerHTML = $('#age').val();
            td4.innerHTML = '<input type="button" value="https://www.cnblogs.com/guojieying/p/編輯" >\n' + '<input type="button" value="https://www.cnblogs.com/guojieying/p/洗掉" >';

            $(td1).appendTo(tr);
            $(td2).appendTo(tr);
            $(td3).appendTo(tr);
            $(td4).appendTo(tr);
            $(tr).appendTo($('tbody'));

            bind();
            hide();
            clear()
        } else if (submit_tag == 'edit') {
            //編輯已經存在內容的功能
            let tdL=$(current_obj).parent().siblings();
            tdL[1].innerHTML=$('#name').val();
            tdL[2].innerHTML=$('#age').val();
            hide();
            clear();
        }

    });

    $('#cancel').click(function () {
        clear();
        hide();
    });


</script>
</body>
</html>

表格內容增刪改

替換

replaceWith()
replaceAll()

克隆

clone()
// clone方法不加引數true，克隆標簽但不克隆標簽帶的事件
// clone方法加引數true，克隆標簽并且克隆標簽帶的事件

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
  // clone方法不加引數true，克隆標簽但不克隆標簽帶的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加引數true，克隆標簽并且克隆標簽帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

案例：點擊復制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/135522.html

標籤：jQuery

上一篇：內嵌的CSS樣式

下一篇：jQuery——簡介，使用