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

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()