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
        });

html常用标签的取值和赋值操作

猜你喜欢