jquery javascript 常用代码备忘

本文介绍了如何在网页上实现动态交互,包括设置特定状态下的单选按钮选择、日期选择器配置、手机号验证接口调用及表格操作。通过实例演示了jQuery在前端开发中的应用,涉及日期控件、手机号验证、表格元素交互等核心功能。
摘要由CSDN通过智能技术生成
1.假如页面上有一组radio,初始化页面时,想让指定的radio选中
代码如下:
$("input:radio[name='status']").each(function() { 			var v = $(this).val();			if (v== '1') {				$(this).attr("checked", "checked");			}		}); 


说明:用jquery遍历所有的radio控件,并且radio的name属性是status,如果radio的value='1' ,则让radio选中。如果控件是checkbox,则把radio改为checkbox。

2.jquery日期控件datepick的使用
在页面中引入以下三个文件:jquery.datepick.css ,jquery.datepick.js,jquery.datepick-zh-cn.js

假如把日期控件绑定到id为selectdate的控件上,在加载完页面后,写如下js:
//初始化日期控件	$('#selectdate').datepick({		yearrange: '2008:2099', 		dateformat: 'yy-mm-dd',		prevtext:'前一月',		nexttext:'后一月',		closetext:'关闭',		cleartext:'清除',		monthnames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']});


3.判读手机号码是否是移动的手机号码,调用http://www.showji.com/ 这个网站的一个接口,该接口返回json数据,接口地址为
http://api.showji.com/locating/default.aspx?m=15084975782&output=json&callback=querycallback


只要把需要查询的手机号码替换上面得手机号码即可,返回如下格式的数据:
querycallback({    "mobile": "15084975782",    "queryresult": "true",    "province": "湖南",    "city": "长沙",    "areacode": "0731",    "postcode": "410000",    "corp": "中国移动",    "card": "gsm"});


3.点击表格中的行,让该行中第一列的checkbox选中。
假设checkbox所在tr的class属性值为trbox,checkbox本身的class属性为boxclass

代码如下:
$(".trbox").click(function(){		var obj = $(this);		var box = obj.find("input:type='checkbox'");		if (box.attr('checked')) {			box.attr('checked',false);		} else {			box.attr('checked',true);		}	});		$(".boxclass").click(function(event){         event.stoppropagation();     }); 


后面的event.stoppropagation()为当点击checkbox本身时,禁止checkbox的单击事件传给tr 。

4.点击table中的td时,让td变为input输入框,可以编辑。
var mod = $(".mod");mod.click(function(){var obj = $(this);var td = obj.parent().parent().children(".inputclass");tdvalue = $.trim(td.text());var input = $("<input type='text' style='color:#148cdf;' value='" + tdvalue + "' />"); // 文本框的html代码td.html(input);   // 当前td的内容变为文本框input.click(function() {	return false;});// 设置文本框的样式input.height(td.height()-10);   //文本框的高度为当前td单元格的高度input.css("margin-left","-3px");input.width("100px");    // 宽度为当前td单元格的宽度input.css("font-size", "12px");    // 文本框的内容文字大小为14pxinput.css("text-align", "center");   // 文本居中});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值