开发工具与关键技术:mvc
作者:黄志鹏
撰写时间:2019/7/27
接下来我们来说说我们经常用到的html方法,我们取得第一个匹配元素的html内容。html()方法在W3C里的解释说,这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。html()方法主要用于设定HTML内容的值。它的定义和用法是html()
方法返回或设置被选元素的内容(inner HTML)。如果该方法未设置参数,则返回被选元素的当前内容。
接下来我们来看一下代码:
首先我们先引入插件 <script src="~/jscript/jquery/jquery-3.2.1.min.js"></script>
接下来我们以写一个文本标签P标签为例,
<p id="pi" style="color:#0094ff;font-size:20px;">你好世界</p>
下面是p标签最原始的样式截图;
接下来我们写html方法来改变一下这个P标签的样式。首先我们先来获取P标签的ID,
然后我们再来改变p标签里头的文本内容,顺便用CSS方法改变一下P标签的样式;
代码如下,
var $pi = $(’#pi’);
$pi.html(‘这是一个P标签’).css(‘color’, ‘red’);
接下来我们来看看它改变之后的样式:
截图如下:
接下来我们还可以在这个P标签中插入一些元素,下面我们有写一个方法。接下来我们在P标签中加入一个a标签,让其html内容为"这时一个a标签",与此同时我们也用CSS方法,
改变一下这个a标签的样式。
代码如下:
window.onload = function () {
var $pi = $('#pi');
$pi.append("<a href
='#'></a>").children().html("这时一个a标签").css({ 'color': '#000', 'font-size': '30' });
}
下面是样式截图
最后我们再来写一个方法改变一下这个p标签的内容。
function ChangeText() {
document.getElementById(“pi”).innerHTML = “New P标签!”;
}
ChangeText();
截图如下;