JQuery 第四讲： 绘制 HTML
Posted JAVA经典代码示例
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 第四讲： 绘制 HTML相关的知识，希望对你有一定的参考价值。
上期的问题其实很简单，原因就是因为有两个<p>标签，我所要提醒的是，即使元素已经被隐藏了但是你再一次点击的时候还是会弹出内容，因为元素知识被隐藏了而没有消失掉，仅仅是不占据空间了而已，他不同于display：none和remove方法，这一点特别需要初学者注意。这期我们来学习jquery对html页面的绘制方法。
不同于静态页面，我们大多数开发的都是动态的网站，页面上的数据也是动态的，例如一个新闻列表，当你点击进去查看详情时候，详情页面极有可能是用的同一个页面，常见的还有新增页面和回写数据之后的编辑页面都是动态插入数据的，我目前掌握了三种动态改变数据的方法，除了jquery之外还有EL表达式以及angular，今天我们就要说的是最常用粗暴的方法jquery。
如果想要清楚的绘制出像前端画成的静态页一样那基础的要分清三个概念，直接上代码。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
这三个方法有个共同点就是既可以获取也可以设置，基于js框架有很多方法都是这样的。
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script >
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("button").click(function(){
alert("值为: " + $("#test").val());
});});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button></body>
</html>
----------------------------------------------------------------------------
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
实例
$("button").click(function(){ alert($("#runoob").attr("href"));});
这个方法还可以去自定义属性的值，标签承载的信息超过他现有的属性个数时你可以用自定义属性做扩展。http://www.cnblogs.com/luoyanli/archive/2012/10/17/2727886.html这里给一个演示链接。
设置内容 - text()、html() 以及 val()
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script >
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
---------------------------------------------------------------
但是实际开发中，有的数据是以数组形式出现的，这个时候需要你提取出，共有的HTML代码将其中要替换的内容用占位符代替，然后在迭代数组的时候进行替换拼接，循环结束之后将字符串插入到元素中，需要注意的是，HTML代码最好用单引号包裹，因为其中的元素使用双引号包裹的，单引号的优先级要大。
以上是关于JQuery 第四讲： 绘制 HTML的主要内容，如果未能解决你的问题，请参考以下文章
第四讲 网络八股拓展--用mnist数据集实现断点续训, 绘制准确图像和损失图像