jquery常见用法

jquery常见用法

<input type="hidden" class="form-control" id="test1" name="bom" autocomplete="off"/>
<input type="text" class="search-control" id="test2" name="cpuType" autocomplete="off" />
<select id='test3' name="listClass">
    <option value='movie'>电影</option>
    <option value='eat'>吃饭</option>
</select>
<div id="radioWrap">
    <input type="radio" name="sex" value="0"/>
    <input type="radio" name="sex" value="1"/>
</div>
<input type="checkbox" name="checkbox" value="读书"/>
<input type="checkbox" name="checkbox" value="写字"/>
<input type="checkbox" name="checkbox" value="玩耍"/>

1. input框赋值

 两种写法
 1. $("#test1").attr("value",'123');
 2. $("#test1").val("123")

2. 获取input框的值

1. $("#test2").val()
 去除两端空格
2. $.trim($("#test2").val())

3. 设置下拉框默认选中

两种写法
1. $("#test3  option[value='movie']").attr("selected",true)
2. 代码中直接选中
  <option value='eat' selected>吃饭</option>

4. 获取select下拉框的选中值

获取value值
1. $("#test3 option:selected").val()
获取文本值
2. $("#test3 option:selected").text()

5. select值发生改变的时候触发的函数

$("#selType").bind("change",function() { //监听select改变
    if ($(this).val()) {
        modelType = $(this).val();//获得选中的值
            }
        })

6. 清空配置

1. 清空input框中的值
  $("#test3").val("");
2. 清空select下拉框
  $("#test3").empty()

7. 写一个表格，并为其赋值

<!--html-->
    <table class="tab" id="stuTable">
        <thead>
            <tr>
                <th>学号</th>
                <th>班级</th>
                <th width="300px">姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
<!--js-->
tr ="<tr><td>"+row.id+"</td><td>"+row.className+"</td><td>"+stuName+"</td><td>"+row.age+"</td></tr>";
$("#stuTable tbody").append(tr)
<!--隐藏第一列id的值-->
$('#stuTable tr').find('td:eq(0)').hide();

8. 获取表格的值

 function getTable() {
        var length = $("#stuTable").length;
        var set = [];
        $('#stuTable tbody tr').each(function() {
            var row = {
                id: $(this).find('td:eq(0)').html(),
                className: $(this).find('td:eq(1)').html(),
                stuName:$(this).find('td:eq(2)').html(),
                age:$(this).find('td:eq(3)').html(),
            };
            set.push(row);
        });
        return set;
    }

9. 清空表格中的值

 $("#stuTable tbody").html("");

10. 删除表格中的某一行数据

$("tBody").on("click",".delBtn" , function(e){
        e.stopPropagation();
        $(e.target).parent().parent().remove()
    })

11. 获取单选框中的值

$('input:radio:checked').val();

设置第一个值为选中
 $('input:radio:first').attr('checked', true);
 或
 $('input:radio:first').prop('checked', true);

设置最后一个值为选中
 $('input:radio:last').attr('checked', true);
 或
 $('input:radio:last').prop('checked', true);
 
根据索引设置任何一个值为选中状态(索引值为0,1,2...)
$('input:radio').eq(索引).attr('checked',true)
或
$('input:radio').eq(索引).prop('checked',true)

获取单选框被选中的值
$('#radioWrap input[name="sex"]:checked').val()

根据索引来获取radio的值
$('input[name="sex"]:eq(0)').val()

设备第一个radio值不被选中
$("input:radio[name='sex']").eq(0).attr('checked',true)
或
$("input:radio[name='sex']").eq(0).prop('checked',true)

12. 取消单选框的选中状态

$('input[type="radio"]').removeAttr('checked');

13. 获取复选框的选中状态

 var arr = []
  $("input[name='sex']:checked").each(function(){
      arr.push($(this).val())
  })

14. 设置复选框全选

  $("[name='checkbox']").attr('checked','true')

15. 取消复选框全选

 $("[name='checkbox']").removeAttr('checked')