zoukankan      html  css  js  c++  java
  • jQuery属性--html([val|fn])、text([val|fn])和val([val|fn|arr])

       html([val|fn])

    概述

        取得第一个匹配元素的html内容,这个函数不能用于XML文档。但可以用于XHTML文档。

        在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取

    参数

        val  用于设定HTML内容的值;function(index,html)  此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("p:eq(0)").click(function() {
                        alert($(this).html());
                    });
                    
                    $("p:eq(1)").click(function() {
                        $(this).html("<a href='#'>第二个段落内容已换。<a>");
                    });
                    
                    $("p:eq(2)").click(function() {
                        $(this).html(function(){
                            return "简单一点就好!";
                        });
                    });
                })
            </script>
        </head>
    
        <body>
            <p><a>第一个段落。</a></p>
            <p>第二个段落。</p>
            <p>第三个段落。</p>
        </body>
    
    </html>
     

       text([val|fn])

    概述

       取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效

    参数

       val  用于设置元素内容的文本。function(index,text)  此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("p:eq(0)").click(function() {
                        alert($(this).text());
                    });
                    
                    $("p:eq(1)").click(function() {
                        $(this).text("<a href='#'>第二个段落内容已换。<a>");
                    });
                    
                    $("p:eq(2)").click(function() {
                        $(this).text(function(){
                            return "简单一点就好!";
                        });
                    });
                })
            </script>
        </head>
    
        <body>
            <p><a>第一个段落。</a></p>
            <p>第二个段落。</p>
            <p>第三个段落。</p>
        </body>
    
    </html>
     

       val([val|fn|arr])

    概述

       获得匹配元素的当前值

    参数

       val  要设置的值;function(index,value)  此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("button").click(function(){
                        alert($("input:eq(0)").val());
                        
                        $("input:eq(1)").val("测试二")
                    });                                
                })
            </script>
        </head>
    
        <body>
            测试一:<input type="text" value="测试一"/><br />
            测试二:<input type="text" />
            <button>点击</button>
        </body>
    
    </html>
  • 相关阅读:
    i++循环与i–循环的执行效率
    嵌入式linux通用截图工具
    imgsed发布
    Embedded Linux From Scratch
    WordPress Plupload插件未明跨站脚本漏洞
    Microsoft Internet Explorer 信息泄露漏洞
    WordPress 多个安全漏洞
    dedecms plus/search.php 注入漏洞利用EXP
    JBoss Enterprise Portal Platform多个跨站脚本执行漏洞
    WordPress organizer/page/users.php脚本多个跨站脚本漏洞
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10081521.html
Copyright © 2011-2022 走看看