jQuery基礎（2）

1、jQuery的屬性操做

       jQuery的屬性操做分爲四部分：

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

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

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

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

一、attr()、removeAttr()

       a、attr() 

　　// 獲取屬性值：attr()的參數爲一個字符串時，是獲取該屬性對應的屬性值
　　var id = $('div').attr('id');
　　console.log(id); // 打印div的id屬性值

　　// 設置屬性值
　　// 1.設置一個屬性，設置div的class爲box
　　$('div').attr('class','box');
　　// 2.設置多個屬性，參數爲對象，鍵值對存儲
　　$('div').attr({title:'haha',class:'happy'});

       b、removeAttr()　　

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

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

二、prop()、removeProp()

       a、prop()

　　　　返回屬性的值：$(selector).prop(property)

　　　　設置單個屬性和值：$(selector).prop(property,value)

　　　　設置多個屬性和值：$(selector).prop({property:value, property:value,...})

 

       b、removeProp()

　　　　removeProp()方法用來刪除由prop()方法設置的屬性集。

　　　　語法：$(selector).removeProp(property);

　　　　注意: 不要使用此方法來刪除原生的屬性（property）。

 

　　總結：何時用attr()，何時用prop()？

　　　　只有true和false兩種屬性值時用prop()，其餘則使用attr()。

 

三、addClass()、removeClass()、toggleClass()

       a、addClass()

　　　　爲匹配的元素添加指定的類名，以下：

    　　$('div').addClass("box");   // 追加一個類名，原有類名不變

爲匹配的元素添加多個類名，以下：　　

        $('div').addClass("box box2");   // 追加多個類名，用空格隔開

      b、removeClass()

              爲匹配的元素刪除一個或多個指定的類名，以下：

        $('div').removeClass('box')； // 刪除類名box，也能夠刪除多個類名，類名用空格隔開

              移除所有的類，以下：　　

        $('div').removeClass();

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

 

       c、toggleClass()

              若是指定類名存在（不存在）就刪除（添加），以下：

        $('div').toggleClass(‘active’);

四、html()、text()、val()；

       獲取值：

    html()  // 獲取選中標籤元素中全部的內容（包括標籤）
    text()  // 獲取匹配元素中包含的文本內容（不包括標籤）
    val()   // 用於表單控件中獲取value值，好比input、textarea、select等

       設置值：　　

    // 設置該元素的全部內容，會替換掉，標籤中原來的內容（標籤會被渲染）
    $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
    // 設置該元素全部的文本內容（標籤不會被渲染）
    $('#box').text('<a href="https://www.baidu.com">百度一下</a>');
    // 設置表單控件中的value值
    $('input').val('設置的值')；

       總結：無參數是獲取值，有參數是設置值。

 

2、jQuery的樣式操做

一、獲取，例如：

    $('#box').css('color')；  // 取得id爲box的元素的color樣式屬性的值

二、設置，例如：

       a、設置一個樣式，例如：

    $('#box').css('color'，'red')；  // 設置id爲box的元素的color值爲red

       b、設置多個樣式，例如：　　

    $('#box').css({'color':'red', 'font-size':'16px', 'background':'#ddd'})；

3、jQuery的文檔操做

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

一、插入操做

       a、父元素.append(子元素)、子元素.appendTo(父元素)，例如：

　　var oLi = document.createElement('li');
　　oLi.innerHTML = '哈哈哈';
　　$('ul').append('<li>1233</li>');  // string
　　$('ul').append(oLi);  // js對象
　　$('ul').append($('#app'));  // jQuery對象，此jQuery對象從原位置移走

　　// 將新的子元素添加到父元素，併爲這個子元素添加類名active
　　$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active') ;

       總結：上述兩種方法都能爲父元素在後邊添加一個新的子元素，要添加的元素能夠是string，element（js對象），jQuery對象，而且若是追加的是jQuery對象，那麼這個jQuery對象將從原位置上消失，也就是說，從原位置移動了所選的父元素中。

 

       b、父元素.prepend(子元素)、子元素.prependTo(父元素)  

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

       總結：上述兩種方法都能爲父元素在前邊添加一個新的子元素，要添加的元素能夠是string，element（js對象），jQuery對象，而且若是添加的是jQuery對象，那麼這個jQuery對象將從原位置上消失，也就是說，從原位置移動了所選的父元素中。

 

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

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

       總結：上述兩種方法都能在元素後邊插入一個新的兄弟元素，要插入的元素能夠是string，element（js對象），jQuery對象，而且若是插入的是jQuery對象，那麼這個jQuery對象將從原位置上消失，也就是說，從原位置移動了所選元素的後邊。

 

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

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

       總結：上述兩種方法都能在元素前邊插入一個新的兄弟元素，要插入的元素能夠是string，element（js對象），jQuery對象，而且若是插入的是jQuery對象，那麼這個jQuery對象將從原位置上消失，也就是說，從原位置移動了所選元素的前邊。

 

二、刪除操做

       a、$(selector).remove();   例如： 

    $('ul').remove(); // 刪除節點後，事件也會刪除

       b、$(selector).detach();   例如：　　

    var $btn = $('button').detach()
    // 此時按鈕能追加到ul中
    $('ul').append($btn)  // 刪除節點後，事件會保留

       c、$(selector).empty();   例如：　　

    // 清空選中元素中的全部後代節點
    $('ul').empty()  // 清空掉ul中的子元素，保留ul

三、修改操做

       a、$(selector).replaceWith(content);  

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

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

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

              解釋：替換全部，將全部的h2標籤替換成p標籤。例如：

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

四、克隆操做

       $(selector).clone();  

       解釋：克隆匹配的DOM元素，例如：

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