zoukankan      html  css  js  c++  java
  • jq:基本操作(text()、html() 、val()、attr())

    1、text() :设置或返回所选元素的文本内容

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>DOM操作</title>
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
            </script>
            </script>
            <script>
                $(function(){
                     $("#b").click(function(){
                     alert($("#test").text());
                     });
                });
            </script>
        </head>
        
        <body>
        <p id="test">海军军医大学第二附属医院(上海长征医院)举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕,除夕之夜奔赴武汉。</p>
        <button id="b">显示文本</button>
        </body>
    </html>

     2、html() : 设置或返回所选元素的内容(包括 HTML 标记)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>DOM操作</title>
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
            </script>
            </script>
            <script>
                $(function(){
                     $("#b").click(function(){
                     alert($("#test").html());
                     });
                });
            </script>
        </head>
        
        <body>
        <p id="test">海军军医大学第二附属医院(上海长征医院)举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕,除夕之夜奔赴武汉。</p>
        <button id="b">显示文本</button>
        </body>
    </html>

     3、val() : 设置或返回表单字段的值

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>DOM操作</title>
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
            </script>
            </script>
            <script>
                $(function(){
                     $("#b").click(function(){
                     alert($("#test").val());
                     });
                });
            </script>
        </head>
        
        <body>
        <input type="text" id="test" value="新年快乐!"><br><br>
        <button id="b">显示输入的文本内容</button>
        </body>
    </html>

    4、attr() :用于获取属性的值、

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>DOM操作</title>
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
            </script>
            </script>
            <script>
                $(function(){
                     $("#b").click(function(){
                       alert($("#test").attr("align"));
                     });
                });
            </script>
        </head>
        
        <body>
            <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3" id="test">
                <caption>成绩登记表</caption>
            <thead>
                <tr>
                    <th align="middle" >序号</th>              
                    <th align="middle ">学号</th>
                    <th align="middle ">姓名</th>
                    <th align="middle ">平时成绩</th>
                    <th align="middle ">期末成绩</td>
                    <th align="middle ">学期总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
                    <td align="middle ">1</td>
                    <td align="middle ">20100300201</td>
                    <td align="middle ">张小丽</td>
                    <td align="middle ">95</td>
                    <td align="middle ">95</td>
                    <td align="middle ">95</td>
                </tr>
            </tbody>
            </table>
            <center>
                    <button id="b">显示属性的值</button>
            </center>
        </body>
    </html>

  • 相关阅读:
    2019-2020信息安全系统设计基础 20175306 20175309 20175326 实验二 固件程序设计
    2019-2020信息安全系统设计基础 20175306 20175309 20175326 实验一 开发环境的熟悉
    2018-2019-2 20175306实验五《网络编程与安全》实验报告
    2018-2019-2 20175306实验四《Android程序设计》实验报告
    20175306王佳烁第十一周学习总结
    20175306王佳烁第十周学习总结
    20165229 NetSec Exp9 Web安全基础
    2018-2019-2 20165229《网络对抗技术》Exp 8 Web基础
    20165229《网络对抗技术》Exp7 网络欺诈防范
    20165229《网络攻防技术》Exp6 信息搜集与漏洞扫描
  • 原文地址:https://www.cnblogs.com/zhai1997/p/12233084.html
Copyright © 2011-2022 走看看