标签：
| jQuery 获取 | ||
| text() - 设置或返回所选元素的文本内容 | html() - 设置或返回所选元素的内容（包括 HTML 标记） | val() - 设置或返回表单字段的值 |
| jQuery 设置 | ||
| text() - 设置或返回所选元素的文本内容 | html() - 设置或返回所选元素的内容（包括 HTML 标记） | val() - 设置或返回表单字段的值 |
text()、html() 以及 val() 的回调函数
| 添加新的 HTML 内容 | |||
| append() - 在被选元素的结尾插入内容 | prepend() - 在被选元素的开头插入内容 | after() - 在被选元素之后插入内容 | before() - 在被选元素之前插入内容 |
| 删除元素/内容 | |
| remove() - 删除被选元素（及其子元素） | empty() - 从被选元素中删除子元素 |
jQuery 操作 CSS |
|||
| addClass() - 向被选元素添加一个或多个类 | removeClass() - 从被选元素删除一个或多个类 | toggleClass() - 对被选元素进行添加/删除类的切换操作 | css() - 设置或返回样式属性 |
| jQuery css() 方法 |
| css() 方法设置或返回被选元素的一个或多个样式属性。 |
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery Html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script src="jquery-2.1.4.min.js"></script> <script src="html.js"></script> <link rel=stylesheet href="html.css" type="text/css"> </head> <body> <hr> <p>jQuery 获取</p> <p id="test1">test1这是段落中的<b>粗体</b>文字。</p> <input id="input1" type="text" value="input1 hello world"/><br><br> <input id="input2" value="input2 attr获取属性值"/><br><br> <button id="button1" type="button">button1 显示test1中的text</button> <button id="button2" type="button">button2 显示test1中的html</button> <button id="button3" type="button">button3 显示input1中的val</button> <button id="button4" type="button">button4 attr获取input2中的value属性值</button><br><br> <hr> <p>jQuery 设置</p> <p id="test2">test2 input3 设置属性值</p><br><br> <input id="input3" type="text" value="input3 点击button7设置value值"/><br><br> <button id="button5" type="button">button5 设置test2的text</button> <button id="button6" type="button">button6 设置test2的html</button> <button id="button7" type="button">button7 设置test2的val</button> <br><br> <hr> <p>jQuery 回调</p> <p id="test3">text()、html() 以及 val() 的回调函数</p><br><br> <p id="test4">text()、<b>html()</b> 以及 val() 的回调函数</p><br><br> <input id="input4" type="text" value="input4 点击button10设置value值"/><br><br> <button id="button8" type="button">button8 test3中的text()</button> <button id="button9" type="button">button9 test4中的html()</button> <button id="button10" type="button" width=‘500px‘>button10 test3中的val()</button> <hr> <p><a href="www.baidu.com" class="a1">www.baidu.com</a></p> <button class="button11">button11 点击该按钮后，上面的链接会链接到新浪网的链接</button><br><br> <button class="button12">button12 点击该按钮后，上面的链接会链接到新浪网的链接，这是用的attr回调函数方法</button> <hr> <p>jQuery 添加</p> <p class="p5">jQuery 添加 append</p> <p class="p5">This is a paragraph.</p> <p class="p5">This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <button class="button13">button 13 点击，在后面增加文本</button> <button class="button14">button 14 点击，在后面追加列表项</button><br><br><br> <p class="p1">p1 jQuery 添加 prepend</p> <button class="button15">button 15 点击，在前面增加文本</button> <p class="p6">p6 通过append(),prepend()添加若干元素</p> <button class="button16">button 16 点我，可以添加很多元素哦</button> <hr> <img alt="W3School" src="2.jpg"><br><br> <button id="button17">button 17 点击，在图片前面添加文本</button> <button id="button18">button 18 点击，在图片后面添加文本</button> <button id="button19">button 19 点击，在图片后面添加多个文字文本</button> <hr> <p>jQuery 删除元素</p> <div id="div1" style="background-color:blue;"> I will be deleted! </div> <button id="button20">button 20 点击，删除div1</button><br> <div id="div2" style="background-color:yellow;"> div2 I will be deleted! <p class="p7">p7 @ I will be deleted!</p> </div> <button id="button21">button 21 点击，删除div2的子元素</button><br><br> <p class="italic"><i>This is italic !</i></p> <p class="italic"><i>This is italic !</i></p> <button id="button22">button 22 点击，删除italic的子元素</button> <hr> <p>jQuery css类</p> <h1>标题 1</h1> <h2>标题 2</h2> <p class="p8">这是一个段落</p> <p class="p8">这是另一个段落</p> <div>这是非常重要的文本！</div> <button id="button23">button 23 点击，向元素添加类</button> <button id="button24">button 24 点击，向元素添加多个类</button> <button id="button25">button 25 点击，向元素删除类</button> <button id="button26">button 26 点击，切换</button> <hr> <p>jQuery css()</p> <p id="test5" style="background-color:red">test5 This is a paragraph!</p> <p id="test6" style="background-color:blue">test6 This is a paragraph!</p> <p id="test7" style="background-color:yellow">test7 This is a paragraph!</p> <button id="button27">button 27 点击，可以显示test5背景颜色</button> <button id="button28">button 28 点击，可以为test6设置背景颜色</button> <button id="button29">button 29 点击，可以为test7设置多个属性</button> <hr> <p>jQuery 尺寸</p> <div id="div3" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"> div3 </div> <button id="button30">button 30 点击，显示 div3 的尺寸</button> </body> </html>
$(document).ready(function(){
$("#button1").click(function(){
alert("Text: "+$("#test1").text());
});
$("#button2").click(function(){
alert("Html: "+$("#test1").html());
});
$("#button3").click(function(){
alert("var: "+$("#input1").val());
});
$("#button4").click(function(){
alert("attr: "+$("#input2").attr("value"));
});
$("#button5").click(function(){
$("#test2").text("text2 after set");
});
$("#button6").click(function(){
$("#test2").html("<b>test2 html after set </b>");
});
$("#button7").click(function(){
$("#input3").val("input3 val after set");
});
$("#button8").click(function(){
$("#test3").text(function(i,origText){
return "test3: "+origText+" New text:Hello world!"
});
});
$("#button9").click(function(){
$("#test4").html(function(i,origText){
return "test4: "+origText+" New html:Hello world!"
});
});
$("#button10").click(function(){
$("#input4").html(function(i,origText){
return "input4: "+origText+" New val:Hello world!"
});
});
$(".button11").click(function(){
$(".a1").attr("href","http://www.sina.com");
});
$(".button12").click(function(){
$(".a1").attr("href",function(){
return "http://www.sina.com";
});
});
$(".button13").click(function(){
$(".p5").append("<b>Appended text</b>.");
});
$(".button14").click(function(){
$("ol").append("<li>Appended item</li>")
});
$(".button15").click(function(){
$(".p1").prepend("added before p1 ")
});
$(".button16").click(function(){
var txt1="<p>base html create new elements</p>";
var txt2=$("<p></p>").text("base jQuery create new elements");
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
$(".p6").append(txt1,txt2,txt3);
});
$("#button17").click(function(){
$("img").before("<b>Before</b>");
});
$("#button18").click(function(){
$("img").after("<b>After</b>");
});
$("#button19").click(function(){
var txt1="<b>I </b>";
var txt2=$("<i></i>").text("love ");
var txt3=document.createElement("big");
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);
});
$("#button20").click(function(){
$("#div1").remove();
});
$("#button21").click(function(){
$("#div2").empty();
});
$("#button22").click(function(){
$("p").remove(".italic");
});
$("#button23").click(function(){
$("h1,h2,.p8").addClass("blue");
$("div").addClass("important");
});
$("#button24").click(function(){
$("h1,h2,.p8").addClass("important blue");
});
$("#button25").click(function(){
$("h1,h2,.p8").removeClass("blue");
});
$("#button26").click(function(){
$("h1,h2,.p8").toggleClass("blue");
});
$("#button27").click(function(){
alert("Background color= "+$("#test5").css("background-color"));
});
$("#button28").click(function(){
$("#test6").css("background-color","red");
});
$("#button29").click(function(){
$("#test7").css({"background-color":"red","font-size":"200%"});
});
$("#button30").click(function(){
var txt="";
txt+="width of div:"+$("#div3").width()+"</br>";
txt+="Height of div:"+$("#div3").height();
$("#div3").html(txt);
});
});
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
标签：
原文地址：http://my.oschina.net/u/2356966/blog/497026
