html常⽤标签的取值和赋值操作
我们在html页⾯当中，⾯对各种各样的标签，经常需要处理取值和赋值的问题，下⾯，就把常见的⼀些html标签元素的取值和赋值操作进⾏总结整理，以后备⽤。
1.button：改变button按钮上⾯的值，⽐如把确定按钮取消按钮
<button id="btn">确定</button>
$("#btn").click(function () {
$("#btn").text("取消");//这个是改变按钮上⾯显⽰的值，⽤这个
$("#btn").val("取消");//这个不是按钮上⾯显⽰的值
});
2.span：取出span对应的值和给span赋值
<span></span>
$("span").html("现在给span进⾏赋值操作");//赋值操作
console.log("span标签⾥⾯的值是："+$("span").html());//取值的⽅法
3.a：a标签的href，下划线，css，⽂本值的常见操作
<a href="www.baidu" id="baidu" target="_blank">百度⼀下，就看⼴告</a>
<style type = “text/css”>
a {font-size:16px}  //设置字体⼤⼩
a:link {color: blue; text-decoration:none;} //链接未访问：蓝⾊、⽆下划线
a:active:{color: red; } //链接激活：红⾊
a:visited {color:purple;text-decoration:none;} //链接已访问：紫⾊、⽆下划线
a:hover {color: red; text-decoration:underline;} //链接⿏标覆盖时：红⾊、下划线
</style>
//修改a标签href的值
$("#baidu").attr("href","www.csdn/");
//修改a标签⽂本的值
$("#baidu").text("csdn学技术吧");
//none(去掉下划线),underline(下划线),blink(闪烁),overline(上划线),line-through(贯穿线)
$("#baidu").css("text-decoration","none");
4.select：确定下拉选的值及其他常见操作
<select id="fruit_select" >
<option>--请选择--</option>
<option value="1">Orange</option>
<option value="2">BuleBerry</option>
<option value="3">Apple</option>
<option value="4">Lemen</option>
<option value="5">Grape</option>
<option value="6">Strawberry</option>
</select>
下拉选的改变事件：获取当前选择的值、选择值的value值、选择值的下标⼤⼩
//下拉选的改变事件
$("#fruit_select").change(function () {
var selectText = $("#fruit_select").find("option:selected").text();
console.log("当前选择的是哪⼀种⽔果:"+selectText);
//获取下拉框选中项的value属性值
var selectValue = $("#fruit_select").val();
console.log(selectValue);
//获取下拉框选中项的index属性值：index从0开始
var selectIndex = $("#fruit_select").get(0).selectedIndex;
});
//设置slectIndex=5为选中的值：当前对应Grape
$("#fruit_select").get(0).selectedIndex = 5;
//设置下拉框value属性为4的选项选中：当前对应Lemen
$("#fruit_select").val(4);
//设置下拉框text属性为Grape的选项选中
$("#fruit_select option:contains('Grape')").attr("selected", true);
//在下拉框最后添加⼀个选项
$("#fruit_select").append("<option value='7'>WaterMelon</option>");
//在下拉框最前添加⼀个选项
$("#fruit_select").prepend("<option value='0'>--请不要选择--</option>")
//移除下拉框所有选项option
$("#fruit_select").empty();
$("#fruit_select").html("");
//移除下拉框最后⼀个选项
$("#fruit_select option:last").remove();
//移除下拉框 value属性为4的选项
$("#fruit_select option[value=4]").remove();
5.radio：默认情况下选择（checked="checked"），表单提交的时候获取选定的值
htmlradio设置默认的按钮
<label><input type="radio" name="sex" value="m" checked="checked">男</label>
<label><input type="radio" name="sex" value="f">⼥</label>
var val = $('input[name="sex"]:checked').val();
console.log("当前选择的是男是⼥："+val);//出来的值对应的m或者f
//设定name="sex"的第⼀个radio为选中状态
$("input[name='sex']").get(0).checked=true;
6.checkbox：设置checkbox的选中状态和获取checkbox是否选中
<input type='checkbox' id='cb'/>
var isChecked = $('#cb').attr('checked');//有些可以这么获取，但是⼀般情况下⽆效了下⾯是改进的⽅法
//获取是否选中
var isCheckedA = $('#cb').prop('checked');
var isCheckedB = $('#cb').is(":checked");
console.log("cb是否选中："+isCheckedA);
console.log("cb是否选中："+isCheckedB);
if(!isCheckedA&&!isCheckedB){
//设置选中
$('#cb').prop('checked',true);
}
7.ul li：去掉li前⾯的⿊点，设置⿏标样式，并且取值
<ul id="ul_id">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
$("#ul_id").css({"list-style":"none","cursor":"pointer"});//去掉⿊点，⿏标为⼿型
$("#ul_id li").click(function () {
//测试直接获取值
var value=$(this).text();
console.log("当前点击的li的值是："+value);
ar count=$(this).index();//获取li的下标
console.log("当前点击的li的下标是："+count);
});
$("#btn").click(function () {
$("#ul_id").append("<li>选项6</li>");//动态的往ul上⾯增加li标签
}
8.input:type="text"的取值和赋值的操作
<input type="text" placeholder="请输⼊内容" id="context">
$("#btn").click(function () {
$("#context").val("点击按钮之后给context的输⼊框赋值");
console.log("当前输⼊框的内容是："+$("#context").val());
}
9.把⼀个div变成⼀个可以编辑的区域
<div contenteditable="true" class="editor_area"></div>
$(".editor_area").css({
"width":"500px",//宽度
"height":"216px",//⾼度
"border":"1px solid #E4E8EB",//边框
"padding":"14px 20px",//离边框的间距
"outline":"none",//不要轮廓线
"margin":"auto"//div的margin
});
//取值
var content = $(".editor_area").text().trim();
/
/赋值或者清空
$(".editor_area").html("");
以上是对html⼀些元素常⽤的取值赋值操作的⼀些总结，希望能在以后对这篇⽂章进⾏补充，⼀是备忘，⽽是学习的总结过程。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。