清爽盒子搜索 QSbox.cn

一个专注清爽体验的网站工具，清爽博客i.qsbox.cn

按月归档： 4 月 2023

所有内容

js创建节点、添加节点，jq追加元素最前面_jQuery添加插入元素–before、after、append、prepend，jquery — 在元素之前/之后插入某个元素

前言

最近这个项目，由于某些原因，用的js框架是年迈的jQuery。项目中免不了需要添加DOM的操作，自己也老是搞混JQ添加DOM的方法，虽然简单，但是偶尔还是要去看文档用法，觉得文字记忆有点不模糊，于是觉得结合图片来总结一下。

jQuery添加元素的方法

1.before() – 在被选元素之前插入内容

2.after() – 在被选元素之后插入内容

3.prepend() – 在被选元素的开头插入内容

4.append() – 在被选元素的结尾插入内容

添加元素方法图示

demo

JQ插入元素
.container {

width: 60%;

margin: 0 auto;

}

#content {

background: #f2f2f2;

padding: 20px;

text-align: center;

}

.btn-group {

margin-top: 20px;

}

p {

color: #f00;

font-weight: bold;

}

JQ插入元素—before、after、append、prepend
我是内容一
在content前面插入元素(外部)

在content后面插入元素(外部)

在text前面插入元素(内部)

在text后面插入元素(内容)

var $container = $(‘#content’);

var $test1 = $(‘.text’);

var btns = $(‘button’);

var $h2 = $(‘h2’);

var $ele1 = $(‘

我是插入的内容1

‘)
var $ele2 = $(‘

我是插入的内容2

‘)
var $ele3 = $(‘

我是插入的内容3

‘)
var $ele4 = $(‘

我是插入的内容4

‘)
btns.on(‘click’, function () {

var index = $(this).index(); //获取点击元素的索引

switch (index) {

case 0:

// 在content前面插入元素(外部)

$container.before($ele1)

break;

case 1:

// 在content后面插入元素(外部)

$container.after($ele2)

break;

case 2:

// 在text前面插入元素(内部)

$container.prepend($ele3); //父元素添加子元素

// $ele3.prependTo($container) //子元素加入到父元素中

break;

case 3:

// 在text后面插入元素(内容)

$container.append($ele4)

// $ele3.appendTo($container) //子元素加入到父元素中

break;

}

})

Web / 软件开发

js 正则表达式：*号，最多出现一次。JavaScript正则表达式匹配：不包含某字符或字符串

不包含某字符串（如“hit”）需要特殊处理，不然他会把字母都拆开，去分别判断“h”、“i”、“t”，

/^.hit.$/

/^((?!hit).)*$/

应用：比如想把history模式的路由改为哈希模式，在/hit/后面加#，

就可以这样来替换x=x.replace(/\/hit\//gi, “/hit/#”);

export const wildcardEmailRule = {
pattern: /^[A-z0-9]*\*?[A-z0-9]*$/,
message: “wwwwwwwwwwwwwww”,
trigger: “blur”,
};

Web / 软件开发

js中的分割截取方法， jQuery join 与 split的区别 以及 map用法

在我们平时写项目以及做算法题时，经常会遇到截取字符串，截取数组，然后我发现每次用的方法都不一样，但是又长得很像，很容易搞不清楚，所以这篇博客就浅浅地来说一说这个问题。

我们常用的分割方法主要有split、splice、slice、substr、substring。下面就通过一些案例和介绍来区分一下吧！

1、split()

通过参数将字符串截取并转为一个新数组（下面的例子意思就是如果字符串中出现‘-’，就会分割，将其加入新数组中），eg:

let str=’a-bc-def’;
let str_split=str.split(‘-‘);//[a,bc,def]
2、splice()

删除、添加原数组；会改变原数组，参数一：开始操作的元素的位置下标，参数二：要删除的元素个数；参数三：在下标为参数一的位置添加的内容；返回值为删除各项所组成的新数组，无删除时则返回空数组。eg:

let str=[‘a’,’bc’,’def’];
let str_splice=str.splice(1,0,’bb’);
console.log(str);//[‘a’,’bb’,’bc’,’def’];
console.log(str_splice)//[]
3、slice()

数组、字符均可使用；参数一：开始截取的下标；参数二：截取的截至位置但不包含该下标；返回截取的新数组

var str=[‘a’,’bc’,’def’,’gh’];
var str_slice=str.slice(1,3);//[‘bc’,’def’]
4、substr()

字符串使用，用于截取指定长度字符串；参数一：开始截取的下标位置；参数二：要截取的字符串长度；返回截取的新字符串

var str=’ab-cd-ef’;
str_substr=str.substr(1,4)//b-cd
5、substring()

var str=’ab-cd-ef’;
var str_substring=str.substring(1-4);//b-c
字符串的使用；参数一：开始截取的位置；参数二：结束截取的下标，但不包含该下标字符；返回截取的新字符；（第二个参数应该大于第一个参数，如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置）