xinggevip

jQuery之文本属性
01设置文本text()<div id="demo1"> Hello &l...
扫描右侧二维码阅读全文
03
2019/07

jQuery之文本属性

01设置文本text()

<div id="demo1">
    Hello
</div>
<button id="btn1">按钮</button>

<script src="../jqueryFile/jquery-3.4.1.js"></script>
<script>
    $("#btn1").click(function (){
        console.log( $("#demo1").text() );
        $("#demo1").text("修改文本")
    })
</script>

02遍历文本

<p>这是文本1</p>
<p>这是文本2</p>
<p>这是文本3</p>
<p>这是文本4</p>
<p>这是文本5</p>

<button id="btn">BTN</button>



<script src="../jqueryFile/jquery-3.4.1.js"></script>
<script>
    // 点击按钮遍历p标签中的文本
    $("#btn").click(function (){
        $("p").text(function (index, ele){
            console.log(index,ele); // 0 "这是文本1"...
            if(index %2 == 0){
                return "偶数行";
            }else{
                return "奇数行";
            }
        });
    });
</script>

TIM截图20190703095817.png

03添加能解析标签的内容html()

<div id="demo">
    Hello
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<button id="btn">BTN</button>
<script src="../jqueryFile/jquery-3.4.1.js"></script>
<script>
    // 在#demo中添加标签
    // $("#btn").click(function (){
    //     $("#demo p").html("前端<b>码畜</b>");
    // });

    $("#btn").click(function (){
        $("#demo p").html(function (index,ele){
            console.log(ele);
            return "前端<b>码畜</b>";
        });
    });

    // text() 取值赋值均一组
    // html() 取值取一个,赋值赋一组
 
</script>

04val()

04.1

<input type="text" value="Your Name" id="t1">
<button id="btn">BTN</button>



<script src="../jqueryFile/jquery-3.4.1.js"></script>
<script>
    $("#btn").click(function (){
        console.log( $("#t1").val() );  // Your Name
    });


    // val() 取值取一个,赋值赋一组

</script>

04.2

你为什么喜欢我?
<select name="list" id="list">
    <option value="cute">可爱</option>
    <option value="tender" selected>温柔</option>
    <option value="no-reason">毫无理由</option>
</select>
<button id="btn">BTN</button>
<script src="../jqueryFile/jquery-3.4.1.js"></script>
<script>
    $("#btn").click(function (){
        // 功能很鸡肋
        $("select").val(["no-reason"]); //默认选项从 温柔 变成了毫无理由,数组可以有多个值,可以选中多项
    })
        
    
</script>
Last modification:July 3rd, 2019 at 02:51 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment