一、获取内容和属性
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");
})
})