js / jq 常用整理

排序sort

sort() 方法用於對數組的元素進行排序。
語法： arrayObject.sort(sortby)
sortby 可選。規定排序順序。必須是函數。

sort方法根據數組中對象的某一個屬性值進行排序：

function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}

var arr = [
    {name:'Danny',age:10},
    {name:'Bob',age:18},
    {name:'Alice',age:8}
];
arr.sort(compare('age'));

最後結果是
{name:‘Alice’,age:8}
{name:‘Danny’,age:10}
{name:‘Bob’,age:18}

獲取tr的索引

一般用$(this).index()
但如果兩個tr之間穿插了script標籤，獲取其他的東西，會導致index獲取不正確
可以用

/**
 * [get_tr_index 獲取tr所在的索引]
 * @param  {[type]} obj [tr對象]
 * @return {[type]}     [description]
 */
function get_tr_index(obj){
	return $(this).index('tr');
}

該方法是獲取當前tr在所有tr中的索引，包括其他table下的，僅獲取當前table或者當前tbody下的tr可用下面的形式：

/**
 * [get_tr_index 獲取tr所在的索引]
 * @param  {[type]} obj [tr對象]
 * @return {[type]}     [description]
 */
function get_tr_index(obj){
	return $(obj).parents('tbody').find('tr').index($(obj));
}

獲取元素相對父元素的位置（偏移）-position()

該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。

此方法只對可見元素有效。

$(selector).position()

獲取元素相對文檔的位置（偏移）-offset()

該方法返回或設置匹配元素相對於文檔的偏移（位置）。

該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。

$(selector).offset()

單選按鈕的checked操作

• 問題： 使用removeAttr(‘checked’)無效
  removeAttr(‘checked’)可以去掉jquery添加的checked，無法去掉點擊加的
• 解決： 換prop

$(':radio').prop('checked', false);
$(':radio').eq(0).prop('checked', true);

const、let、var區別

聲明方式	變量提升	作用域	初始值	重複利用
const	否	塊級	需要	否
let	否	塊級	不需要	否
var	是	函數	不需要	是

監控input內容變化

$('#id').on('input propertychange',function(){ 

 })

獲取英文字符串長度

String.prototype.getBytesLength = function() {
  var totalLength = 0;
  var charCode;
  for (var i = 0; i < this.length; i++) {
      charCode = this.charCodeAt(i);
      if (charCode < 0x007f)  {
          totalLength++;
      } else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {
          totalLength += 2;
      } else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {
          totalLength += 2;
      } else{
          totalLength += 2;
      }
  }
  return totalLength;
}

截取指定長度的字符串（英文長度）

String.prototype.getBytesByLength = function(_len) {
  var totalLength = 0;
  var charCode;
  for (var i = 0; i < this.length; i++) {
      charCode = this.charCodeAt(i);
      if (charCode < 0x007f)  {
          totalLength++;
      } else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {
          totalLength += 2;
      } else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {
          totalLength += 2;
      } else{
          totalLength += 2;
      }
      if (totalLength > _len) {
        return this.substring(0, i);
      } else if (totalLength == _len) {
        return this.substring(0, (i+1));
      }
  }
  return this.substring(0, _len);
}

輸入框只能輸入數字

 oninput="value=value.replace(/[^\d]/g,'')"

Element.scrollIntoView()

讓當前的元素滾動到瀏覽器窗口的可視區域內。

對象深拷貝和淺拷貝

淺拷貝：
只是想備份數組，但是隻是簡單讓它賦給一個變量，改變其中一個，另外一個就緊跟着改變

var arr1 = [1, 2, 3, '4'];
var arr2 = arr1;
arr2[1] = "test"; 
console.log(arr1); // [1, "test", 3, "4"]
console.log(arr2); // [1, "test", 3, "4"]

深拷貝：
定義一個新的對象，遍歷源對象的屬性 並 賦給新對象的屬性。改變其中一個，另外一個不會跟着改變

var obj1 = {
   name:'小陳',
   age: 23
}
var obj2 = $.extend(true, {}, obj1);
obj1.age = 24;
console.log(obj1); //Object {name: "小陳", age: 24}
console.log(obj2); //Object {name: "小陳", age: 23}

js觸發a標籤的href鏈接

• 說明：
  $(‘xxx’).click()只能觸發綁定的onClick方法，不能跳轉到href
• 解決辦法：
  $(‘xxx’)[0].click()
  因爲a標籤的href屬性是在他dom中的0裏面，需要點擊那個0才能實現，而數字型的屬性名不能用“.”來獲取，故寫成[0]。