jquery对文本赋值和取值_jQuery中使用text()、html()、val()方法对Html元素赋值和取值...

01第1节：概述

对于#JavaScript#来说，其核心的功能就是对Html DOM的操作，但是JavaScript提供的操作方法比较复杂，学习起来有一定的难度。

因此，jQuery对JavaScript操作DOM的函数进行了封装，变的简洁、短小，更易用。

这里主要来学习一下jQuery对Html标记内容的操作。

02第2节：text()方法

一、基本含义

在jQuery中，使用选择器可以非常容易的得到任何一个Html元素，在Html页面上，分表单元素和非表单元素：

表单元素：以input为标记的元素，生成的标记有单行文本框、多行文本框、单选按钮、多选按钮、下拉菜单等。非表单元素：div、p、span、h1、h2、h3等。而对于jQuery封装的text()方法，其主要功能就是给Html页面上的非表单元素赋值和取值操作。

注意事项：

使用text()不能获取表单元素的值，如文本框的值。jQuery的text()方法相当于JavaScript的innerText属性。二、案例应用一(取值)

下面，我们编写一段Html代码，然后使用jQuery的DOM操作，使用text()方法对div元素操作。

Html+jQuery代码如下：

DIV1

P1

SPAN1

H2

上面的代码说明如下：

使用jQuery选择器得到id=div1的div元素。然后使用得到的元素对象的text()方法获取div元素的文本值。运行一下上面的代码，效果如下：

图1

在图1中，获取的文本值是DIV1，正好是id=div1元素的值。

text()方法是jQuery的方法，使用该方法操作的元素必须是使用jQuery选择器查找到的，如果使用JavaScript查找到的元素，则是不能使用text()方法操作的。

三、案例应用二(赋值)

这里获取一个div元素，然后使用jQuery的text()方法给div元素赋值。

JavaScript代码如下：

Html代码还是使用案例一的，这里给text()方法传了一个文本值参数：Hello，表示给id=div1的元素赋值为Hello。

运行一下结果：

图2

由于我们是将Jquery代码放在就绪函数中的，因此，只要页面一运行，就会执行，直接给div元素赋值。

总结：使用div1.text()获取div元素的值，使用div1.text(“新值”)给div元素赋值。

03第3节：html()方法

一、基本含义

jQuery的html()方法与text()方法，都是给非表单元素赋值和取值的，但是html()功能更强大一些，还可以给元素赋的值是html代码。

jQuery的html()方法相当于JavaScript的innerHtml属性。

二、案例应用一(取值)

下面使用jQuery选择器先获取div元素对象，然后再获取元素的值。

Html+jQuery代码如下：

欢迎jQuery

jQuery非常简单。

此代码中，使用了html()方法获取div1元素带有html代码的值。

运行结果如下：

图3

三、案例应用二(赋值)

再列举一个案例，使用html()方法给div元素添加“

谢谢！

”。

Html+JqUERY代码如下：