jQuery操作dom元素的增删查改

一、获取内容和属性

jQuery中提供了一系列与Dom相关的方法，这使访问和操作元素和属性变得很容易.

1.获取内容 有text()、html()、val()方法:

text () -设置或返回所选元素的文本内容；
html() - 设置或返回所选元素的内容(包括html标记)；
val () -设置或返回表达那字段的值

$(function(){
	$("btn1").click(function(){
	//获取文本内容
		alert("Text"+$("#test").text());
	//获取带有html的内容
		alert("Html"+$("#test").html());
	//获取表单中的值
		alert("输入的值为"+$("#input").val());
	})
})

2.获取属性

//获取属性值
$("button").click(function(){
//获取元素a的href属性
	alert("a").attr("href");
})

二、设置内容和属性

1.设置内容依然是上面的三个方法，不同点是带有参数的。

$(function(){
	$("#btn").click(function(){
	//设置选择元素中的文本内容为Hello world;
		$("test1").text("Hello world");
	//设置选中元素中的文本内容，可以解析html标签
		$("test2").html("<b>Hello world</b>");
	//设置表单中的内容
		$("test3").val("Hellow world")
	});
})

2.参数为回调函数的情况

text(),html(),val()同样拥有回调函数，回调函数有两个参数，被选元素列表中当前元素的下标，以及原始的值。然后以函数新值返回您希望使用的字符串

$(function(){
	$("#btn1").click(function(){
		$("#test1").text(function(i,originText){
            //新值为下面的字符串
			return "旧值为:"+originText+"被选元素的下标为:"+i;
		})
	});
	$("#btn2").click(function(){
		$("#test2").html(function(i,originText){
            //新值为下面的字符串
			return "旧值为:"+originText+"被选<b>元素</b>的下标为:"+i;
		})
	});
    $("#btn3").click(function(){
        //新值为下面的字符串
        	$("#input").val(function(i,originText){
                return "旧值为:"+orginText+"备选元素的下标为:"+i
            })
    })
})

3.设置属性 -attr()

和上面一样，attr可以设置属性的值，有两种方法，直接修改为一个字符串，还有就是通过回调函数的方式来修改值。

//只介绍回调函数的方法
$("button").click(function(){
	$("a").attr("href",function(i,originValue){
		return "旧属性值为:"+originValue+"下标为:"+i;
	})
})

三、添加元素

通过jQuery用于添加新内容的四个jQuery方法：

• append() -在被元素的结尾插入那内容
• prepend() -在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

下面只演示一下前两种方法，后面的两种跟前两种用法一摸一样。

//append() 在被选元素的结尾插入内容 ,也就是最后一个
$(function(){
	$("#btn1").click(function(){
	//参数可以是一个字符串，也可以是带有html标签的字符串
		$("p").append("<b>追加文本</b>");
	})
})

//prepend()  在被选元素的开头插入内容 和上面的append方法相反
$(function(){
    $("#bn2").click(function(){
        $("ol").prepend("<li>在ol列表中添加一个li</li>")
    });
});

//参数为若干元素的添加方法，这个append.prepend都适用
$(function(){
    var txt1="<p>文本1</p>";		//使用html标签创建文本
    var txt2=$("<p></p>").text("文本2");   //使用JQuery创建文本
    var txt3=document.createElement("p").innerHTML="文本3";	//使用DOM创建文本
  	$("body").append(txt1,txt2,txt3);		//追加新元素
})

四、删除元素

删除元素有两种方法 remove(),empty();

• remove() - 删除被选元素(及其子元素)；
• empty() - 从被选元素中删除子元素

$(function(){
	$("button").click(function(){
	//会发现div1下的子元素全部被删除
		$("#div1").remove();
	});
});
<div id="div1">
    我是div1
	<p>我是段落1</p>
	<p>我是段落2</p>
</div>

$(function(){
	$("button").click(function(){
	//只删除div2下面的子元素
		$("#div2").empty();
	});
});
<div id="div2">
	我是div2
	<p>我是段落1</p>
	<p>我是段落2</p>
</div>

过滤删除

$(function(){
	$("button").click(function(){
		//选中全部的div元素只删除掉类名为null的元素
		$("div").remove(".null");
	})
})