JQuery学习笔记(4)---html(),text()和val()的区别与联系

一、源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script language="javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript">
	$(function(){
		$('#html-get').click(function(){
			alert($('p').html());   //取得第一个p元素的内容。
		});
		
		$('#html-set').click(function(){
			$('p').html("<font size='10' color='red'>Hello World!</font>");   //设置所有p元素的内容
		});
		
		$('#html-function-set').click(function(){
			$("p").html(function(n){   //使用函数来设置所有p元素的内容。
    			return "html-这个p元素的index是:" + n;
    		});	
		});
		
		
		$('#text-get').click(function(){
			alert($('p').text());   //取得所有p元素文本的内容。
		});
		
		$('#text-set').click(function(){
			$('p').text('Hello World!');   //设置所有p元素的文本内容
		});
		
		
		$('#text-function-set').click(function(){
			$("p").text(function(n){   //使用函数来设置所有p元素的文本内容。
    				return "text-这个p元素的index是:" + n;
    		});
		});
		
		$('#val-get').click(function(){
			alert($('input').val());   //获取文本框中的值	
		});

		$('#val-set').click(function(){
			$("input").val("hello world!");   //设定文本框的值
		});
		
		$('#val-function-set').click(function(){   //此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
			$('input:text').val(function(index,text) {
 				return index + '-' + text + '-' + '测试';
			});
		});
		
		
	});
</script>

</head>

<body>
<center>
  <p>测试</p>
  <p>呵呵</p>
  <input type="text" value='帐号' />
  <input type="text" value="密码" />
  <br />
  <button id='html-get'>html()取内容</button>
  <button id='text-get'>text()取内容</button>
  <button id='val-get'>val()取内容</button>
  <br />
  <button id='html-set'>html()修改内容</button>
  <button id='text-set'>text()修改内容</button>
  <button id='val-set'>val()修改内容</button>
  <br />
  <button id='html-function-set'>html()函数修改内容</button>
  <button id='text-function-set'>text()函数修改内容</button>
  <button id='val-function-set'>val()函数修改内容</button>
</center>
</body>
</html>

二、部分运行结果:

JQuery学习笔记(4)---html(),text()和val()的区别与联系_第1张图片JQuery学习笔记(4)---html(),text()和val()的区别与联系_第2张图片JQuery学习笔记(4)---html(),text()和val()的区别与联系_第3张图片JQuery学习笔记(4)---html(),text()和val()的区别与联系_第4张图片JQuery学习笔记(4)---html(),text()和val()的区别与联系_第5张图片JQuery学习笔记(4)---html(),text()和val()的区别与联系_第6张图片


三、相关知识:

1.html():取出/设置匹配元素的内容的值

2.text():取出/设置匹配元素的内容的文本的值

3.val():取出/设置文本框中的值

你可能感兴趣的:(JavaScript,html,jquery)