您的位置：首页 > Web前端 > JQuery

jQuery修改标签的内容或值

2017-05-11 14:26 330 查看

我一直知道要修改标签的内容和值有三种方式，但是最近遇到一项目却让我在改变表单元素的值上浪费了很多时间，其实我大概都知道他们的区别在哪里，只是有的时候总是会忘记，现在就来给几个简单的例子，希望以后不要再犯糊涂；

1.关于表单

这里我就写一个关于textarea的例子吧，

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.modle-wrap{
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.5
)!important;
background: #000;
filter: alpha(opacity=80); /*ie6/7/8*/
display: none;
}
.modle-container{
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.refuse{
width: 740px;
height: 350px;
position: absolute;
left:50%;
top:50%;
margin-top:-175px;
margin-left:-370px;
background: #fff;
}
.refuse_title{
height: 50px;
font-size: 16px;
line-height: 50px;
background: #1A8CDC;
color: #fff;
}
.refuse_content{
padding:40px 30px 0;
width: 100%;
}
.refuse_word_height{
width: 628px;
height: 150px;
overflow:scroll;
overflow-x: hidden;
}
.refuse_word{
width: 628px;
border:1px solid #CCCCCC;
resize: none;
min-height: 150px;
height: auto;
color: #999;
line-height: 30px;
padding:0 5px;
}
.refuse_btn{
width: 160px;
line-height: 36px;
height: 36px;
text-align: center;
border:1px solid #1A8CDC;
background: #fff;
margin-top:40px;
border-radius: 2px;
}
.refuse_btn+.refuse_btn{
margin-left: 40px;
}
.refuse_btn.on{
background: #1A8CDC;
color: #fff;
}

</style>
<body>
<p class="agreen text_center">
<button class="pc_btn on pointer pc_yes">同意</button>
<button class="pc_btn pointer pc_no" id="">拒绝</button>
</p>
<div class="modle-wrap refuse_box">
<div class="modle-container">
<div class="refuse">
<h5 class="refuse_title">拒绝原因</h5>
<div class="refuse_content">
<span class="float_left">原因</span>
<div class="float_right" id="refuse_word_height">
<textarea class="refuse_word" id="refuse_word">拒绝原绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原</textarea>
</div>
</div>
<p class="refuse_btnOut">
<button class="on refuse_btn yes" id="yes">确定</button>
<button class="refuse_btn close" id="close">关闭</button>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".pc_no").click(function(){
$(".refuse_box").show();
})

var refuse_word=$("#refuse_word").text();
var focus=0;
$("#refuse_word").focus(function(){
focus+=1;
console.log(focus);
if(focus==1){
$("#refuse_word").text("");
}
});
$(".close").click(function(){
$(".modle-wrap").hide();
})
$(".yes").click(function () {
focus = 0;
$(".refuse_box").hide();
refuse_word="请输入拒绝原因";
console.log(refuse_word);
$("#refuse_word").val(refuse_word);
})
$(".refuse_btnOut .refuse_btn").click(function(){
$(this).addClass("on").siblings('.refuse_btn').removeClass('on');
})
})
</script>
</body>
</html>描述一下这个例子吧，点击“拒绝”会弹出拒绝原因填写页面，让文本框第一次获取焦点清空文本，在未提交（未按确定）之前关闭此页再次用过“拒绝”按钮打开此页任然保留数据，当点击“确认”就会将框类的值跟换成“请输入拒绝原因”；
我之前用text（）来获取值改更改值，发现始终在页面显示不出来，只能打印出来

总结，表单元素顺利修改他的内容，就的使用val（）；

2.再说说html（）与text（）的区别

不同点一：

   html()在获取元素内容时，如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

   text()在获取元素内容时，结果是由所有匹配元素包含的文本内容组合起来的文本

<p>段落一</p>
<p>段落二<p>


$(function(){
alert($("p").text());
})

弹出框结果为：段落一段落二

[javascript] view
plain copy

$(function(){
    alert($("p").html());
})

不同点二：

html()在获取内容时，会将其中的其他标签也读取出来

text()在获取内容时，会忽略其中的标签

不同点三：

    html()在更改内容时，可以加入标签

    text()更改的全是内容

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航