愈來愈少人用JQuery，但你就不學了嗎？（3）

時間  2020-07-14
標籤 愈來愈少 jquery 學了 欄目 JQuery 简体版
原文   原文鏈接

如須要跟多資料請點擊下方圖片⬇（掃碼加好友→備註66）imagejavascript

Jquery Dom操做

​ jQuery也提供了對HTML節點的操做，並且在原生js的基礎之上進行了優化，使用起來更加方便。css

​ 經常使用的從幾個方面來操做，查找元素（選擇器已經實現）；建立節點對象；訪問和設置節點對象的值，以及屬性；添加節點；刪除節點；刪除、添加、修改、設定節點的CSS樣式等。<font color="red">注意：如下的操做方式只適用於jQuery對象。</font>html

操做元素的屬性

獲取屬性

方法 說明 舉例
attr(屬性名稱) 獲取指定的屬性值，操做 checkbox 時，<br />選中返回 checked，沒有選中返回 undefined。 attr('checked')<br />attr('name')
prop(屬性名稱) 獲取具備true和false兩個屬性的屬性值 prop('checked') 
<form action="" id="myform">
    <input type="checkbox" name="ch" checked="checked"/>    aa
    <input type="checkbox" name="ch" /> bb
</form>

<script type="text/javascript">
    var ch = $("input[type='checkbox']")
    console.log(ch)
    ch.each(function(idx, em){
        console.log(idx + "-" + $(em) + "=" + this)
        console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
        console.log('--------------')
    })
</script>

設置屬性

方法 說明 舉例
attr(屬性名稱，屬性值) 設置指定的屬性值，<br />操做 checkbox 時，<br />選中返回 checked，<br />沒有選中返回 undefined。 attr('checked',’checked’)<br />attr('name',’zs’)
prop(屬性名稱，屬性值) 設置具備true和false的屬性值 prop('checked',’true’)

移除屬性

方法 說明 舉例
removeAttr(屬性名) 移除指定的屬性 removeAttr('checked') 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>屬性操做</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <pre>
            <h5>1.attr()</h5>
            設置或者返回元素的屬性 ;
            <h5>2.prop()</h5>
            設置 具備 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled。
        </pre>
        <hr />
        <a href="http://www.baidu.com" id="a1">百度</a>
        <a href="http://www.sina.com" id="a2">新浪</a>
        <input type="checkbox" name="all" checked="checked"/>全選 
    </body>
    <script type="text/javascript">
        // 獲取屬性值：attr
        console.log($('#a1').attr('href'));
        console.log($(':checkbox').attr('name'));
        // 若未選中顯示undefined，選中顯示 checked
        console.log($(':checkbox').attr('checked'));        
        // 獲取屬性值：prop
        // 若未選中顯示false，選中顯示 true
        console.log($(":checkbox").prop('checked'));         
        console.log($('#a2').prop('href'))
        // 設置屬性值
        $('#a1').attr('href','https://jquery.com');
        $(":checkbox").prop("checked",false);
        // 移除屬性
        $('#a2').removeAttr('href');
    </script>
</html>

操做元素的樣式

​ 對於元素的樣式，也是一種屬性，因爲樣式用得特別多，因此對於樣式除了當作屬性處理外還能夠有專門的方法進行處理。java

方法 說明
attr(「class」) 獲取class屬性的值，即樣式名稱
attr(「class」,」樣式名」) 修改class屬性的值，修改樣式
addClass(「樣式名」) 添加樣式名稱
css() 添加具體的樣式
removeClass(class) 移除樣式名稱

增長元素的具體樣式，格式：jquery

1）css({‘樣式名’:’樣式值’,’樣式名2’:’樣式值2’})

例：css({"background-color":"red","color":"#fff"});

2）css(「樣式名」,」樣式值」)

例：css('color','white')
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>設置元素樣式</title>
        <script src="jquery-3.4.1.js" type="text/javascript" ></script>
        <style type="text/css">
            div{
                padding: 8px;
                width: 180px;
            }
            .blue{
                background: blue;
            }
            .larger{
                font-size: 30px;
            }
            .green {
                background : green;
            }
        </style>
    </head>
    <body>
        <h3>css()方法設置元素樣式</h3>
        <div id="conBlue" class="blue larger">天藍色</div>
        <div id="conRed">大紅色</div>
        <div id="remove" class="blue larger">天藍色</div>
    </body>
    <script type="text/javascript">
        // 獲取樣式名稱
        console.log($("#remove").attr("class"));
        // 修改樣式，那麼id爲remove的元素樣式class只有green
        // $('#remove').attr("class","green")
        // 添加樣式名稱，class名稱 --疊加
        // $('#conBlue').addClass("blue larger");
        // 添加元素具體樣式
        // { "":"" , "":"" }   名:值     對
        $('#conRed').css({"background-color":"red","color":"#fff"});
        $('#remove').css('color','red');
        // 移除樣式
        // $("#remove").removeClass("blue larger");
    </script>
