Web前端基礎(17):jQuery基礎(四)

時間 2019-11-19

標籤 web 前端基礎 jquery 欄目 HTML 简体版

原文原文鏈接

1. jQuery的屬性操做

jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做javascript

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()css

DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()html

類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()java

值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()jquery

1.1 html屬性操做

1.1.1 attr()

設置屬性值或者返回被選元素的屬性值。瀏覽器

//獲取值：attr()設置一個屬性值的時候 只是獲取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//設置值
//1.設置一個值 設置div的class爲box
$('div').attr('class','box')
//2.設置多個值，參數爲對象，鍵值對存儲
$('div').attr({name:'hahaha',class:'happy'})

1.1.2 removeAttr()

移除屬性app

//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//刪除多個屬性
$('#box').removeAttr('name class');

1.2 DOM屬性操做

1.2.1 prop()

prop() 方法設置或返回被選元素的屬性和值。dom

當該方法用於返回屬性值時，則返回第一個匹配元素的值。學習

當該方法用於設置屬性值時，則爲匹配元素集合設置一個或多個屬性/值對。this

返回屬性的值：

$(selector).prop(property)

設置屬性和值：

$(selector).prop(property,value)

設置多個屬性和值：

$(selector).prop({property:value, property:value,...})

1.2.2 attr()和prop()的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  由於attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，天然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具備原生的style對象屬性的，因此輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })

        })
    </script>
    
</body>
</html>

何時使用attr()，何時使用prop()？

1.是有true,false兩個屬性使用prop()。

2.其餘則使用attr()。

1.3 類樣式操做

1.3.1 addClass

爲每一個匹配的元素添加指定的類名。

$('div').addClass("box");//追加一個類名到原有的類名

還能夠爲匹配的元素添加多個類名。

$('div').addClass("box box2");//追加多個類名

1.3.2 removeClass

從全部匹配的元素中刪除所有或者指定的類。

移除指定的類（一個或多個）

$('div').removeClass('box')；

移除所有的類

$('div').removeClass();

能夠經過添加刪除類名，來實現元素的顯示隱藏。

代碼以下：

var tag  = false;
$('span').click(function(){
    if(tag){
        $('span').removeClass('active')
        tag=false;
    }else{
        $('span').addClass('active')
        tag=true;
    }    
})

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">張三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

1.3.3 toggleClass

若是存在（不存在）就刪除（添加）一個類。

語法：toggleClass('box')

$('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
})

1.4 值操做

1.4.1 html

html()：是獲取選中標籤元素中全部的內容

$('#box').html();

設置值：設置該元素的全部內容會替換掉標籤中原來的內容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

1.4.2 text

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

$('#box').text();

設置該全部的文本內容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

值爲標籤的時候，不會被渲染爲標籤元素，只會被當作值渲染到瀏覽器中。

1.4.3 val

val()用於表單控件中獲取值，好比input textarea select等等

$('input').val();

val()用於表單控件中獲取值，好比input textarea select等等

$('input').val('設置了表單控件中的值')；

2. 操做input的value值

表單控件是咱們的重中之重，由於一旦牽扯到數據交互，離不開form表單的使用，好比用戶的註冊登陸功能等

那麼經過上章知識點咱們瞭解到，咱們在使用jquery方法操做表單控件的方法：

$(selector).val()//設置值和獲取值

看以下HTML結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 設置cheked屬性表示選中當前選項 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃飯
            <input type="checkbox" value="b" />睡覺
            <input type="checkbox" value="c" checked=""/>打豆豆
    
    <!-- 下拉列表 option標籤內設置selected屬性 表示選中當前 -->
            <select name="timespan" id="timespan" class="Wdate"   >  
                <option value="1">8:00-8:30</option>  
                <option value="2" selected="">8:30-9:00</option>  
                <option value="3">9:00-9:30</option>  
            </select>  
            <input type="text" name="" id="" value="111" />
    </form>
    
</body>
</html>

操做表單控件代碼以下：

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            // 1、獲取值
                //1.獲取單選框被選中的value值
                console.log($('input[type=radio]:checked').val())

                //2.複選框被選中的value,獲取的是第一個被選中的值
                console.log($('input[type=checkbox]:checked').val())

                //3.下拉列表被選中的值

                var obj = $("#timespan option:selected");
                // 獲取被選中的值
                var  time  = obj.val();  
                console.log(time);
                // 獲取文本
                var  time_text  = obj.text();  
                console.log("val:"+time+" text"+ time_text );

                //4.獲取文本框的value值
                console.log($("input[type=text]").val())//獲取文本框中的值

                // 二.設置值
                //1.設置單選按鈕和多選按鈕被選中項
                $('input[type=radio]').val(['112']);
                $('input[type=checkbox]').val(['a','b']);

                //2.設置下拉列表框的選中值，必須使用select
                /*由於option只能設置單個值，當給select標籤設置multiple。
                那麼咱們設置多個值,就沒有辦法了，可是使用select設置單個值和多個值均可以
                */
                $('select').val(['3','2'])
          
                //3.設置文本框的value值
                $('input[type=text]').val('試試就試試')

        })
    
    </script>

3. 文檔操做

以前js中我們學習了js的DOM操做,也就是所謂的增刪改查DOM操做。經過js的DOM的操做，你們也能發現，大量的繁瑣代碼實現咱們想要的效果。那麼jQuery的文檔操做的API提供了便利的方法供咱們操做咱們的文檔。

看一個以前咱們js操做DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '趙雲';
oUl.appendChild(oLi);

3.1 插入操做

(1) append

語法：

父元素.append(子元素)

追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素。

代碼以下：

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

若是追加的是jquery對象，那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。

(2) appendTo

語法：

父元素.prepend(子元素)；

追加到某元素，子元素添加到父元素

$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

要添加的元素一樣既能夠是stirng 、element(js對象) 、 jquery元素。

(3) prepend

語法：

父元素.prepend(子元素)；

前置添加，添加到父元素的第一個位置。

$('ul').prepend('<li>我是第一個</li>')

(4) prependTo

語法：

子元素.prependTo(父元素)；

前置添加，添加到父元素的第一個位置

$('<a href="#">小灰灰</a>').prependTo('ul')

(5) after和insertAfter

語法：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.insertAfter(兄弟元素)；

在匹配的元素以後插入內容

$('ul').after('<h4>我是一個h3標題</h4>')
$('<h5>我是一個h2標題</h5>').insertAfter('ul')

(6) before和insertBefore

語法：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.insertBefore(兄弟元素)；

在匹配的元素以後插入內容

$('ul').before('<h3>我是一個h3標題</h3>')
$('<h2>我是一個h2標題</h2>').insertBefore('ul')

3.2 克隆操做

語法：

$(選擇器).clone();

克隆匹配的DOM元素

$('button').click(function() {

// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
    $(this).clone(true).insertAfter(this);
})

3.3 修改操做

(1) replaceWith

語法：

$(selector).replaceWith(content);

將全部匹配的元素替換成指定的string、js對象、jquery對象。

//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

(2) replaceAll

語法：

$('<p>哈哈哈</p>')replaceAll('h2');

替換全部。將全部的h2標籤替換成p標籤。

$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

3.4 刪除操做

(1) remove

語法：

$(selector).remove();

刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$('ul').remove();

(2) detach

語法：

$(selector).detach();

刪除節點後，事件會保留

var $btn = $('button').detach()
//此時按鈕能追加到ul中
$('ul').append($btn)

(3) empty

語法：

$(selector).empty();

清空選中元素中的全部後代節點

//清空掉ul中的子元素，保留ul
$('ul').empty()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。