欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery javascript 常用代码备忘

程序员文章站 2022-03-06 09:06:26
...
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");    // 文本框的内容文字大小为14px
input.css("text-align", "center");   // 文本居中

});