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="https://www.baidu.com" 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","https://www.csdn.net/");
//修改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"），表单提交的时候获取选定的值

<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一些元素常用的取值赋值操作的一些总结，希望能在以后对这篇文章进行补充，一是备忘，而是学习的总结过程。
---------------------
原文：https://blog.csdn.net/qq_38455201/article/details/80594104