jQuery对标签、类样式、值、文档、DOM对象的操作

时间:2021-02-28 14:42:45

jquery的标签属性操作

使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值

.prop()适用于checked和radio(返回true或者false)的属性的获取以及对属性状态进行操作。

//获取标签属性
$('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()