jquery的標籤屬性操作

使用attr()方法對html標籤屬性進行操作，attr如果引數是一個引數，表示獲取html標籤的屬性值，如果是兩個引數則是設定標籤屬性名以及物件的屬性值

//獲取標籤屬性
$('div').attr('title')
//設定標籤屬性
$('div').attr('id','box')

通過物件可以設定多個屬性

$('input').attr({
    'type':'text',
    'title':'哈哈哈'
})

移除標籤屬性：removeAttr()

$('div').removeAttr('title');

jquery對DOM物件屬性操作

• prop獲取的是DOM的物件屬性，主要用於checked的屬性獲取，進行與後端資料庫的存取
• removeProp刪除DOM的物件屬性

jquery對類樣式的操作

• addClass新增類
• removeClass刪除類

操作類名的時候要使用對類樣式的操作，而不是對標籤屬性的操作（attr()）

jquery對值的操作

• text() 獲取匹配元素包含的文字內容，相當於js中的innerText

//獲取文字內容
$('div').text()

//設定文字內容
$('div').text('hahaha')

• html()獲取選中標籤元素中所有的內容,相當於js中的innerHtml

//獲取標籤元素中所有內容
console.log($('div').html())
//設定標籤元素中的內容
$('div').html(<h2>哈哈哈</h2>)
 

• val()用於表單控制元件中獲取值，比如input textarea select等等相當於js中的value

jquery文件操作

插入操作

• 父.append(子) 插入到父級的最後一個元素
• 子.appendTo(父) 插入到父級的最後一個元素，插入後可以對子元素進行其他操作
• 父.prepend(子) 插入到父級的第一個元素
• 子.prependTo(父) 插入到父級的第一個元素
• 子元素可以是一段字串、jsDOM物件，也可以是jquery物件，如果子元素是一個jquery物件，那麼進行的是一個移動操作

    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $(function () {
            //append()方法與appendTo方法，插入到最後
            $('.box').append('<h2>哈哈哈</h2>');
            $('<span>這是一個span標籤</span>').appendTo($('.box')).click(function () {
                alert($(this).text());
            });
            //prepend()方法與prependTo()方法，插入到第一，用法與append和appendTo一樣
            $('.box').prepend('<p>這是第一個p標籤，插入到第一個</p>');
            $('<p>這是第二個p標籤，插入到第一個</p>').prependTo($('.box'));
        })
    </script>
 

• 父.after(子) 在匹配的元素之後插入內容 與 子.insertAfter(父)
• 父.before(子) 在匹配的元素之前插入內容 與 子.insertBefor(父)

替換操作

• replaceWith()：將所有匹配的元素替換成指定的HTML或DOM元素。

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

• replaceAll():用匹配的元素替換掉所有 selector匹配到的元素

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

刪除和清空操作

• remove()刪除節點後，事件也會刪除

$('div').remove();

• detach()刪除節點後，事件會保留

var $btn = $('button').detach()
 //此時按鈕能追加到ul中,事件還是可以使用
 $('ul').append($btn)

• empty():清空元素中所有後代節點

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