-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();
返回顶部 前端专题