jQuery----DOM操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_44711712/article/details/94175611

jQuery----DOM操作

一，获取和设置 html 和 text和“表单”中的内容：
html() ----- 获取“元素中的【HTML内容】”
html(‘value’) ----- 设置“元素中的【HTML内容】”
text() ----- 获取“元素中的【文本内容】”
text(‘value’) ----- 设置“元素中的【文本内容】”
val() ----- 获取“表单中的【文本内容】”
val(‘value’) ----- 设置“表单中的【文本内容】

二，“设置”和“获取”和“删除”【属性值】
attr(‘属性名’) ------ 获取“属性值”
attr(‘属性名’,‘属性值’) ------ 设置“属性值”
removeAttr(‘属性名’) -------删除“属性”

三，“设置”和“获取”行内【CSS属性值】

css(‘属性名’) ------ 获取CSS“属性值”
css(‘属性名’,‘属性值’) ------ 设置CSS“属性值

Css({
属性名:‘属性值’,
属性名:‘属性值’
})

四，“添加”和“移除”【class】
1—【添加class】：
addClass(‘class’) 添加“一个”class
addClass(‘class1 class2’) 添加“多个”class

2—【移除class】：
removeClss(‘red’) 移除“一个”class
removeClass(‘red box pox’) 移除“多个”class

hasClass(‘red’) 判断CLASS类中是否存在red

五，单一class切换器
toggleClass(‘class’)

六，jQuery提供的“CSS功能”方法
width() ------- 获取【宽度】【 CSS宽度】
innerWidth() — 获取元素宽度【“内边距” + CSS宽度】
outerWidth() — 获取元素宽度【“内边距、边框” + CSS宽度】
outerWidth(true) — 获取元素宽度【内边距、边框、外边距 + CSS宽度】

height() ----- 获取【高度】
innerHeight() — 获取元素高度【“内边距”】
outerHeight() — 获取元素高度【“内边距、边框”】
outerHeight(true) — 获取元素高度【“内边距、边框、外边距”】

七，获取“元素”的不同位移
offset().top ----- 距离页面顶部距离
offset().left ----- 距离页面左边距离

position().top -----距离 “父节点”顶部距离必须要在绝对定位情况下，才全兼容
position().left -----距离“父节点”左边距离必须要在绝对定位情况下，才全兼容

$(window).width() //----获取可视区域宽度
$(window).height() //----获取可视区域高度

八，获取、设置滚动条偏移距离
作用对象—window对象

scrollTop() ---- 获取滚动条的垂直位移值
scrollLeft() ----- 获取滚动条的水平位移值

scrollTop(value) ---- 设置滚动条的垂直位移值

九，DOM节点操作
var box = $(‘要创建的代码’) ----- 创建【新DOM节点】

append() ---- 将新节点插入到元素内部的“最后位置”
prepend() ----将新节点插入到元素内部的“最前位置”

appendTo() ----将已存在的节点移到元素内部的“最后位置”
prependTo()----将已存在的节点移到元素内部的“最前位置”

after() ---- 将新节点插入到元素的“后面位置”
before() ---- 将新节点插入到元素的“前面位置”
insertAfter() ---- 将已有节点移到元素的“后面位置”
insertBefore() ---- 将已有节点移到元素的“前面位置”

wrap() ----- 在节点外部包裹代码
unwrap() ----- 移除节点外部包裹代码
wrapInner() ----- 在节点内部包裹代码