jQuery學習　三　jQuery HTML

2024-04-27 15:16:57

字體：大中小

來源：轉載

供稿：網友

jQuery學習　三　jQuery HTML三　jQuery HTML(1) jQuery 捕獲獲得內容 - text()、html() 以及 val() 獲取屬性 - attr()<body> <p id="test">這是段落中的 <b>粗體</b> 文本。</p> <button id="btn1">顯示文本</button> <button id="btn2">顯示 HTML</button></body>1,text() - 設置或返回所選元素的文本內容 $("#btn1").click(function(){ alert("Text: " + $("#test").text()); });2,html() - 設置或返回所選元素的內容（包括 HTML 標記） $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });3,val() - 設置或返回表單字段的值<body> <input type="text" name="sex" value="1" />性別 <br/> <button id="btn">提交</button></body> $("#btn").click(function(){ var vals = $("input[name=sex]").val(); alert(vals); });4,attr() 方法用于獲取屬性值<body> <p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p> <button>顯示 href 屬性的值</button></body> $("button").click(function(){ alert($("#runoob").attr("href")); });(2) jQuery 設置設置內容 - text()、html() 以及 val()<body> <p id="test1">這是一個段落。</p> <p id="test2">這是另外一個段落。</p> <p>輸入框: <input type="text" id="test3" value="W3Cschool教程"></p> <button id="btn1">設置文本</button> <button id="btn2">設置 HTML</button> <button id="btn3">設置值</button></body> $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("W3Cschool"); });設置屬性 - attr() attr() 方法也用于設置/改變屬性值。 attr() 方法也允許您同時設置多個屬性<body> <p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p> <button>修改 href 值</button> <p>點擊按鈕修改后，可以點擊鏈接查看鏈接地址是否變化。</p></body>$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.w3cschool.cn/jquery", "title" : "jQuery 教程" });});(3) jQuery 添加元素append() - 在被選元素內部的結尾插入指定內容PRepend() - 在被選元素內部的開頭插入指定內容<body> <p>家</p> <button>追加文本</button></body>$('button').click(function(){ $("p").prepend('大').append('好');});<body> <ul> <li>2</li> <li>3</li> <li>4</li> </ul> <button>添加文本</button></body>$('button').click(function(){ $("ul").prepend('<li>1</li>').append('<li>5</li>');});<body> <p>這是一個段落。</p> <button onclick="appendText()">追加文本</button></body><script>function appendText(){ var txt1="<p>文本。</p>"; // 使用 HTML 標簽創建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}</script>after() - 在被選元素之后插入內容before() - 在被選元素之前插入內容<body> <img src="/statics/images/logo.png" > <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button></body><script>$(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); });});</script><body> <img src="/statics/images/w3c/logo.png" > <br><br> <button onclick="afterText()">之后插入</button></body><script>function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 創建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 創建元素 var txt3=document.createElement("big"); // 使用 DOM 創建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}</script>(4) jQuery 刪除元素remove() - 刪除被選元素（及其子元素）<body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 這是 div 中的一些文本。 <p>這是在 div 中的一個段落。</p> <p>這是在 div 中的另外一個段落。</p> </div> <br> <button>移除div元素</button></body>$(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); });});remove也可指定移除如<body> <p>這是一個段落。</p> <p class="italic"><i>這是另外一個段落。</i></p> <p class="italic"><i>這是另外一個段落。</i></p> <button>移除所有 class="italic" 的 p 元素。</button></body>$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); });});empty() - 從被選元素中刪除子元素<body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 這是 div 中的一些文本。 <p>這是在 div 中的一個段落。</p> <p>這是在 div 中的另外一個段落。</p> </div> <br> <button>清空div元素</button></body>$(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); });});(5) jQuery CSS 類jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些：addClass() - 向被選元素添加一個或多個類<style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style><body> <h1>標題 1</h1> <h2>標題 2</h3> <p>這是一個段落。</p> <div>這是一些重要的文本!</div> <br> <button>為元素添加 class</button></body><script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });});</script>removeClass() - 從被選元素刪除一個或多個類$("button").click(function(){ $("h1,h2,p").removeClass("blue");});toggleClass() - 對被選元素進行添加/刪除類的切換操作$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});css() 方法設置或返回被選元素的一個或多個樣式屬性。1,返回 CSS 屬性 css("propertyname");<body> <h2>這是一個標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <button>返回 p 元素的 background-color </button></body>$("button").click(function(){ alert("背景顏色 = " + $("p").css("background-color"));});2,設置 CSS 屬性 css("propertyname","value");$("p").css("background-color","yellow"); 3,設置多個 CSS 屬性 css({"propertyname":"value","propertyname":"value",...}); $("p").css({"background-color":"yellow","font-size":"200%"}); (6) jQuery 尺寸width()height()innerWidth()innerHeight()outerWidth()outerHeight()$("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt);});$("button").click(function(){ var txt=""; txt+="div 寬度: " + $("#div1").width() + "</br>"; txt+="div 高度: " + $("#div1").height() + "</br>"; txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含內邊距: " + $("#div1").innerHeight(); $("#div1").html(txt);});$("button").click(function(){ var txt=""; txt+="div 寬度: " + $("#div1").width() + "</br>"; txt+="div 高度: " + $("#div1").height() + "</br>"; txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight(); $("#div1").html(txt);});

本文內容題材摘自w3cschool,為自己的學習文章，非教學文章，后面每天會更新內容，直到學完整個jqury. 如需查看題材來源：http://www.w3cschool.cn/jquery/

上一篇：jQuery學習　二　jQuery 效果

下一篇：C# __ WebService上傳文件