整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

jQuery HTML代码/文本

tml([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。


function(index, html) Function

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});


text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

$('p').text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});
$("#test").html();  

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("test").innerHTML;


直接获取、编辑内容

在jQuery中，主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性，

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本，text(content)为设置纯文本。

实例1:

jQuery代码:

$(function(){
    var sString = $("p:first").text(); //获取纯文本
    $("p:last").html(sString);
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

实例2:

jQuery代码:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //获取innerHTML
        $(this).text(sHtmlStr); //将代码做为纯文本传入
    });
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>

实例3：获取选择框的文本

$("#id").find("option:selected").text(); //获取Select选择的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
获取为本</button>
</body>
</html>

$().html(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的"文本字符串信息"内容

$().text(信息); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例

functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 标签创建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 创建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素vartxt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

Query 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。

text()方法

text() 方法可以用于设置或获取所选元素的文本内容。

示例：

例如我们获取下列 <p> 标签中的文本内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，欢迎来到侠课岛!</p>
  <div>
    <p>希望侠课岛中有适合你的编程课程。</p>
  </div>
</body>
</html>

在浏览器中演示效果：

除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。

示例：

例如通过 text() 将 .content 的文本内容设置为 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，欢迎来到侠课岛!</p>
  <p><button>点击按钮</button></p>
</body>
</html>

在浏览器中演示效果：

html()方法

html() 方法用于设置或返回所选元素的内容（包括HTML标记）。

示例：

通过 html() 方法获取 p 元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，欢迎来到侠课岛!</p>
</body>
</html>

在浏览器中演示效果：

除此之外，我们还可以使用 html() 方法来设置指定元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，欢迎来到侠课岛!');
  });
</script>
</head>
<body>
  <p>向下面的p标签中添加文本内容：</p>
  <p class="hello"></p>
</body>
</html>

在浏览器中演示效果：

val()方法

val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。

示例：

例如获取输入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本输入框：<input type="text" name="name" value="summer" />
  <p>
    <button>获取输入框的值</button>
  </p>
</body>
</html>

在浏览器中演示效果：

如果要使用 val() 方法设置 value 的值，我们可以像下面这样做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本输入框：<input type="text" name="name" value="" />
  <p>
    <button>获取输入框的值</button>
  </p>
</body>
</html>

在浏览器中演示效果：

attr()方法

attr() 方法用于设置或返回被选元素的属性值。

示例：

例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">获取class属性的值</div>
</body>
</html>

在浏览器中演示效果：

attr() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。

示例：

将下面 <div> 标签中的 class 属性的值设置为 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>设置class属性的值</div>
</body>
</html>

在浏览器中演示效果：

链接：https://www.9xkd.com/


在线咨询
上一篇：HTML5 新增的标签
下一篇：html用什么开发

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 尤溪县 杜尔伯特 沙雅县 华安县 奈曼旗 二道区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服