-text(), html()
text()用于设置或返回所选元素的文本内容
html()用于 设置或返回所选元素的内容(包括 HTML 标记
)
格式:
$(selector).text(string) $(selector).html(string)
例子:
//点击id为btn1元素,获取id为test1元素中的文本内容 $("#btn1").click(function(){ $("#test1").text(); }); //点击id为btn1元素,在id为test1元素中写入"Hello world" $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); //点击id为btn2元素,获取id为test2元素中的html文本 $("#btn2").click(function(){ $("#test2").html(); }); //点击id为btn2元素,在id为test2元素中写入"Hello world!" $("#btn2").click(function(){ $("#test2").html("Hello world!"); });
-val(), attr()
val() 用于设置或返回
表单字段
的值
attr() 方法也用于设置/改变
属性值
格式:
$(selector).val(string) $(selector).attr(property,string)
例子:
//点击id为btn3元素,获取id为test3表单元素中的文本内容 $("#btn3").click(function(){ $("#test3").val(); }); //点击id为btn3元素,设置id为test3表单元素中的文本内容为"Dolly Duck" $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); //点击id为btn4元素,获取id为test4元素中的"href"属性值 $("#btn4").click(function(){ $("#test4").attr("href"); }); //点击id为btn4元素,设置id为test4元素中的"href"属性值为"http://www.aseoe.com/" $("#btn4").click(function(){ $("#test4").attr("href", "http://www.aseoe.com/"); });
-append(), prepend()
append() 用于在被选元素的结尾
插入内容。
prepend()用于在被选元素的开头
插入内容
格式:
$(selector).append(string) $(selector).prepend(string)
例子:
//在p标签结尾插入文本"Some appended text." $("p").append("Some appended text."); //在p标签开头插入文本"Some prepended text." $("p").prepend("Some prepended text.");
append() 和 prepend() 方法能够通过参数接收无限数量
的新元素。可以添加的包括 text/HTML、jQuery 或者 JavaScript/DOM
来创建的新元素
例子:
function appendText(){ var txt1="Text.
"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
-after(), before()
after() 方法在被选元素之后插入内容。
before() 方法在被选元素之前插入内容。
格式:
$(selector).after(string) $(selector).before(string)
例子:
//在img后插入文本"Some text after" $("img").after("Some text after"); //在img前插入文本""Some text before" $("img").before("Some text before");
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以添加的包括 text/HTML、jQuery 或者 JavaScript/DOM 来创建的新元素
function afterText() { var txt1="I "; // 以 HTML 创建新元素 var txt2=$("<i></igt").text("love "); // 通过 jQuery 创建新元素 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 }
-remove(), empty()
remove()用于 删除被选元素(其子元素)
empty()用于从被选元素中删除子元素
格式:
$(selector).remove(string) $(selector).empty()
例子:
//删除id为div1的元素 $("#div1").remove(); //删除 class="italic" 的所有 <p> 元素 $("p").remove(".italic"); //删除id为div1元素内的所有子元素 $("#div1").empty();