18-Jquery的html()、text()、val()方法

html()方法
这个方法类似JavaScript中innerHTML属性,可以用来获取或设置元素中的HTML内容。
实例1:使用html()方法获取内容


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html()方法的获取使用title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    <p id="fruit"><strong>喜欢的水果?strong>苹果p>
    <script>
        $(function(){
      
            /*获取指定元素中的内容:内容包括html*/
           var $_html= $("#fruit").html();
            alert($_html);
        });
    script>
body>
html>

实例2:使用html()设置内容


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html()方法的设置使用title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    <p id="fruit"><strong>喜欢的水果?strong>苹果p>
    <script>
        $(function(){
      
            /*给指定的元素设置内容:内容包括html标签,并且会将内容中html标签使用浏览器解析。*/
            $("#fruit").html("喜欢的运动?游泳");
        });
    script>
body>
html>

text()方法

实例3:使用text()方法获取指定元素中的文本


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text()方法的获取使用title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    <p id="fruit"><strong>喜欢的水果?strong>苹果p>
    <script>
        $(function(){
      
            /*text():获取指定元素的内容:内容不包含html,只获取其中的文本*/
           var $_text= $("#fruit").text();
            alert($_text);
        });
    script>
body>
html>

实例4:使用text()设置内容


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text()方法的设置使用title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    <p id="fruit"><strong>喜欢的水果?strong>苹果p>
    <script>
        $(function(){
      
        /*text():给指定的元素设置内容,注意这个内容包含html,但是会将内容中的html当做普通的字符串对待(浏览器不会解析)*/
           $("#fruit").text("喜欢的运动?游泳");

        });
    script>
body>
html>

注意html()和text()的区别:
html():获取指定元素中的内容:内容包括html。
给指定的元素设置内容:内容包括html标签,并且会将内容中html标签使用浏览器解析。
text():获取指定元素的内容:内容不包含html,只获取其中的文本.
给指定的元素设置内容,注意这个内容包含html,但是会将内容中的html当做普通的字符串对待(浏览器不会解析)。
val()方法
这个方法类似JavaScript的表单元素中的value属性,可以用来获取和设置表单元素中value属性的值。无论元素是文本、下拉列表还单选框都可以返回元素value属性的值。如果是多选框,则返回一个包含所有选中的值的数组。
实例5:使用val()方法获取表单元素的值


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>val()方法的获取值title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    username:<input type="text" id="username" value="admin" placeholder="请输入用户名"><br>
    <script>
        $(function(){
      
            /*val():获取指定表单元素value属性的值*/
          var name=  $("#username").val();
            alert(name);
        });
    script>
body>
html>

实例6:使用val()方法给表单元素设置value属性的值


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>val()方法的设置值title>
    <script src="jquery-1.11.3.js">script>
head>
<body>
    username:<input type="text" id="username" value="admin" placeholder="请输入用户名"><br>
    <script>
        $(function(){
      
            /*给指定的表单元素设置value属性的值*/
            $("#username").val("小明");
        });
    script>
body>
html>

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