jQuery对dom操作的方法进行了封装,简化了操作,而且也把大部分的兼容问题解决了。
jQuery的遍历:
祖先:parent()
parents()
parentsUntil()
后代:children()
find()
兄弟:siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
过滤:eq()
DOM元素及属性操作
1:设置(获取)元素内容
html()
text()
val()
2:操作元素属性
.attr()
使用方式:
$('div').attr('type') 获取属性值
$('div').attr('type','button') 设置属性值
$('div').attr({ //就是用son数据的形式来赋值
'date':'fujichao',
'date1':'fujichao1'
})
$('div').removeAttr('title')
3:操作元素样式
css()
css(‘name’,‘name2’) // 获取多个属性值
css(‘name’,‘value’) //设置属性值
css({
name:value,
name:value
})
addClass()给一个元素添加一个class
removeClass给一个元素删除class
toggleClass() 如果有属性就删除,如果没有就添加。
jQuery的节点操作
1:创建节点
var box = $('<div id="divId"><div>');
2:插入节点
append()
prepend() 插入到元素的第一个子节点位置
3:包裹节点
$('div').wrap('<strong></strong>');在div外层包裹一层strong
$('div').wrap('<strong>123</strong>');在外层添加一层有内容的strong
$('div').wrap('<strong><em></em></strong>') 添加多个标签,就是原先内容在标签中间
移除标签
$('div').unwrap('<strong></strong>') 移除一层标签,一次就移除一层标签
包裹子元素
$('div').wrapInner('<strong></strong>') 把原先子元素都包含在strong标签中。
4:节点操作
复制
$('body').append($('div').clone(true)) 复制节点,复制div节点 (其中clone中的参数如果有true就会把控件所带有的事件也复制。为空时不复制事件) 添加到body中。
删除
$('div').remove() 直接把div控件删除
替换
$('div').replaceWith('<span><span>') 会把该元素及其子元素全部替换成后面的元素