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

操作属性的方法

属性和属性节点有什么区别？
任何对象都有属性，但是只有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('
我是段落
')

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
')
$('ul').append($li)

2、append()

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

3、after()

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

4、before()

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

删除节点
1、remove()

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

2、empty()

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

替换节点
1、replaceWith()

//替换所有匹配的元素为指定元素
var $h6 = $('
我是标题6
');
$('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)