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

相关文章