练涛

jQuery(7)——DOM操作 html,html,val,attr方法

jQury学习DOM操作


text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

以下代码测试三者获取元素的值有什么区别:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery学习 dom操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            //测试text()和html()和val()方法
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("html():"+html);
            console.log("text():"+text);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //测试text()和html()方法对于表单元素的起不起作用
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();
        })
    </script>
    <style>
        #box{
            width: 500px;
            border: 1px green;
            margin:0 auto;
        }
        #a,#b,#c{
            height: 30px;
            border: 2px solid #666;
            background:rgba(0,0,0,.1);
            margin:20px 0px;
        }
        #input{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
    </div>
    
</body>
</html>

结果如图:
jq dom

经测试,text()和html()有明显的自带标签元素与否的区别,而val()并不能获取div内的值,相反text()和html()也不能获取input的value,val()可以。

测试三者修改元素内容的区别

直接添加js代码:

 $(document).ready(function(){
            //测试text()和html()和val()方法
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("text():"+text);
            console.log("html():"+html);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //测试text()和html()方法对于表单元素的起不起作用
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();

            //通过text()和html()和val()方法修改元素内的值
            var text2=$("#a").text("你好,我是A");
            var html2=$("#b").html("你好,我是B");
            var val2=$("#input").val("你好,我是input的value");
            //console.log("text():"+text2);
            //console.log("html():"+html2);
            //console.log("val ():"+val2);
            
        })

如图:
jq dom

效果是一样的,审查元素结果是一样的。


attr()

  • jQuery attr() 方法用于获取属性值。
<div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
        <div>
            <a id="attr" href="https://liantao.me">个人主页</a>
        </div>
    </div>
//===============测试attr============
            var attr=$("#attr").attr("href");
            alert(attr);
            attr=$("#attr").attr("href","https://blog.liantao.me");
            attr=attr.attr("href");
            alert("href修改为:"+attr)

显示,如图:
liantao.me

当然,也可以修改它
jq attr

完整demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery学习 dom操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            //=================测试text()和html()和val()方法=============
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("text():"+text);
            console.log("html():"+html);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //=========测试text()和html()方法对于表单元素的起不起作用=========
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();

            //通过text()和html()和val()方法修改元素内的值
            var text2=$("#a").text("你好,我是A");
            var html2=$("#b").html("你好,我是B");
            var val2=$("#input").val("你好,我是input的value");
            //console.log("text():"+text2);
            //console.log("html():"+html2);
            //console.log("val ():"+val2);

            //===============测试attr============
            var attr=$("#attr").attr("href");
            alert(attr);
            attr=$("#attr").attr("href","https://blog.liantao.me");
            attr=attr.attr("href");
            alert("href修改为:"+attr)
            
        })
    </script>
    <style>
        #box{
            width: 500px;
            border: 1px green;
            margin:0 auto;
        }
        div{
            height: 30px;
            border: 2px solid #666;
            background:rgba(0,0,0,.1);
            margin:20px 0px;
        }
        #input{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
        <div>
            <a id="attr" href="https://liantao.me">个人主页</a>
        </div>
    </div>
    
</body>
</html>

END

posted @ 2018-10-13 00:20  练涛  阅读(674)  评论(0编辑  收藏  举报