码迷,mamicode.com
首页 > Web开发 > 详细

JQ之html,text,val

时间:2015-09-08 00:15:29      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

JQ之html,text,val

标签:

原文地址:http://www.cnblogs.com/jasontoyell/p/4790221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!