“jquery”的概述和使用 html() text()和 val()

本节主要介绍如何使用。html()，text()和。val()在jQuery中读取和修改元素的HTML结构、元素的文本内容和表单元素的值。JQuery为我们提供了多种方法来操作元素的HTML结构和元素的文本内容。例如，可以在现有元素的内部、周围、前面或后面添加新元素。或者用一个元素替换另一个元素；您还可以读取或修改元素的内容或结构。有时候我们很模糊，不知道是给元素添加内容还是添加元素。例如，我们需要有效地将这个元素的内容添加到现有的元素中。在这里，我们主要与您分享如何添加、删除和替换元素。jQuery为我们提供了三种操作元素结构和内容的方法：HTML():读取和修改元素的HTML内容，获取详细信息。html()；text():读取并修改元素的文本内容，以获取详细信息。text()；val():读取并修改表单元素的值字段。详情请参考。val()。正如您将看到的，这些方法可以轻松读取或修改元素或任何HTML值的原始内容，还可以轻松读取或修改表单中的值字段值。操作元素HTML结构——。Html()jQuery。jquery中的html()方法允许您读取和修改元素的html内容。主要有三种使用模式：html()，html (htmlstring)，html(函数(索引，html){ 0.}).让我们依次看一下它们的具体使用方法。1.阅读元素的HTML结构——.html()语法：$(“元素”)。html()；返回值：字符串描述。html()方法用于获取任何元素的HTML内容。如果选择器同时选择多个元素，它只能读取第一个元素的HTML内容。此外，此方法对于XML文件无效。若要读取元素的HTML内容，应该首先选择该元素，然后调用。jQuery中的HTML()方法。例如，在下面的代码中，我们在div.demo中选择p元素，然后通过读取这个元素的html内容。html()。例如，HTML Code:复制代码如下：div class='demo' p这是一个段落元素。它包含一个链接元素。副本代码如下： $(文档)。ready(function(){ alert(' div . demo ':' $(' div . demo P ')中P元素的HTML结构。html())；});结果

上面的代码会弹出一个警告框，显示原始HTML标签中的元素，如上图所示。上面显示div.demo只有一个p元素。如果有多个p元素呢？会发生什么？我们先不看一次：HTML Markup复制代码如下： div class=' demo' pI是div.demo中的第一个p元素：a href='#' I是第一个p/a/p p这是一个段落元素。它包含一个链接元素。副本代码如下： $(文档)。ready(function(){ alert(' div . demo ':' $(' div . demo P ')中P元素的HTML结构。html())；});效果

从上面的渲染图中，我们可以清楚地看到，相同的jQuery代码有不同的效果。再次证明，如果你调用。方法，它将只读取第一个元素。换句话说，如果选择器匹配多个元素，将只获得第一个匹配元素的HTML内容。2.修改元素的HTML内容——.html(htmlString)语法：$(“元素”)。html(HTMl StrIng)；//HTMLString用于为每个匹配元素设置一个HTMLString返回值：jQuery对象说明：重置第一个匹配元素的html内容，这些元素的任何内容都将被新内容完全替换。基于上面的例子，段落的原始HTML内容被完全替换：HTML Markup副本代码如下：div class='demo' p我是div.demo中的第一个p元素：a href='# '我是第一个p/a/p p p p这是一个段落元素。它包含一个链接元素。复制的代码如下： $(文档)。ready (function () {$ ('div.demo p ')。html ('H2类=' title '新标题/h2p我是div。});效果：

从上面的效果，我们知道如果。html(htmlString)方法用于在多个元素上进行匹配，多个匹配元素的HTML内容将被替换，并且全部替换为相同的HTML结构，即中指定的“HTMl StrIng”结构。html(htmlString)方法。换句话说，如果您使用。HTML(htmlString)方法来选择多个元素，这些选中元素的HTML内容将被替换为中的“htmlString”。html(htmlString)方法。如上图所示。3。使用回调函数替换元素的HTML内容语法：$(“元素”)。html(函数(索引，html){ 0.});返回值：jQuery对象描述：用于返回HTML内容设置的函数。接收元素的索引位置和元素的旧HTML作为参数。要使用回调函数替换元素的HTML内容，必须满足以下两个条件：当前元素的索引值位置(索引值从0开始计算)；当前元素的旧html内容。然后，函数的返回值被用作HTML的替代。这个方法很方便。如果要替换多个元素的内容，又不想用相同的内容替换，而是用不同的内容替换，那么我们可以用这个方法，根据多个元素自身的位置或者现有的内容(或者两者)，用不同的html内容替换多个元素。我们来看一个例子：HTML Markup复制代码如下：div class='demo' pa href='# '我在第一个p/a/p pa href=' # ' W3C Plus/a/p/div jQuery Code :复制代码如下：$(文档)。ready (function () {$ ('div。演示p’)。html(函数(index，old html){ return ' I is a paragraph '(index 1)':' old html；});});效果：

那个。00-1010前面的html()方法允许您读取或修改元素的HTML内容，包括元素的HTML标记。然而。jQuery中的text()方法只是对元素纯文本的操作。比如。html()方法，它包括三种使用方法：1。阅读文本内容——.text()语法：$(“元素”)。text()；返回值：返回一个字符串；描述：组合匹配元素集中每个元素的获得的文本内容，包括它们的后代。不像。text()和。方法。text()方法既可用于XML文档，也可用于html文档。的结果。text()方法是由匹配元素中包含的所有文本内容组成的文本(由于不同浏览器的HTML分析器不同，返回文本的换行和其他空格可能会有所不同。)的方法。text()和。html()几乎都是一样的，比如：HTML Markup copy代码如下： div class=' demo ' pa href=' # ' W3C Plus/a/p/div jQuery Code 3360 Copy代码如下： $(文档)。ready (function () {alert(')。text())读取内容：“$(”div。});效果：

从上面的效果中，我们知道使用。text()方法，我们只读取元素的纯文本内容，包括它的后代，而这个元素中的HTML标签(包括它的后代的HTML标签)被剥离，只留下文本内容。那个。方法可以同时选择多个元素。html()方法，但有一个区别：当。html()匹配多个元素，将只读取匹配元素中的第一个；不像。text()方法，当它匹配多个元素时，它会同时读取多个元素的内容。例如，HTML Markup复制代码如下： div class=' demo ' pa href=' # ' W3C plus/a/p p我是段落2:a href=' # ' W3C plus/a/p/div jquery代码复制代码如下：$(文档)。ready(function(){ alert(')。text()方法：“$('div.demo p ')。text())；Alert('。html()方法：“$('div.demo p ')。html())；});效果：

2.替换文本内容—— .文本(文本字符串)语法$(“元素”)。文本(TextString)；//textString用于设置与元素内容匹配的文本返回值：jQuery对象描述：text(textString)方法和。HTML(HTMLString)方法替换元素内容是一样的，但不同的是。方法将用html标记替换原始内容作为新的HTML标记，而。文本(textString)会将html标签转换为纯文本内容。换句话说，如果HTML标记包含在。text(textString)方法，这个方法会用gt替换lt。在前面的例子的基础上。html(htmlString)，我们替换了。带有的html()。文本()。HTML标记复制代码如下： div class=' demo ' pa href=' # ' W3C plus/a/p p我是段落2:a href=' # ' W3C plus/a/p/div jquery代码复制代码如下：$(文档)。ready (function () {$ ('div.demo p ')。text(' H2 class=' title ' new title/h2p我是div.demo中的第一个p元素：href='# '我是第一个p/a/p ')；});效果：

从效果图中可以看出。text(textString)方法将用HTML标记替换元素的旧内容作为纯文本内容，这与。html(htmlString)方法。你可以和之前的进行对比。html(htmlString)。但是，它们有一个共同点：如果多个元素匹配，采用。文本(textString)将用相同的内容替换匹配元素的内容。3.使用回调函数替换元素的文本内容。text()方法与。html()方法，而且还需要通过回调函数动态替换多个元素的内容，这样才不会像。文本(文本字符串)。语法$(“元素”)。文本(函数(索引，文本){ 0.});返回值：jQuery对象描述：用于返回设置的文本内容的函数。接收元素的索引位置和元素的旧文本值作为参数。要用回调函数替换元素的内容，必须满足以下两个条件：当前元素的索引值位置(索引值从0开始计算)；当前元素的旧文本内容。然后，函数的返回值被用作替代元素的纯文本内容。这个方法很方便。如果要替换多个元素的内容，又不想用相同的内容替换，而是用不同的内容替换，那么我们可以用这个方法，根据多个元素自身的位置或者已有的内容(或者两者都有)，用一千个文本的不同内容替换多个元素。我们来看一个例子：HTML Markup复制代码如下：div class='demo' pa href='# '我在第一个p/a/p pa href=' # ' W3C Plus/a/p/div jQuery Code :复制代码如下：$(文档)。ready(function(){ $('div.demo p ')。text(函数(索引，oldText){ return(索引1)' . 'oldText});});效果

操作元素的纯文本内容——.text()

前面介绍的. html()和。文本()都无法在投入元素上操作，那么我们接着看一个瓦尔()方法。这个方法就像。文本()方法一样，可以读取，修改表单字段"价值"的值。1、获取表单元素值——.val()语法$("元素")。val()；返回值：将返回的是字符串或数组说明瓦尔()方法主要用于获取表单元素的值。至于"选择多个='多个"元素，val()方法返回一个包含每个选中的选择权的数组，对于下接选择框"选择"和复选框，单选([type='checkbox']，[type='radio'])你可以使用":当选"和" :已检查"选择器来获取值。具体我们一来看几个实例：HTML标记复制代码代码如下：div id='colorRadio '输入类型='收音机'名称='color' id='rd1 '值='红色'/红色输入类型='收音机'名称='color' id='rd2 '值=' yelo '/yelo输入类型='收音机'名称='color' id='rd3 '值='蓝色'/蓝色/div id='大小检查'输入类型='复选框'名称='size' id='ch1 '值='10磅'/10磅输入类型='复制代码代码如下：美元（文件)。ready(function () { $('#submitBtn ')).单击(function(){ alert($(' # coloradio input 3360 radio ').val())；警报($(' # SizeCheck input 3360复选框').val())；});});效果。val()返回匹配元素集中的第一个元素。有时您想要返回单选或复选框的选定值。如果你只使用。val()方法此时，将返回第一个值，这与选择还是不选择无关。如上图所示，如果要返回选中的值，需要进行如下操作。要获取选定的值：复制代码如下： $(文档)。ready (function () {$ ('# submitbtn '))。单击(function(){ alert($(' input 3360 radio[name=color]: checked ')。val())；alert($(' input : checkbox[name=size]: checked ')。val())；});});此时，radio将返回您选择的值，但checkbox不会。如果同时选中多个复选框，val()将只返回第一次选择的值。如果没有选择任何值，“未定义”将在此时被添加回来。刚才“复选框”有多个选择的时候，只有第一个值会加回来。如果需要返回所有的值，我们需要使用每个()遍历复选框并复制代码如下： $(文档)。ready (function () {$ ('# submitbtn '))。单击(function () {alert ($('输入3360 radio[name=color]: checked ')。val()。$(“input : checkbox[name=size]: checked”)。每个(函数(){ alert($(this))。val())；});});});另外，val()在“选择”时也分为两种情况。什么时候？val()方法应用于select元素，它返回所选的值。另一方面，当。val()方法应用于select multiple='multiple '元素，返回的将是一个包含每个选定选项的数组。让我们具体看看下面的例子。复制HTML Markup的代码如下： form action=' method=' post ' Select id=' drop down ' option red/option yellow/option选项blue/option/Select Select Select id=' listbox ' multiple=' multiple ' option red/option yellow/option option blue/option/Select输入类型=' button ' id=' getselectvalue ' value=' getvalue '/formjquerycode复制代码如下： $ ('# getselectvalue ')。单击(function () {alert ($ ('# dropdown '))。val())；var colors=$('#listbox ')。val()；for(var key in colors){ alert(colors[key])；} });2.替换表单元素的值——.val(值)语法$(“元素”)。val(值)；//value的意思是：一个文本字符串或字符串形式的数组，用来设置每个匹配元素的值。返回值jQuery对象表示该方法常用于设置表单字段的值。类似地，对于“选择多个=‘多个’”元素，一个数组可以选择多个选项。val(value)可以同时更改所选元素的值，并且其值是相同的，例如，复制代码的代码如下：$('input ')。val(' test ')；上面的代码最终会将inupt的所有值替换为“test”，这在正常应用中一般不会用到。val(value)常用于输入[type='text']的聚焦和模糊，例如复制HTML Markup的代码如下：输入类型=' text ' id=' textbox ' value=' hello，jquery！'。/jQuery Code复制代码如下： $ ('input3360text ')。focus(function(){ var $ input text val=$(this))。val()；if($ InputTextVal==this . DefaultValue){ $(this)。val(“”)；} });$(' input 3360 text ')。blur(function(){ var $ InputTextVal=$(this))。val()；if($inputTextVal==''){ $(this)。val(this . DefaultValue)；} });3.使用回调函数替换。val(value)前面的form字段的值“value”可以将所选表单元素的值更改为相同的值，因此我们经常需要将其设置为不同的值。此时，我们需要使用这个方法通过一个函数来设置这个值。这个函数接受两个参数，当前元素的引用值和它的当前值。

语法$(“元素”)。val(函数(索引，值){ 0.});返回值jQuery对象显示这个函数的返回值用于设置每个匹配的输入元素的“值”值。让我们看一下复选框和单选按钮上的一个示例：HTML Markup副本代码如下： form action=' div id=' color radio '输入类型=' radio '名称=' color' id=' rd1 '值=' red'/span id='color1'Red/span输入类型='radio '名称='color' id='rd2 '值='Yellow' /span id='color2 '黄色/span输入类型='radio '名称='color' id='rd3 '值=' span输入类型=' checkbox ' name=' size ' id=' CH2 ' Value=' 12 pt '/span id=' size 2 ' 12 pt/span输入类型=' checkbox ' name=' size ' id=' CH3 ' Value=' 14 pt '/span id=' size 3 ' 14 pt/span/div输入类型=' text ' id=' txtBox ' disabled=' disabled '/输入类型=' button ' id=' setValue ' Value=' Set Value '/复制代码表单jQuery Code如下： ready(function(){ $(' input : radio[name=color]')。val(函数(索引，oldval) {return' color-'(索引1)' : ' old val；});$(“input 3360 checkbox[name=size]”)。val(函数(索引，oldVal){ return 'size-'(索引1)' : ' old VaL；});$('#setValue ')。单击(function(){ var $ msg=$(' input : radio[name=color]: checked ')。val()'，'；$(“input : checkbox[name=size]: checked”)。每个(函数(){ $msg=$(this))。val()'，'；});$('#txtBox ')。val($ msg)；});});对于多选下拉框，我们可以这样修改：HTML Markup副本代码如下： select id=' dropdown '选项红色/option选项黄色/option选项蓝色/option/Select id=' listbox ' multiple=' multiple '选项红色/option选项黄色/option选项蓝色/option/select jquery代码。副本代码如下： $(文档)。ready (function () {$ ('# dropdown '))。val('黄色')；$('#listbox ')。val(['红色'，'蓝色'])；});的具体用法。val()上面已经介绍过了，那么我们什么时候可以使用。val()？你可以用。val()读取和修改由select选择的列表项。如上例所示，当然，这些值已经在现有列表项中；你可以用。val()读取select multiple='multiple '的选定值。如果选择更多选项值，则。val()将返回一个选项数组，但您不能使用。val()为他设置多个值。你可以用。val()读取单选和复选框的值，您也可以使用checked='checked '属性读取选定的值。但是，对于复选框，您需要遍历每个()，否则您只能读取第一个选定的值。您可以使用函数动态更改表单中多个元素的值。本节主要研究。HTML()，text()和。在jQuery中使用val()，最后总结了这三种方法：html()用作读取和修改元素的HTML标记。Text()用于读取或修改元素的纯文本内容。val()用于读取或修改表单元素的值。这三种方法的功能比较。html()，text()和。val()都用于读取所选元素的内容。只有。HTML()用于读取元素的Html内容(包括它们的html标签)，text()用于读取元素的纯文本内容，包括其后代和。val()用于读取表单元素的“value”值。那个。还有。text()方法不能用于表单元素，而。val()只能用于表单元素。此外，当。html()方法用于多个元素，只读取第一个元素；那个。val()方法与相同。html()。如果应用于多个元素，它只能读取第一个表单元素的“value”值，但是。text()与它们不同。如果。text()应用于多个元素，它将读取所有选定元素的文本内容。html (htmlstring)，文本(textstring)和。val(值)都用于替换选定元素的内容。如果这三种方法同时应用于多个元素，所有选定元素的内容都将被替换。html()，text()和。val()可以使用回调函数的返回值来动态改变多个元素的内容。