您的位置:首页 > Web前端 > JavaScript

js 常用方法总结

2016-10-21 17:08 218 查看
操作select

<select class="selector"></select>

//设置value为value的项选中
$(".selector").val("value");

//设置text为text的项选中
$(".selector").find("option[text='text']").attr("selected",true);

//获取当前选中项的value
$(".selector").val();

//获取当前选中项的text
$(".selector").find("option:selected").text();

//select的值随着第一个select选中的值变化
$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("").val(1).text("pxx");
$(".selector2").append(option);
});


select下拉框选中

<select name="status" data='{$vo.status}'>
<option value="0">待审核</option>
<option value="1">通过</option>
<option value="2">审核失败</option>
</select>


$("select").each(function(){
var d = $(this).attr("data");
$(this).find("option").each(function(){
if($(this).val() == d)
{
$(this).attr("selected",true);
}
});
});


json解析

var aToStr=JSON.stringify(a); //string
var bToObj=JSON.parse(b); //object


上传头像 预览

//选择封面图片
function preview(file){
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" class="user_tx_img" />';
}
reader.readAsDataURL(file.files[0]);
}else{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}


<a href="#" class="fl" id="preview">
<img src="当前头像路径" class="user_tx_img" />
<img src="templets/new_images/edit_icon.png" class="user_edit_img" /> //点击图标
</a>
<input type="file" name="face" class="user_tx_upload" onchange="preview(this)"/>
//input:file 覆盖当前头像大小  设置宽高
.user_tx_upload  {
position: absolute;
top: 20px;
left: 50px;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
border: solid 1px #ddd;
opacity: 0;
border:#ddd 1px solid;
filter:alpha(opacity=0);
}


格式为:2010-10-20 10:00:00

function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
alert(getLocalTime(1177824835));


格式为:2010年12月23日;10:00:00

function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,16);
}
alert(getLocalTime(1293072805));


js 不刷新页面  (待确认)

<a href="javascript :;" onClick="javascript :history.back(-1);">返回上一页</a>


获取 url 中的参数

function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}


点击 radio 文本"男"或"女"的时候也能选中 radio

<input type="radio" id="male" name="sex" value="1" />  <label for="male">男</label>
<input type="radio" id="female" name="sex" value="2" />  <label for="female">女</label>


例:

$("input[name='sex']:checked").next("label").text();


时间验证

function checkTime(date){
var result = date.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);
if(result==null)
{
alert("请输入正确的日期格式");
return false;
}
}


转换时间戳

var date = new Date(时间);
var timestamp = date.getTime();
timestamp = Math.floor(timestamp / 1000);

or:

timestamp = Date.parse(new Date(时间)) / 1000;
时间戳

时间比较

start_time = Date.parse(new Date(start_time)) / 1000; //开始时间戳
end_time   = Date.parse(new Date(end_time)) / 1000; //结束时间戳
if(end_time < start_time){
alert('结束时间必须大于开始时间!');
return;
}


类似form, 拼接url传参跳转 可回车

<a id="search" class="btn btn-default" href="javascript:;" url="{:U()}">
<i class="icon-search"></i>
</a>


//搜索功能
$("#search").click(function () {
var url = $(this).attr('url');
var query = $('.search-form').find('input,select').serialize();
query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
query = query.replace(/^&/g, '');

if (url.indexOf('?') > 0) {
url += '&' + query;
} else {
url += '?' + query;
}
window.location.href = url;
});
//回车搜索
$(".search-input").keyup(function (e) {
if (e.keyCode === 13) {
$("#search").click();
return false;
}
});


替换换行空格

function rectifyString(testStr){
var resultStr = testStr.replace(/<\/?.+?>/g,"");
resultStr = testStr.replace(/(^\s*)|(\s*$)/g, "");
return resultStr;
}


截取 str  固定length (不足用0填)

function cutFix(str, length) {
return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : (new Array()+num).slice(('' + num).length-length);
}


生成随机码 字母加数字 可选length

function createCode(len){
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
var maxPos = $chars.length;
var code = '';
for (i = 0; i < len; i++) {
code += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return code;
}


获取select选中value

var selected_val = document.getElementById(select_id).value;
or
$("select[selected='selected']").val() ;
$("select option:selected").val() ;


显示当前时间

window.onload=function (){
setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
}

html:

<div class="fRight mR10" id="time">  </div>


验证手机号码

//验证手机号
var vailPhone = function(phone){
var message = '';
var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0,5]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(phone == ''){
message = '手机号码不能为空!';
}else if(phone.length !=11){
message = '请输入有效的手机号码!';
}else if(!myreg.test(phone)){
message = '请输入有效的手机号码!';
}
return message;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: