彻底弄清Jquery中html(), text(), val() 的区别.

来源：互联网发布：python 自动完成编辑：程序博客网时间：2024/05/20 08:00

在jquery中存在的三种获取和修改标签的方法.

1.html()

获取选择器所指向的元素的html内容

如果带有参数html(value) 就是修改这个元素的html

2.text()

获取选择器所指向的元素的文本内容

如果带有参数text(value) 就是修改这个元素的文本

3.val()

获取元素的值

如果带有参数val(value) 就是修改这个元素的值

不多说直接看例子

<!DOCTYPE html><html lang="zh-CN">    <head>        <title>Bootstrap</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta charset='utf-8'>        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <!-- Bootstrap -->        <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->        <!--[if lt IE 9]>            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>        <![endif]-->        <style type="text/css">                    </style>    </head>    <body>        <div>            111            <p>222</p>        </div>        <input type="text" value="your name" />        <script type="text/javascript">            $(function(){                $('div').text('333');            });        </script>    </body></html>

如果把这段代码中的text 改成html 那么结果是一样的为什呢?

其实text 和html是有区别., 前者是获取div这个标签里的文本那么就是111222, 而后者是获取div中的一切就是111222 但是由于都是修改为333所以才造成了.结果一样.

那么如果你$('div').text('444'); 实际显示是444 如果你$('div').html('444'); 实际显示是444

下面说val()

<!DOCTYPE html><html lang="zh-CN">    <head>        <title>Bootstrap</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta charset='utf-8'>        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <!-- Bootstrap -->        <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->        <!--[if lt IE 9]>            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>        <![endif]-->        <style type="text/css">                    </style>    </head>    <body>        <div>            111            <p>222</p>        </div>        <input type="text" value="your name" />        <script type="text/javascript">            $(function(){                $('input').val('lalal');            });        </script>    </body></html>

这个就是直接把input中默认显示的your name 改成了lalal 当然val还可以$("select").val().join(','); 这个是吧select标签中选的项全部拿到并用逗号连接.

希望大家能通过这次彻底搞清楚他们3个

0 0