jQuery文档操作

写这篇文章主要是在使用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

原文地址:https://www.cnblogs.com/suraer/p/8528243.html