jQuery HTML、text、val 方法使用_$("#resultdescriptiontext").val(html);-CSDN博客

本文链接：https://blog.csdn.net/weixin_45000381/article/details/93670662

本文深入讲解了使用jQuery库操作DOM的基本方法，包括text(), HTML()和val()等函数的运用，探讨了如何获取和设置元素内容，以及通过匿名函数实现元素内容的动态设置。文章通过实例演示了这些方法在网页元素上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text （），HTML（），val（）方法获取第一，设置全部，遍历设置不同内容，熟悉使用匿名函数方法赋值

function（index，item）{ 执行语句 return 返回需要的值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <script>
//text讲解，获取一个，设置不同，给每个设置不同的内容
        // 这个可以获取所有被选中标签的内容文本组合而成的一个字符串
        // console.log($("div").text());

        // 将所有标签设置为某个字符串内容
        // $("div").text("aaa");

        // $("div").each(function(index,item){
        //     $(item).text(index*10);
        // })

        // text方法也可以遍历,参数index是索引,item是每个元素的内容
        // $("div").text(function(index,item){
        //     // 这个item不是每个div,而是每个div中textContent内容
        //     // console.log(index,item);
        //     return item+"0";   //返回一个值，   
        // })
        // 推荐使用这个方法遍历比较简洁写


        // var city=["北京","上海","广州","深圳","武汉"];
        // var site=[
        //     {site:"网易",url:"www.163.com"},
        //     {site:"腾讯",url:"www.qq.com"},
        //     {site:"百度",url:"www.baidu.com"},
        //     {site:"京东",url:"www.jd.com"},
        //     {site:"淘宝",url:"www.taobao.com"}
        // ]
//HTML讲解，获取第一个，设置全部，给每个设置不同的内容
        // 获取div的html内容,仅能获取第一个元素的
        // console.log($("div").html());
        // 给每个div设置html的内容
        // $("div").html("<a href='#'}>超链接</a>");

        // 给每个div设置不同html内容
        // $("div").html(function(index,item){
        //     return `<a href='#'>${city[index]}</a>`
        // })
//案例，给多个div添加文本和不同网址
        // $("div").html(function(index,item){
            // return `<a href='http://${site[index].url}'>${site[index].site}</a>`  //这个是用字符模板写法
            // return "<a href='http://"+site[index].url+"'>"+site[index].site+"</a>";   //这个是加号写法
        // });

// val，获取第一个，设置全部，给不同的设不同
            // $("input").on("blur",function(){  //blur是失焦事件
            //     console.log($(this).val());
            // })
            // 只能获取jQuery对象的第一个元素val
            // console.log( $("input").val())   

            // $("input").val("aaa");
            // ??怎么设置不同的值
            // $("input").val(function(index,item){//给每个input设置不同的内容，
            //     return index+item+"字符串";
            // })
//总结：可以发现，text，HTML，val都适用与（function（index，item）{
    // 执行语句
// }）
        </script>
    
</body>
</html>