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="玩耍"/>
- input框赋值
两种写法
1. $("#test1").attr("value",'123');
2. $("#test1").val("123")
- 获取input框的值
1. $("#test2").val()
去除两端空格
2. $.trim($("#test2").val())
- 设置下拉框默认选中
两种写法
1. $("#test3 option[value='movie']").attr("selected",true)
2. 代码中直接选中
<option value='eat' selected>吃饭</option>
- 获取select下拉框的选中值
获取value值
1. $("#test3 option:selected").val()
获取文本值
2. $("#test3 option:selected").text()
- select值发生改变的时候触发的函数
$("#selType").bind("change",function() { //监听select改变
if ($(this).val()) {
modelType = $(this).val();//获得选中的值
}
})
- 清空配置
1. 清空input框中的值
$("#test3").val("");
2. 清空select下拉框
$("#test3").empty()
- 写一个表格，并为其赋值
<!--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();
- 获取表格的值
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;
}
- 清空表格中的值
$("#stuTable tbody").html("");
- 删除表格中的某一行数据
$("tBody").on("click",".delBtn" , function(e){
e.stopPropagation();
$(e.target).parent().parent().remove()
})
- 获取单选框中的值
$('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)
- 取消单选框的选中状态
$('input[type="radio"]').removeAttr('checked');
- 获取复选框的选中状态
var arr = []
$("input[name='sex']:checked").each(function(){
arr.push($(this).val())
})
- 设置复选框全选
$("[name='checkbox']").attr('checked','true')
- 取消复选框全选
$("[name='checkbox']").removeAttr('checked')
