jQuery——属性操作和DOM操作的相关方法

属性操作和DOM操作的相关方法

操作属性的方法操作类的方法操作文本值的方法操作css样式的方法操作元素尺寸和位置的方法操作节点的方法

操作属性的方法

属性和属性节点有什么区别？ 任何对象都有属性，但是只有DOM对象才有属性节点

原生js操作属性

//获取属性节点的值 console.log(DOM元素.setAttribute('属性名称')) //修改属性节点的值 DOM元素.setAttribute('属性名称','值')

jQuery操作属性的方法 1、attr()

//作用：获取或者设置属性节点的值 //如果传递一个参数，代表获取属性节点的值 //如果传递两个参数，代表设置属性节点的值 // 注意： // 如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值 // 如果是设置：找到多少个元素，就会设置多少个元素 // 如果是设置：如果设置的属性节点不存在，那么系统会自动新增 $('span').attr('class'); $('span').attr('class','box');

2、removeAttr()

//作用：删除属性节点,如果要删除多个，则在后面添加空格 //注意：会删除所有找到的元素指定的属性节点 $('span').removeAttr('class');

3、prop()

//特点和attr一致

4、removeProp()

//特点与removeAttr一致

注意：prop方法不仅能够操作属性，还能够操作属性节点 官方推荐：在操作属性节点时，具有 true 和 false 两个属性的属性节点，如checked，selected或者disabled 使用prop(),其他的情况使用attr()

操作类的方法

1、addClass()

//作用：添加一个类 //如果要添加多个，多个类名之间用空格隔开 $('div').addClass('class1')

2、removeClass()

//作用：删除一个类 //如果要删除多个，多个类名之间用空格隔开 $('div').removeClass('class1')

3、toggleClass()

//作用：切换类 //有就删除，没有就添加 $('div').toggleClass('class1')

操作文本值的方法

1、html()

//获取代码片段 console.log($('div').html()); //设置代码片段 $('div').html('<p>我是段落</P>')

2、text()

//获取文本 console.log($('div').text()) //设置文本 $('div').text('我是设置的文本')

3、val()

//作用：给input设置或者获取内容 //获取 console.log($('input').val()) //设置 $('input').val('请输入内容')

操作css样式的方法

获取css样式

console.log($('div').css('width'))

逐个设置

$('div').css('width':'100px');

链式设置

$('div').css('width':'100px').css('height':'100px');

批量设置

$('div').css({ width:'100px', height:'100px', background:'red' })

操作元素尺寸和位置的方法

1、width()

//获取元素的宽度 console.log($('div').width()); //设置元素的宽度 $('div').width('500px')

2、height()

//获取元素的高度 console.log($('div').height()); //设置元素的宽高度 $('div').height('500px')

3、offset()

//获取元素距离窗口的偏移位 console.log($('div').offset().left); //设置元素的偏移位 $('div').offset({ left:'10' })

4、position()

//获取元素距离定位元素的偏移位 console.log($('div').position().left); //注意：该方法只能获取，不能设置

5、scrollTop()

//获取元素滚动的偏移位 console.log($('div').scrollTop()); //获取整个网页的滚动偏移位（保证浏览器兼容，需要用以下写法） console.log($('body').scrollTop() + $('html').scrollTop()); //设置元素滚动的偏移位 $('div').scrollTop(300); //设置网页的滚动偏移位（保证浏览器兼容） $('html,body').scrollTop(300)

操作节点的方法

添加节点 1、append()

//将元素添加到指定元素内部的最后 var $li = $('<li>新增的li</li>') $('ul').append($li)

2、append()

//将元素添加到指定元素内部的最前面 var $li = $('<li>新增的li</li>') $('ul').prepend($li)

3、after()

//将元素添加到指定元素的后面 var $li = $('<li>新增的li</li>') $('ul').after($li)

4、before()

//将元素添加到指定元素的前面 var $li = $('<li>新增的li</li>') $('ul').before($li)

删除节点 1、remove()

//删除指定元素 //也可以将要删除元素的类名以字符串的形式传入即可 $('div').remove()

2、empty()

//删除指定元素的内容和子元素，指定元素自身不会被删除 $('div').empty()

替换节点 1、replaceWith()

//替换所有匹配的元素为指定元素 var $h6 = $('<h6>我是标题6</h6>'); $('h1').replaceWith($h6)

复制节点 1、clone() 浅复制节点（只会复制元素，不会复制元素的事件）

//1、浅复制一个元素 var $li = $('li:first').clone(false) //2、将复制的元素添加到ul中 $('ul').append($li)

深复制节点（会复制元素，也会复制元素的事件）

//1、深复制一个元素 var $li = $('li:first').clone(true) //2、将复制的元素添加到ul中 $('ul').append($li)