JavaScript小技巧整理_javascript技巧-js教程-PHP中文網

JavaScript小技巧整理_javascript技巧

WBOY

發布： 2016-05-16 15:22:34

原創

1234 人瀏覽過

本文整理總結了JavaScript的小技巧。分享給大家參考，具體如下：

1.組織預設事件

阻止預設事件，h5預設的input type='date'在某些瀏覽器和android裝置上沒有效果，這時要呼叫h5+的時間選擇器，但是要組織input預設的click事件，程式碼如下：

//选择时间
$("#end_time").on("click",function(event){
  event.preventDefault();
  plus.nativeUI.pickDate( function(e){
   var d = e.date;
//   console.log(d.Format('yyyy-MM-dd'));
   $("#end_time").val(d.Format('yyyy-MM-dd'));
  },function(e){
   console.log( "未选择日期："+e.message );
  },{title:"请选择到期时间",minDate:new Date()}); 
});

登入後複製

2.判斷input type='checkbox' 是否被選中，程式碼如下

if (!$("#shopregister #checkaggree").is(":checked")) {
  alert("请同意注册协议");
  return false;
}

登入後複製

3.取得多個checkbox中被選取的那個的值，程式碼如下

<input name='is_refund' id='refund_1' type='radio' value='1' />
<input name='is_refund' id='refund_0' checked='checked' type='radio' value='0' />
$("#shopregister input[name='is_refund']:checked").val();

登入後複製

4.設定checkbox選取

複製程式碼程式碼如下:

$("[name='checkbox']:even").attr(" checked",'true'); //如果這貨不管用prop

5.取得多張圖片中title屬性的值

user.id_pic1 = $($("#shopregister .id_pic")[0]).attr("title");
user.id_pic2 = $($("#shopregister .id_pic")[1]).attr("title");
user.id_pic3 = $($("#shopregister .id_pic")[2]).attr("title");

登入後複製

6.ajax提交過程中顯示進度圖片

$.ajax({
  type: 'POST',
  url: configManager.RequstUrl + "/api/user/createstore",
  data: postdata,
  beforeSend:function(){ $("#waitingupload").removeClass("heisebghid").addClass("heisebg");}
}).done(function (data) {
  $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
  if ("success" == data.state) {
   //服务端成功
  }
  else {
   //服务端失败
  }
}).fail(function () {
  //ajax请求失败
});

登入後複製

希望本文所述對大家JavaScript程式設計有所幫助。