写这篇文章主要是在使用Ajax进行异步请求后更新页面的内容,由于jQuery操作页面内容的方式和方法有很多,这里只列举几个例子来说明一下,具体内容还需要查阅相关文档。
下面列举的几个例子都是通过一个按钮点击触发相关事件。
attr
设置元素属性的值
<body>
<img src="/i/eg_smile.gif" />
<button>设置图像的 width 属性</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","180");
});
});
</script>
append
追加内容
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
text
修改文本内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
// 需要使用原始内容
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
html
改变标签及其内容
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
// 需要使用原始内容
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
val
改变元素的值
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
更多文档操作参考: http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp