winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

appendTo()

将动态生成的元素添加到指定的目标元素中作为子元素

html：

1
<div class="target-element"></div>

jQuery：

1
$('<div class="dynamic-element">...</div>').appendTo('.target-element');
1
2
3
4
5
6
7
8
9
10
11
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$(html).appendTo('.target-element');

append()

将动态生成的元素添加到指定的父元素中

html：

1
<div class="parent-element"></div>

jQuery：

1
$('.parent-element').append('<div class="dynamic-element">...</div>');
1
2
3
4
5
6
7
8
9
10
11
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.parent-element').append(html);

on()

使用事件委托机制绑定事件处理程序，可以捕获动态生成元素的事件

使用 .on() 方法绑定事件时，应该选择一个静态的父元素，并通过选择器指定目标动态生成的元素。这样可以确保事件处理程序能够捕获到动态生成元素的事件。

对动态生成的元素进行操作，应该确保在元素已经生成并添加到 DOM 树中后再执行相应的操作，以避免操作无效。

1
$(document).on('click', '动态生成的元素的选择器', function() { ... });
1
$(父元素的选择器).on('click', '动态生成的元素的选择器', function() { ... });

html：

1
<div class="news-box"></div>

jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.news-box').append(html);

$('.news-box').on('click', 'ul li', function(e){
    console.log('点击某条新闻')
    console.log(this);				// <li>新闻11111</li>
    console.log(e.target);			// <li>新闻11111</li>
    console.log($(this).index())	// 0
});

live() 方法在旧版本的 jQuery 中用于绑定事件处理程序，包括对动态生成的元素的事件进行绑定。然而，自 jQuery 版本 1.7 起，live() 方法已被废弃，不再推荐使用。

remove()

从 DOM 中移除动态生成的元素

1
$('.dynamic-element').remove();

empty()

清空动态生成元素的内容

1
$('.dynamic-element').empty();

发表于 更新于 分类于

获取URL中的参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
** @param name{string}    // 参数名
*/
function getURLParam(name) {
    // 获取完整的查询参数字符串
    const queryString = window.location.search;

    // 创建URLSearchParams对象来解析查询参数
    const params = new URLSearchParams(queryString);

    // 使用get方法获取指定名称的参数值
    return params.get(name);
}

http://127.0.0.1:5500/URL.html?username=test&age=18

1
2
3
4
5
const username = getURLParam('username');
console.log(username); // "test"

const age = getURLParam('age');
console.log(age); // "18"

解析URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const urlString = 'https://www.test.com:8080/path/url.html?username=test&age=18';
const url = new URL(urlString);

console.log(url.protocol);  // "https:"
console.log(url.host);      // "www.test.com:8080"
console.log(url.pathname);  // "/path/url.html"
console.log(url.search);    // "?username=test&age=18"
console.log(url.hostname);  // www.test.com
console.log(url.href);      // https://www.test.com:8080/path/url.html?username=test&age=18
console.log(url.origin);    // https://www.test.com:8080
console.log(url.port);      // 8080

// 解析查询参数
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('username')); // "test"
console.log(searchParams.get('age')); // "18"

构建URL

在页面之间传参，不想手动把参数使用&符号一个一个拼起来时

  1. 使用URL构造函数构建URL

    1
    2
    3
    4
    5
    const url = new URL('https://www.test.com');
    url.pathname = '/path';
    url.searchParams.set('username', 'test');
    url.searchParams.set('age', '18');
    console.log(url.toString()); // "https://www.test.com/path?username=test&age=18"

  2. 使用字符串拼接构建URL

    1
    2
    3
    4
    5
    const baseUrl = 'https://www.test.com';
    const path = '/path';
    const params = new URLSearchParams({ username: 'test', age: '18' });
    const constructedUrl = `${baseUrl}${path}?${params.toString()}`;
    console.log(constructedUrl); // "https://www.test.com/path?username=test&age=18"

参数对应的值带=号

如果动态传参时，参数对应的值含有=号，避免浏览器自动处理等号，使用encodeURIComponent方法

发送端：

1
2
3
4
const key = "BANXB1cAPFcEAGwFZgk=";
const encodedValue = encodeURIComponent(key);
const url = `edit.html?key=${encodedValue}`;
window.location.href = url;

接收端：

1
2
3
4
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const encodedValue = urlParams.get("key");
const decodedValue = decodeURIComponent(encodedValue);

因在项目中使用$.form.href("{:url('xy/test/group')}" + "?id=" + id + '&key='+key);这样跳转到页面2。其中key的值最后可能带有=号，跳转到页面2的时候，在页面2中获取到的key参数少了最后的=号

如果大家使用window.location.href进行页面跳转时，在链接上传参，没有问题，可以忽略这个问题。

将网址url中的参数转化为JSON格式的两种方法

第一种： for 循环方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 第一种： for循环
var GetQueryJson1 = function () {
  let url = location.href; // 获取当前浏览器的URL
  let arr = []; // 存储参数的数组
  let res = {}; // 存储最终JSON结果对象
  arr = url.split('?')[1].split('&'); // 获取浏览器地址栏中的参数
   
  for (let i = 0; i < arr.length; i++) { // 遍历参数
    if (arr[i].indexOf('=') != -1){ // 如果参数中有值
      let str = arr[i].split('=');
      res[str[0]] = str[1];
    } else { // 如果参数中无值
      res[arr[i]] = '';
    }
  }
  return res;
}
console.log(GetQueryJson1());

第二种：正则表达式方式

1
2
3
4
5
6
7
8
9
10
11
12
// 第二种：正则表达式
var GetQueryJson2 = function () {
  let url = location.href; // 获取当前浏览器的URL
  let param = {}; // 存储最终JSON结果对象
  url.replace(/([^?&]+)=([^?&]+)/g, function(s, v, k) {
    param[v] = decodeURIComponent(k);//解析字符为中文
    return k + '=' +  v;
  });
  return param;
}
 
console.log(GetQueryJson2());

URL参数改为json格式

1
2
3
4
5
6
7
var data = $(formEl).serialize()                // 表单数据（筛选条件)
    ,arr = decodeURIComponent(data).split("&")  // 对数据拆分处理
    ,formData = {}                              // 需要缓存的数据对象
// 转为JSON对象
arr.map(function(item) {
    formData[item.split('=')[0]] =  item.split('=')[1];
})

修改url参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeURLArg(url,arg,arg_val){ 
    var pattern=arg+'=([^&]*)'; 
    var replaceText=arg+'='+arg_val; 
    if(url.match(pattern)){ 
        var tmp='/('+ arg+'=)([^&]*)/gi'; 
        tmp=url.replace(eval(tmp),replaceText); 
        return tmp; 
    }else{ 
        if(url.match('[\?]')){ 
            return url+'&'+replaceText; 
        }else{ 
            return url+'?'+replaceText; 
        } 
    } 
    return url+'\n'+arg+'\n'+arg_val; 
}

改变hash值

1
2
3
4
//改变hash值
function changeHash(key, val) {
    location.hash= location.hash.match(key+"=([^&]*)") ? location.hash.replace(eval('/('+ key+'=)([^&]*)/gi'), key+"="+val) : location.hash + "&"+key+"="+val
}

发表于 更新于 分类于

js中数组常用方法总结

数组增删元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 数组添加或删除元素
function filterArr(arr, item) {
    var _index;  //是否含有该选项
    var html = "";
    _index = arr.indexOf(item);
    if(_index > -1) {
        arr.splice(_index, 1);
    } else {
        arr.push(item);
    }

    // 数组转字符串
    html = arr.join(',');

    return html;
}

forEach()

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr = [1, 2, 3, 4, 5];

arr.forEach(function (item) {
    if (item === 3) {
        return;		// ---->3的元素跳过
    }
    console.log(item);
});
// 输出结果：
1
2
4
5

判断某变量的值是否等于某数组中的一个元素

1
2
3
4
5
6
7
8
9
10
示例：

function IsInArray(arr,val){
var testStr=','+arr.join(",")+",";
return testStr.indexOf(","+val+",")!=-1;
}
var test=['a',23,-1];
alert(IsInArray(test,'a'));//true
alert(IsInArray(test,2));//false
alert(IsInArray(test,-1));//true

需求：

在后台的某些模块中，不显示表头的游戏下拉筛选框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 当前页URL
var page = window.location.hash.split("?")[0];
// 当前模块值
var this_module = page.split("/")[2];
（判断连接中是否是这几个模块下的链接）
// 需要去掉游戏选择下拉框的模块
var moduleArr = ["app","channel","agent","config","white_list","account"];

// 判断模块值是否等于数组中的其中一个
function IsInArray(arr,val){
    var str=','+arr.join(",")+",";
    return str.indexOf(","+val+",")!=-1;
}
//是否在模块组中
var flag = IsInArray(moduleArr, this_module);
if(flag){
    $(".product-select").hide();
} else {
    $(".product-select").show();
}
【参考】： js:判断某变量的值是否等于某数组中的一个元素

js高效修改对象数组里的对象属性名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
appList: [
    {
        list:[
            {id: 118, name: "测试1", group_id: 4, os: 2}
            {id: 120, name: "测试11", group_id: 4, os: 2}
            {id: 123, name: "测试111", group_id: 4, os: 1}
        ]
        name: "测试1111"
    },
    {
        list:[
            {id: 118, name: "测试2", group_id: 4, os: 2}
            {id: 120, name: "测试22", group_id: 4, os: 2}
            {id: 123, name: "测试222", group_id: 4, os: 1}
        ]
        name: "测试2222"
    },
]

（因为插件的要求）改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
productArr: [
    {
        children:[
            {value: 118, name: "测试1", group_value: 4, os: 2}
            {value: 120, name: "测试11", group_value: 4, os: 2}
            {value: 123, name: "测试111", group_value: 4, os: 1}
        ]
        name: "测试1111"
    },
    {
        children:[
            {value: 118, name: "测试2", group_value: 4, os: 2}
            {value: 120, name: "测试22", group_value: 4, os: 2}
            {value: 123, name: "测试222", group_value: 4, os: 1}
        ]
        name: "测试2222"
    },
]

代码：

1
2
var productArr = JSON.parse(JSON.stringify(appList).replace(/list/g, 'children'));
productArr = JSON.parse(JSON.stringify(productArr).replace(/id/g, 'value'));
【参考】： js高效修改对象数组里的对象属性名

用js实现模糊查询的几种方法

1. indexof 方法

语法：stringObject.indexOf(searchvalue, fromindex)

参数：searchvalue 必需。规定需检索的字符串值。 fromindex
可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明：该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。如果没有找到，将返回 -1。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 使用indexof方法实现模糊查询
 * @param  {Array}  list     进行查询的数组
 * @param  {String} keyWord  查询的关键词
 * @return {Array}           查询的结果
 */
function fuzzyQuery(list, keyWord) {
  var arr = [];
  for (var i = 0; i < list.length; i++) {
    if (list[i].indexOf(keyWord) >= 0) {
      arr.push(list[i]);
    }
  }
  return arr;
}
2. split 方法

语法：stringObject.split(separator, howmany)

参数：separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

说明：该方法通过在 separator 指定的边界处将字符串 stringObject 分割成子串并返回子串数组。返回的数组中的字串不包括 separator 自身。如果 stringObject 中不存在 separator，将返回一个只包含stringObject的数组。故可以根据返回数组的长度来判断是否存在子字符串 separator 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 使用spilt方法实现模糊查询
 * @param  {Array}  list     进行查询的数组
 * @param  {String} keyWord  查询的关键词
 * @return {Array}           查询的结果
 */
function fuzzyQuery(list, keyWord) {
  var arr = [];
  for (var i = 0; i < list.length; i++) {
    if (list[i].split(keyWord).length > 1) {
      arr.push(list[i]);
    }
  }
  return arr;
}
3. match 方法

语法：stringObject.match(searchvalue) 或 stringObject.match(regexp)

参数：searchvalue 必需。规定要检索的字符串值。regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

说明：该方法将在字符串 stringObject 内检索指定的值，或找到一个或多个正则表达式的匹配。如果没有找到任何匹配的文本，将返回 null 。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 使用match方法实现模糊查询
 * @param  {Array}  list     进行查询的数组
 * @param  {String} keyWord  查询的关键词
 * @return {Array}           查询的结果
 */
function fuzzyQuery(list, keyWord) {
  var arr = [];
  for (var i = 0; i < list.length; i++) {
    if (list[i].match(keyWord) != null) {
      arr.push(list[i]);
    }
  }
  return arr;
}
4. test方法（正则匹配）

语法：RegExpObject.test(string)

参数：string 必需。要检测的字符串。

说明：该方法用于检测一个字符串是否匹配某个模式。如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
   * 使用test方法实现模糊查询
   * @param  {Array}  list     原数组
   * @param  {String} keyWord  查询的关键词
   * @return {Array}           查询的结果
   */
  function fuzzyQuery(list, keyWord) {
    var reg =  new RegExp(keyWord);
    var arr = [];
    for (var i = 0; i < list.length; i++) {
      if (reg.test(list[i])) {
        arr.push(list[i]);
      }
    }
    return arr;
  }

性能测试

测试条件：一个长度为100的数组，每个方法测试50次，取平均值。
indexof 方法耗费时间： 0.048ms
split 方法耗费时间： 0.037ms
match 方法耗费时间： 0.178ms
test 方法耗费时间： 0.039ms

结论

  1. 从上面测试结果可以看出在几百几千甚至几万条数据量的情况下，前端去处理都是没问题的，相比发送一个 ajax 请求去后台来说，前端还是具有很大优势的，能节省不少时间。
  2. 相比其他方法，match 方法性能最差，消耗的时间差不多是其他方法的3-4倍，虽说这一点点时间相比发送ajax来说，也算提高了很多既然我们在一开始就是为了提高用户体验，那么我们也应该追求极致啦，所以 match 选手落败。
  3. 除了 match 方法，其他三个方法在性能上差不多。不过在这里有一点需要提出的就是， test 方法因为使用到了正则表达式，所以能够实现的功能会比较强大，写出来的代码也更加简洁。打个比方，在不区分大小写的模糊搜索条件下， test 方法只需在正则表达式中添加修饰符 i 即可实现不区分大小写，而 indexof 方法和 split 方法则要通过多次的方法调用和逻辑运算符才能实现效果。