jquery 常见功能效果 回车提交表单 checkbox 级联

 

1   通常网页上一个文本框中按回车,直接提交form表单  其实是触发了,提交按钮的focus ,同时触发单击事件

 

 <input type="text" value=" 文本框" id="btn"  />
 <input type="button" value="弹出框" id="btn2"  />


<script language="javascript" src="/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
	 //回车提交 
	
		$('#btn').keydown(function(e){
			if(e.keyCode==13){
				$('#btn2').focus();
			}
		});
	 
	 	$('#btn2').click(function(){
	 		alert('触发按钮单击事件');
	 	});
	 	$('#btn2').focus(function(){
	 		$('#btn2').val('触发按钮focus事件')
	 	});
 </script>

  

2  在输入框输入数据的时候 ,给用户焦点提示

   

.labelfocus{
	color: #222;
	font-weight: bold;
	text-shadow: 0px 0px 5px #222;
}

<form id="form" action="">
<label for="search">Search: </label><input type="text" name="search" id="search" value="" />
<input type="submit" value="search" id="gbsearch" />
</form>

$(function(){
	$("#form :input").focus(function() {
		$("label[for='" + this.id + "']").addClass("labelfocus");
	}).blur(function() {
		$("label").removeClass("labelfocus");
	});
});

  

 3 select级联操作

 

$(function(){
  $("#selectProvince").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
	var options = '';
	for (var i = 0; i < j.length; i++) {
		options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
	}
	$("#selectCity").html(options);
    })
  })
})
 

 

 

 

 4 checkbox 操作       $(obj).attr("checked")    jquery-1.9.1版本不支持$(obj).attr("checked")    1.4版本支持

<input type="checkbox" name="all" id="all" οnclick="selectAll(this)"/>


<input type="checkbox" name="uids" value="2"/>
<input type="checkbox" name="uids" value="3"/>
<input type="checkbox" name="uids" value="4"/>
 
	//全选 

	function selectAll(  obj  ){
		if($(obj).attr("checked")){
			$("input[name='uids']").attr("checked","true");
		}else{
			$("input[name='uids']").removeAttr("checked");;
		}
	}


获得所欲选中的checkbox对象
 $('input[name="checkBoxNames"]:checked')

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值