脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery操作DOM，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一.插入节点
内部插入
apPEnd() 向元素内部追加内容
appendTo() 把元素追加到另一个指定的元素中
PRepend() 向元素内部前置内容
prependTo() 把元素前置到另一个指定的元素中
例：
$("#p1").append("

Hello world

");
$("

Hello world

").apendTo("#p1");


外部插入
after() 在元素之后插入内容
before() 在元素之前插入内容
insertAfter() 把元素插入到另一个指定的元素后面
insertBefore() 把元素插入到另一个指定元素前面


例：
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
//向标签中追加个内容
$('#p1').append('

我是p标签

');
$('#p1').append('我是新来的');
//把这个内容追加到一个标签中
$('

Hello Word

').appendTo('#p1');
//向元素内部最上面追加内容
$('#p1').prepend('

我是前置追加内容

');
//外部追加
//在元素之后追加内容
$('#p2').after('

我在你后面

');
//在元素之前追加内容
$('#p2').before('

我在你前面

');
//把元素插入到另一个指定的元素后面
$('

在后面追加元素

').insertAfter('#p2');
//把元素插入到另一个指定的元素前面
$('

在前面追加元素

').insertBefore('#p2');
})
</script>


3.删除节点
empty() 删除元素中所有的子节点
remove([expr]) 从DOM中删除所匹配的元素
detach([expr]) 从DOM中删除所匹配的元素,所有绑定的事件、附加的数据等都会保留下来
例：
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
//p点击事件
$('#p1').click(function(){
alert('test');
});
//删除元素中所有子节点
$("button:First").click(function(){
$('#p1').empty();
});
//从DOM中删除所匹配的元素
$('button:eq(1)').click(function(){
$p1=$('h1').remove();
})
//从DOM中删除所匹配的元素,所有绑定的事件、附加的数据等都会保留下来
$('button:eq(2)').click(function(){
$p1=$('#p1').detach();
})
//找回删除元素
$('button:eq(3)').click(function(){
$p1.prependTo('body');
})
})
</script>


4.替换节点
replaceWITh(content) 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
例：
<script>
$(function(){
$('button:first').click(function(){
//将所有匹配的元素替换成指定的HTML或DOM元素
//$('p').replaceWith("

我变成了P标签

");
$('p').replaceWith(function(n,val){
console.LOG(n+'-'+val);
//return "

第"+index+"个p被替换为"+val+"标题

"
})
});
$('button:last').click(function(){
//用匹配的元素替换掉所有 selector匹配 到 的元素
$('

我要在前面

').replaceAll('p')
})


})


</script>


5.复制节点
clone([bool]) 克隆匹配的DOM元素并且选中这些克隆的副本
布尔值（true 或者 false）指示事件处理函数是否会被复制
例：
<script>
$(function(){
$(".test").mouseover(function(){
$(this).css('color','red');
});
//如果复制方法里写上true他会把他的事件，css样式都复制过来
$('button:first').click(function(){
$('#p1 .test').clone().appendTo('#p2');
})
$('button:last').click(function(){
$('#p1 .test').clone(true).appendTo('#p2');
})
})
</script>


6.包裹节点
wrap(html|ele) 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
wrapall(html|ele) 将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
例：
<script src="../jquery-1.8.2.js"></script>
<script>


$(function(){
$('button:first').click(function(){
//逐个对P标签进行包裹
$('p').wrap("

")
});
$('button:eq(1)').click(function(){
//取消包裹
$('p').unwrap("

")
});
$('button:eq(2)').click(function(){
//全部的P标签用一个p包裹起来而不是逐个包裹
$('p').wrapAll("

");
});
$('button:eq(3)').click(function(){
//对标签中的内容进行包裹而不带原有的标签
$('p').wrapInner("

")
})
})
</script>


7.属性操作
attr(name|pro|key)
设置或返回被选元素的属性值,适合于用户自定义属性
prop(name|pro|key)
设置或返回被选元素的属性值设置或返回被选元素的属性值,适合于HTML元素本身就带有的固有属性
removeAttr(name) 从每一个匹配的元素中删除一个属性
removeProp(name|pro|key) 只删除变量的值
例：
<script>
$(function(){
//自定义属性用attr可以拿到值而prop拿不到
console.log($(":radio").attr('act'));
console.log($(":radio").prop('act'));
//系统固定属性
console.log($(':radio').attr('name'));
console.log($(':radio').prop('name'));
//更改属性中的值
$(':radio').prop('name','张三');
//更改多个值
$(':radio').prop({type:'checkbox',name:'张思'});
$(':radio').attr('act','王五');
//删除属性带变量名都删除
// $(':radio').removeAttr('act');
//值删除变量的值
// $(':radio').removeProp('name');


})
</script>


8.CSS样式操作
class类操作
addClass(class|fn) 为每个匹配的元素添加指定的类名
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
hasClass(class) 存在类则返回true，不存在则返回false
css样式属性操作
css(name|pro|[,val|fn])
例：
<script>
$(function(){
//为每个元素添加一个指定的类名
$('dd').addClass('menu');
//点击的时候让他触发这个类
$('dd').click(function(){
//哪个dd有这个效果别的效过就删除
$(this).addClass('active').siblings('dd').removeClass('active');
})
$('#p1').click(function(){
//如果存在（不存在）就删除（添加）一个类
$(this).toggleClass('active');
//检测一个类名有没有存在
if($(this).hasClass('active')){
$(this).html('已赞');
}else{
$(this).html('赞');
}


})
})
</script>


9.内容操作
html([val|fn]) 取得匹配元素的html内容
text([val|fn]) 取得匹配元素的文本内容
val([val|fn|arr]) 获得匹配元素的当前值
例：
<script>
$(function(){
//这个方法拿内容会把标签里的所有东西都拿到
console.log($('p').html());
//这个方法只会拿到内容
console.log($('p').text());
//匹配当前元素的当前的值
console.log($('input').val());


$('button:last').click(function(){
$('#num').val(function(index,val){
return parseint(val)+1;
});
})
$('button:first').click(function () {
$('#num').val(function(index,val){
if(val>1){
return parseInt(val)-1;
}else{
return 1;
}


})
})
})
</script>


10.位置操作
offset([coordinates])
获取匹配元素在当前视窗的相对偏移。
返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效
例：
<script>
$(function(){
//获取匹配元素在当前视窗的相对偏移
//console.log($('p').offset().left);
//console.log($('p').offset().top);
VAR left=$('p').offset().left;
var top=$('p').offset().top;
$(window).keydown(function(event){
switch (event.keyCode){
case 39:
left=left+5;
$('p').offset({left:left});
break;
case 37:
left=left-5;
$('p').offset({left:left});
break;
case 38:
top=top-5;
$('p').offset({top:top});
break;
case 40:
top=top+5;
$('p').offset({top:top});
break;
}
})
console.log($('#p1').position().top);
console.log($('#p1').position().left);
})
</script>


11.尺寸操作
height([val|fn])
取得匹配元素当前计算的高度值（px）（不包括内填充、不包括边框）
width([val|fn])
取得匹配元素当前计算的宽度值（px）（不包括内填充、不包括边框）
innerHeight()
获取匹配元素内部区域高度（包括内填充、不包括边框）
innerWidth()
获取匹配元素内部区域宽度（包括内填充、不包括边框）
outerHeight([options])
获取匹配元素外部高度（默认包括补白和边框）
options设置为 true 时，计算外边距在内
outerWidth([options])
获取第一个匹配元素外部宽度（默认包括补白和边框）
options设置为 true 时，计算外边距在内
例：
<script>
$(function(){
console.log($('p').height());
console.log($('p').width());
console.log($('p').innerHeight());
console.log($('p').innerWidth());
console.log($('p').outerHeight(true));
console.log(($('p').outerWidth()));
})
</script>

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery操作DOM全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery操作DOM所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。