JQuery 常用选择器

来源:互联网 发布:数据误差包括哪些种类 编辑:程序博客网 时间:2024/06/15 13:53
常用元素选择器:$("#myId")选择元素id为myId的元素$(".myClass")选择元素class为myClass的元素$('.modal-content[name="myName"]')选择class为modal-content中 name为myName元素$('.modal-content #myId')选择class为modal-content中 id为myId的元素层叠选择器:$(".modal-content .modal-body")选择class为modal-content中 class为modal-body元素$(".modal-body", ".modal-content")选择class为modal-content中 class为modal-body元素,注意与上一个格式的区别表格中的选择器:$("td:eq(3)")选择表格每行中的第4列,表格中的列从0开始select选择器:$("select option:selected").val()选择select选中的值,.text()为选中的文本


HTML:<div class="modal-content"><div class="modal-body"><form class="form-horizontal"><div class="form-input"><div class="row"><div class="col-md-6"><div class="form-group"><label class="col-md-4 control-label">姓名<span class="required">*</span></label><div class="col-md-5"><div class="input-icon right"><i class="fa" data-placement="left"></i><input type="text"  class="form-control"  id="name" name="name"></div></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-md-4 control-label">电话<span class="required">*</span></label><div class="col-md-5"><div class="input-icon right"><i class="fa" data-placement="left"></i><input type="text"  class="form-control"  id="tel" name="tel"></div></div></div></div></div></div>  //end form-input<div class="form-selects"><div class="row"><div class="col-md-2"><div class="form-group"><div class="col-md-9"><select class="form-control" tabindex="1"id="habby" name="habby"><option>选择</option></select></div><label class="col-md-3 control-label">爱好</label></div></div></div></div>  //end form-selects</form></div>  //end modal-body</div>

JS:var param = {};var viewBody = $('.modal-content .modal-body .form-horizontal');//遍历获取input的输入值$(".form-control",$('.form-input',viewBody)).each(function(){param[$(this).attr("name")] = $(this).val();});//遍历获取select的选中值$('.form-control',$('.form-selects',viewBody)).each(function(){param[$(this).attr("name")] = $(this).find("option:selected").text();});



原创粉丝点击