<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom相关节点操作</title>
<script src='js/jquery/jquery.min.js'></script>
<script type='text/javascript'>
/* DOM操作管理 属性方法 */
$(function(){
/* 在标签内进行添加 追加后面append 追加前面prepend wrap包裹*/
$('h1').append('<i>列表</i>')
$('h1').prepend('<i>展示</i>')
$('h1').wrap('<h2>包裹</h2>')
/* 外部 插入到前面before 插入到后面after */
$('h1').before('<i>AAA</i>')
$('h1').after('<i>BBB</i>')
$('span').before('<i>like</i>')
$('span').after('<i>hate</i>')
/* 在列表中追加 */
$('ul').append('<li>青媞</li>')
/* 列表中的点击事件 弹出列表中的内容*/
$('li').click(function(){
alert($(this).html())
})
/* 替换 */
$('#t1 span').replaceWith('<i>替换完成</i>')
/* 删除 只是删除内容不会删除标签 */
$('#t2').empty()
/* 删除 标签和内容都会删除 */
$('#t3').remove()
})
/* 树状结构选择器 */
$(function(){
/* 父标签 */
console.log($('.fruit1').parent().html())
/* 子标签 */
console.log($('.fruit2').children().length)
/* 第二个 eq(0)*/
console.log($('.fruit1').children().eq(1).text())
console.log($('.fruit1 li:eq(1)').text())
/*所有兄弟节点 */
console.log($('div').siblings().length)
/* 上一个兄弟 */
console.log($('div').prev().html())
/* 下一个兄弟 */
console.log($('div').next().html())
/* 奇数行 */
console.log($('fruit2 li:odd').css('background','yellow'))
/* 偶数行 */
console.log($('fruit2 li:even').css('background','blue'))
})
</script>
</head>
<body>
<div id='box1'>
<div id='box2'>
<ul class='fruit1'>
<li>apple</li>
<li>pear</li>
</ul>
</div>
<div id='box3'>
<h1 class='t1'>title1</h1>
<h1 class='t2'>title2</h1>
</div>
<ul class='fruit2'>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>葡萄</li>
<li>青媞</li>
<li>芒果</li>
<li>黑布林</li>
</ul>
<h1 class='t3'>title3</h1>
<h1 class='t4'>title4</h1>
</div>
<h1>水果</h1>
<span>水果</span>
<h3>Fruit</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>荔枝</li>
</ul>
<h3 id='t1'><span>演示替换</span></h3>
<h3 id='t2'><span>演示删除</span></h3>
<h3 id='t3'><span>演示全部删除</span></h3>
</body>
</html>
dom中对内容的方法进行操作
dom中对兄弟节点进行操作
网友评论