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上传文件