标签:
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