JQ——DOM操作(获取值)

Posted zhai1997

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ——DOM操作(获取值)相关的知识,希望对你有一定的参考价值。

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>

技术图片

 

以上是关于JQ——DOM操作(获取值)的主要内容,如果未能解决你的问题,请参考以下文章

小白学jQuery

JQ——设置值DOM对象和JQ对象的转换

jq-outerhtml不能执行新元素内部的js解决方案

jq easyui 怎么获取到每一行的值 并且把下拉框选中的值也获取到。

jQ选择器学习片段(JavaScript 部分对应)

jQuery的DOM操作