zoukankan      html  css  js  c++  java
  • JQ之html,text,val

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
        <script>
            $(function(){
    
                //-------------------------------JQuery之html()[解析html标签]
    
                // 1.无参html():取得[ 第一个 ]匹配元素的html内容, 这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
                var phtml = $('p').html();
                console.log(phtml);
    
    
                // 2.有参html(val):设置[ 每一个 ]匹配元素的html内容,这个函数不能用于XML文档, 但可以用于XHTML文档,包含的html标签将会被解析,返回一个jquery对象
                $('p').html('<b>被替换了</b>的P元素的演示文本');
    
                // 3.参数是回调函数的html(funtion(index, html){...}): 第一个参数表示当前元素的索引位置(index从0开始), 第二个参数表示当前元素的html文本内容
                $('p').html(function(index, oldHtml){
                    return '' + (++index) + oldHtml;
                });
    
    
                //-------------------------------JQuery之text()[纯文本, 不解析html标签]
    
    
                // 1.无参text():取得[ 所有匹配 ]元素的内容, 结果是由[ 所有匹配 ]元素包含的文本内容组合起来的文本, 返回的是一个String
                var phtml = $('p').text();
                console.log(phtml);
    
                // 2.有参text(val):设置[ 所有匹配 ]元素的内容, 包含的html标签不会被解析
                $('p').text('<b>新的</b>text有参演示')
    
    
                // 3.参数是回调函数的html(funtion(index, html){...}): 第一个参数表示当前元素的索引位置(index从0开始), 第二个参数表示当前元素的html文本内容
                $("p").text(function(index,oldText){ 
                    return (++index) + "." + oldText; 
                }); 
    
    
                //-------------------------------JQuery之val()
    
    
                // 1.返回的是匹配的元素集合中的第一个
                var iVal = $('input:text').val();
                console.log(iVal);
    
                // 2.设置所有匹配元素的value值
                $('input:text').val('账号与昵称重复了!');
    
    
                $('input:text').eq(0).focus(function(){
                    $(this).val('');
                });
    
                $('input:text').eq(0).blur(function(){
                    $(this).val($('input:text').eq(1).val());
                });
        });
        </script>
    </head>
    <body>
        <p>第一个P元素的演示文本</p>
        <p>第二个P元素的演示文本</p>
        账号:<input type="text" value="Jason">
        昵称:<input type="text" value="洛基神棍">
    </body>
    </html>
  • 相关阅读:
    linux系统调用是通过软中断实现的吗
    Linux系统调用怎么和内核或底层驱动交互的
    strace命令
    linux 用户态和内核态以及进程上下文、中断上下文 内核空间用户空间理解
    C语言string.h常用函数总结
    shall的过去式和should怎么区分
    P(Y|X) 和 P(X,Y)
    Sourceinsight最佳配色方案及颜色字体调整方法
    float 为什么可以表示很大的整数
    协方差矩阵
  • 原文地址:https://www.cnblogs.com/jasontoyell/p/4790221.html
Copyright © 2011-2022 走看看