jquery javascript 常用代码备忘
程序员文章站
2022-03-06 09:06:26
...
1.假如页面上有一组radio,初始化页面时,想让指定的radio选中
代码如下:
说明:用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:
3.判读手机号码是否是移动的手机号码,调用http://www.showji.com/ 这个网站的一个接口,该接口返回json数据,接口地址为
只要把需要查询的手机号码替换上面得手机号码即可,返回如下格式的数据:
3.点击表格中的行,让该行中第一列的checkbox选中。
假设checkbox所在tr的class属性值为trbox,checkbox本身的class属性为boxClass
代码如下:
后面的event.stopPropagation()为当点击checkbox本身时,禁止checkbox的单击事件传给tr 。
4.点击table中的td时,让td变为input输入框,可以编辑。
代码如下:
$("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"); // 文本居中 });
上一篇: Pogo浏览器
下一篇: golang线程安全的map实现