Tag Archives: 原生JS

十二 10

原生JS实现JQuery中的hasClass()、addClass()、removeClass()方法

Posted on by

原生JS实现JQuery中的hasClass()、addClass()、removeClass()方法

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function hasClass(ele, cls) {
cls = cls || '';
if (cls.replace(/\s/g, '').length === 0) return false; // 当cls没有参数时，返回false
return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) {
ele.className = ele.className === '' ? cls : ele.className + ' ' + cls;
}
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
ele.className = newClass.replace(/^\s+|\s+$/g, '');
}
}

js复制到剪贴板

 

一 15

原生JS复制文本到手机剪切板

Posted on by

复制文本到剪切板，兼容PC与WAP,复制文本到手机剪切板,兼容电脑与手机移动设备

方法一：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button type="button" id="copyText">点我复制</button>
<script>
// 复制到剪切板
function copy(str){
var save = function (e){
e.clipboardData.setData('text/plain',str);//clipboardData对象
e.preventDefault();//阻止默认行为
};
document.addEventListener('copy',save);
return document.execCommand("copy");//使文档处于可编辑状态，否则无效
}
document.getElementById('copyText').addEventListener('click',function(ev){
copy(ev.target.innerText) // 复制的内容为“点我复制”
});
</script>

方法二：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button type="button" id="copyText">点我复制</button>
<script>
// 复制到剪切板
function copy(str){
var save = function (e){
e.clipboardData.setData('text/plain',str);//clipboardData对象
e.preventDefault();//阻止默认行为
};
document.addEventListener('copy',save);
return document.execCommand("copy");//使文档处于可编辑状态，否则无效
}
document.getElementById('copyText').addEventListener('click',function(ev){
copy('想复制什么就复制什么') // 复制的内容为“想复制什么就复制什么”
});
</script>

 

十二 04

原生js封装ajax：传json，str，excel文件上传表单提交

Posted on by

封装ajax,ajax封装,原生js

由于项目中需要在提交ajax前设置header信息，jquery的ajax实现不了，我们自己封装几个常用的ajax方法。

jQuery的ajax普通封装

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ajaxFn = function(uri, data, cb) {
  $.ajax({
      url: uri,
      type: 'POST',
      dataType: 'json',
      data: data,
    })
    .done(cb)
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });
}

原生ajax封装，设置header，传json Continue reading →

一 26

原生JS获取body宽度高度（含padding+border）

Posted on by

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
*document.documentElement.clientWidth或者document.body.clientWidth
*来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
*使用方法 ： getViewPort().width;
*/
function getViewPort () {
    if(document.compatMode == "BackCompat") {   //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}
// 使用 包含padding border
getViewPort().width; // 获取宽度
getViewPort().height; // 获取高度