2019年9月9日 星期一

jQuery 常用紀錄

選取所有的輸入欄位、文字輸入區塊、下拉是選單...
$(':input') 
Focus 焦點進入欄位,則會觸發
$('#e').focus(function(){
 var field = $(this);
 if (field.var() == field.attr('defaultValue')){
  field.var('');
 }
});
Blur 焦點離開欄位,則會觸發
$('#e').blur(function(){
 var fieldValue = $(this).val();
 if (isNaN(fieldValue)){
  alert('請輸入數字')
 }
});

on 繫結事件 .on('事件名稱',function(傳入參數){})
$('#e').on('click', function(){
 //Code
});
//事件名稱
//blur 欄位焦點離開觸發
//change 欄位的value,有變更則會觸發

//三者事件的觸發優先順序為:keydown→keypress→keyup
//keydown:按下
//keypress:接著keydown事件觸發
//keyup:釋放


$('#e :text:first'); 取得#e 所有text的第一個

attr 設置欄位
$(':input').attr('disabled',false); //設置所有input的屬性 disabled = false
prop 設置欄位
$('.checkbox-1').prop('checked'); //true

css 設置css屬性
$(':input').css('color','#BBB'); 

$('#e').hide();   hide 隱藏欄位
$('#e').show();   show 顯示欄位
$('#e').find();   find 找元素,產生集合可用each()
$('#e').not("p");  not  排除元素("選擇器") 

$('#e').val();   取值
$('#e').val('給值'); 設值

#('#e').addClass('CSS名稱'); 加入至#e 元素的class屬性裡
#('#e').addClass('CSS名稱'); 移除至#e 元素的class屬性裡
 
$('#Content_gvData > tbody > tr').not(':first').each(function(){
  console.log($(this).closest('tr'));
})

//全頁遮罩 http://jsgears.com/thread-72-1-1.html
$.blockUI()  //開啟
$.unblockUI() //關閉


$('#e').appendTo() 與 $('#e').append() 差異 //https://dotblogs.com.tw/brooke/2015/01/26/148276

//JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]
//   https://wcc723.github.io/javascript/2017/06/29/es6-native-array/ 

$.ajax({
 type:'get',     //HTTP 請求方法
 url:'xxx.aspx/GetData',    //URL
 contentType: "application/json; charset=utf-8", //傳輸的資料型態
 dataType: "JSON",    //收到回應的資料型態
 data: "{ name:'1234'}",    //傳輸資料
 success: function (response, textStatus, xhr){
  //成功之後確定
 },
 error: error
 
});

沒有留言:

張貼留言