jQuery對標籤、類樣式、值、文件、DOM物件的操作
阿新 • • 發佈:2018-12-01
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()