美文网首页我爱编程
七、JQuery-5、通过JQuery获取或者设置网页元素

七、JQuery-5、通过JQuery获取或者设置网页元素

作者: cybeyond | 来源:发表于2018-06-06 10:38 被阅读0次

1、获取内容

text()、html()、val()

举例:'<input type="text" value="测试" id="name">'
$("#name").val() //得到结果:测试
'<div id="info"> <b>早上好</b></div>'
$("#info").text() //得到结果:显示文字 早上好 相当于DOM中的innerText
$("#info").html()//得到结果:显示标记 <b>早上好</b> 相关与DOM中的innerHTML

2、获取和设置属性

$("#info").attr("href","http://www.baidu.com");//将其链接改为www.baidu.com
用text(),html(),val()来设置元素值的时候,可以传入一个函数
对这个函数时有要求的:
(1)要有返回值,返回值就是用来设置元素的值
(2)有两个参数,i,s,其中i表示索引,s表示旧值

<html>
<head>
<meta http-equiv="Content-Type content="text/html;charset=gbk" />

<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".info").html(function(index,old){  //html()中引入函数
            var str=old;
            if(index>0)
            {
                str="<b>" +old+ "</b>";//将第2、3个变成粗体
            }
            return str;
        });
    });
});

</script>
</head>
<body>
<div class="info">第一段测试文字</div>
<div class="info">第二段测试文字</div>
<div class="info">第三段测试文字</div>
<button>test</button>
</body>
</html>
执行结果

相关文章

网友评论

    本文标题:七、JQuery-5、通过JQuery获取或者设置网页元素

    本文链接:https://www.haomeiwen.com/subject/qnovsftx.html