jQuery获取表单和的div中的值

客官°小女子只卖身不卖艺 2022-08-14 04:57 300阅读 0赞

## div，span等元素的取值和赋值 ##

在jQuery中，操作元素内容的方法包括html()和text()，通常用于获取和设置div，span中的属性  
html()与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；text()类似于JavaScript中德innerText属性，即获取或设置元素的文本内容。二者的区别如下

<table> 
 <thead> 
  <tr> 
   <th>语法格式</th> 
   <th align="center">参数说明</th> 
   <th align="right">功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>html()</td> 
   <td align="center">无参数</td> 
   <td align="right">用来获取元素的HTML内容</td> 
  </tr> 
  <tr> 
   <td>html(val)</td> 
   <td align="center">val参数为元素的HTML内容</td> 
   <td align="right">用来设置元素的HTML内容</td> 
  </tr> 
  <tr> 
   <td>text()</td> 
   <td align="center">无参数</td> 
   <td align="right">用来获取元素的文本内容</td> 
  </tr> 
  <tr> 
   <td>text(val)</td> 
   <td align="center">val参数为元素的文本内容</td> 
   <td align="right">用来设置元素的文本内容</td> 
  </tr> 
 </tbody> 
</table>

## 表单元素的取值和赋值 ##

在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下：

val(val)

其中如果不带参数val，则是获取某元素的值；反之，则是将参数val赋值给某元素。  
该方法通常用于表单中获取或设置对象的值。

一个简单的小示例

<form action="" method="post">
            您的问题：
            <textarea id="question" name="question"></textarea>
            您的电话:
            <input type="text" id="phone" name="phone">
            <input id="tijiao" type="submit" value="提交">
    </form>
    <span id="info"></span>
    <script type="text/javascript"> $("#tijiao").click(function() { var isMobile = /^(?:13\d|15\d)\d{5}(\d{3}|\*{3})$/; var isPhone = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; var ques = $("#question").val().trim(); var phone = $("#phone").val().trim(); if (ques.length != 0 & phone.length != 0) { if (!isMobile.test(phone) && !isPhone.test(phone)) { $("#info").html("请正确填写电话号码，例如:13312341234或028-69953140").css("color","#FF0000"); return false; } else { $("#info").html(""); return true; } } $("#info").html("请输入您的问题和电话").css("color","#FF0000"); return false; }); </script>

什么也没有输入界面

![什么都没输入][20151122223749916]  
电话号码有误界面

![电话号码有误][20151122223856194]  
都输入正确，正在提交界面

![正在提交界面][20151122224211285]

参考文献

> jQuery权威指南

[20151122223749916]: /images/20220731/ee68995474224fe2a728b486595b26cd.png
[20151122223856194]: /images/20220731/b022bc9ff1234974aea064f5b54dac26.png
[20151122224211285]: /images/20220731/ae3e274716d04c9d8d6d723742bdc30b.png