</html>

操做元素的內容

​ 對於元素還能夠操做其中的內容，例如文本，值，甚至是html。app

方法 說明
html() 獲取元素的html內容
html("html,內容") 設定元素的html內容
text() 獲取元素的文本內容，不包含html
text("text 內容") 設置元素的文本內容，不包含html
val() 獲取元素value值
val(‘值’) 設定元素的value值 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>操做內容</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <h3><span>html()和text()方法設置元素內容</span></h3>
        <div id="html"></div>
        <div id="text"></div>
        <input type="text" name="uname" value="oop" />
    </body>
    <script type="text/javascript">
        // 獲取HTML內容，包括HTML標籤
        console.log($('h3').html());
        // 獲取文本內容，不包括HTML標籤
        console.log($('h3').text());
        // 獲取value值
        console.log($('[name=uname]').val());
        // 設置
        $('#html').html("<p>使用html設置,看不到標籤</p>");
        $('#text').text("<p>使用text設置,能看到標籤</p>");
        $('[name=uname]').val("哈哈哈");
        // console.info("abc");
        // console.log("abc");
        // console.warn("abc")
        // console.error("abc");
    </script>
</html>

建立元素

​ 在jQuery中建立元素很簡單，直接使用核心函數便可dom

$(‘元素內容’);
$('<p>this is a paragraph!!!</p>');

添加元素

方法 說明
prepend(content) 在被選元素內部的開頭插入元素或內容，被追加的 content 參數，能夠是字符、HTML 元素標記。
$(content).prependTo(selector) 把 content 元素或內容加入 selector 元素開頭
append(content) 在被選元素內部的結尾插入元素或內容，被追加的 content 參數，能夠是字符、HTML 元素標記。
$(content).appendTo(selector) 把 content元素或內容插入selector 元素內，默認是在尾部
before() 在元素前插入指定的元素或內容:$(selector).before(content)
after() 在元素後插入指定的元素或內容:$(selector).after(content) 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>追加</title>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div {
                margin: 10px 0px;
            }
            span{
                color: white;
                padding: 8px
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h3>prepend()方法前追加內容</h3>
        <h3>prependTo()方法前追加內容</h3>
        <h3>append()方法後追加內容</h3>
        <h3>appendTo()方法後追加內容</h3>
        <span class="red">男神</span>
        <span class="blue">偶像</span>
        <div class="green">
            <span >小鮮肉</span>
        </div> 
    </body>
</html>
<script type="text/javascript">
    var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>動態建立span</span>";
    // 一、使用prepend前加內容
    $("body").prepend(str);

    // 二、使用prependTo前加內容
    $("<b>開頭</b>").prependTo('body');

    // 三、使用append後加內容
    $("body").append(str);
    // $("div").append($('.red')); // 當把已存在的元素添加到另外一處的時候至關於移動

    // 四、使用appendTo後追加內容
    $(str).appendTo('body');
    // $('.blue').appendTo("div");  
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插入元素</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h3>before() 和 after()方法在元素以前後插入內容</h3>
        <span class="green">財大氣粗</span>
    </body>
</html>
<script type="text/javascript">
     var str1 = "<span class='red'>土豪</span>";
     var str2 = "<span class='blue'>暴發戶</span>";
     $(".green").before(str1); // 前置元素
     $(".green").after(str2); // 後存元素
</script>

刪除元素

方法 說明
remove() 刪除所選元素或指定的子元素，包括整個標籤和內容一塊兒刪。
empty() 清空所選元素的內容 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>刪除元素</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h3>刪除元素</h3>
        <span class="green">jquery<a>刪除</a></span>
        <span class="blue">javase</span>
        <span class="green">http協議</span>
        <span class="blue">servlet</span>
    </body>
</html>
<script type="text/javascript">
    // 刪除所選元素 或指定的子元素
    // $("span").remove();
    // 刪除樣式爲blue的span
    // $("span.blue").remove();
    // 清空元素
    // $("span").empty();
    // $(".green").empty(); 
</script>

遍歷元素

​ each()ide

​ $(selector).each(function(index,element)) :遍歷元素函數

​ 參數 function 爲遍歷時的回調函數，oop

​ index 爲遍歷元素的序列號，從 0 開始。

​ element是當前的元素，此時是dom元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>遍歷元素</title>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3>遍歷元素 each()</h3>
        <span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http協議</span>
        <span class="green">servlet</span>
    </body>
    <script type="text/javascript">
        $('span').each(function (idx , e) {
            console.log(idx + " ---> " + $(e).text());
        })
    </script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程