Js/JQuery常用

数组排序内置函数

// 系统内置排序函数，.sort()
// 排序帖子 https://blog.csdn.net/qq_34595425/article/details/122851284

// key如果有数字以外的其它内容则不能输出正常排序结果
Object.keys();

// .sort()排序
Object.keys().sort;

寻找成对符号之间的内容

/**
 * 寻找成对符号之间的内容
 * @param str 内容
 * @param key 指定符号
 * @returns {[]} 集合->json
 */
function findPairedStrings(str, key) {
    let result = [];
    function add(data, type) {
        result.push({data: data, type: type});
    }
    while (str) {
        let start = str.indexOf(key);
        let next = str.indexOf(key, start + key.length); // 下一个节点
        // 前面有空余内容
        if (start > 0) {
            add(str.substring(0, start), false);
        }
        if (next != -1) { // 有成对节点
            add(str.substring(start, next + key.length), true);
            str = str.substring(next + key.length);
        } else {
            add(str.substring(start), false);
            str = '';
        }
    }
    if (str) {
        add(str, false);
    }
    return result;
}

Js禁止子元素响应父元素触发事件

/**
 * 此处为仅父元素可触发
 * e.currentTarget 指的是注册了事件监听器的对象
 * e.target 指的是触发这个事件的对象
 */
if (e.target == e.currentTarget) {
}

Js滚动到底部监听

切换到 JQuery 写法更改第二行即可

// 滚动条监听
let scrollTime = 0;
document.querySelector('#mainDiv').onscroll = function () {
    // 已滚动高度
    let scrollTop = this.scrollTop;
    // 监听元素高度
    let windowHeight = this.clientHeight;
    // 监听元素总滚动高度
    let documentHeight = this.scrollHeight;
    // 高度判断 + 时间消抖
    if (windowHeight + scrollTop + 1 >= documentHeight && new Date().getTime() - scrollTime > 1000) {
        scrollTime = new Date().getTime();
        console.log("页面触底啦");
    }
};

Js时间操作

/**
 * 字符转Date
 * @param {Object} str
 */
function strToDate(str) {
    return new Date(Date.parse(str.replace(/-/g, '/')))
}

/**
 * s1减s2的时间差（天）
 * @param {Object} s1
 * @param {Object} s2
 */
function getNumberOfDays(s1, s2) {
    var a1 = Date.parse(strToDate(s1));
    var a2 = Date.parse(strToDate(s2));
    return parseInt((a2-a1) / (1000 * 60 * 60 * 24));
}

Js获取年月日

function getTime() {
    let d = new Date();
    let Y = d.getFullYear();
    let M = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
    let D = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
    let h = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
    let m = d.getMinutes() < 10 ? '0' + d.getMinutes(): d.getMinutes();
    let s = d.getSeconds() < 10 ? '0' + d.getSeconds(): d.getSeconds();
    return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
}

获取地址栏参数

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){
            return pair[1] == null ? "" : pair[1];
        }
    }
    return "";
}

获取字符所占字节

function getStrLen(str) {
    return str.replace(/[\u0391-\uFFE5]/g,"aa").length;
}

保留指定长度小数位

修改正则即可

function numSubLen(num) {
    return Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
}

JS图像加载回调

function imageLoad(src, fn) {
    let img = new Image();
    img.onload = function () {
        fn(img);
    };
    img.src = src;
}

文件转 Base64

// 文件转base64
document.getElementById('file').onchange = function(e) {
    if (this.files && this.files.length > 0) {
        let read = new FileReader();
        read.onload = function() {
            console.log(read.result);
        };
        read.readAsDataURL(this.files[0]);
    }
};

img对象转 Base64（跨域需额外配置）

/**
 * img对象转base64
 */
function imgToBase64(img) {
    let canvas = document.createElement("canvas"); // 创建图层
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d"); // 获取上下文
    ctx.drawImage(img, 0, 0, img.width, img.height); // 绘图
    let ext = img.src.replace(/.*\./g,'').toUpperCase; // 后缀
    let dataURL = canvas.toDataURL("image/" + ext); // 转url
    return dataURL;
}

遍历 FormData

//第一种
for (var value of formData.values()) {
　　console.log(value);
}
//第二种
for (var [key, value] of formData) {
　　console.log(key, value);
}

//第三种
for (var key of formData.keys()) {
　console.log(key, formData.get(key));
}

js获取读file图片宽度

适用于input选择文件后的file 及类似数据格式

此为异步读取

var reader = new FileReader();
reader.onload = function (e) {
    var data = e.target.result;
    var image = new Image();
    image.onload = function() {
        var width = image.width;
        var height = image.height;
        console.log(width, height)
    };
    image.src= data;
};
reader.readAsDataURL(file);

Jq 获取 input file 文件名

function getFileName(obj) {
    if (!isNull(obj))
        return obj.substring(obj.lastIndexOf("\\") + 1);
    return null;
}

function isNull(obj) {
    return obj == undefined || obj == null || (obj + '') == '';
}

Js/Jq Ajax请求

// JQuery

$.ajax({
        type: 'POST',
        url: 'http://***',
        contentType: 'application/json',
        data: JSON.stringify(json),
        dataType: 'json',
        success: function (data) {
    }
});

// JavaScript

var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
    }
}
ajax.setRequestHeader('Content-Type', 'application/json');
ajax.open('POST', 'http://***');
ajax.send(JSON.stringify(json));

不可设置的请求头

以下请求头信息是浏览器控制，开发者不允许设置这些请求头

Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
Cookie
Cookie2
Date
DNT
Expect
Host
Keep-Alive
Origin
Referer
TE
Trailer
Transfer-Encoding
Upgrade
User-Agent
Via

Ajax请求Content-Type属性值

text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式
以application开头的媒体格式类型：
application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json ： JSON数据格式
application/pdf ：pdf格式
application/msword ： Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ：
中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

Jq选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th, #id, .intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

posted @ 2021-12-16 15:19 散人长情阅读(45) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

散人长情

Js/JQuery常用

数组排序内置函数

寻找成对符号之间的内容

Js禁止子元素响应父元素触发事件

Js滚动到底部监听

Js时间操作

Js获取年月日

获取地址栏参数

获取字符所占字节

保留指定长度小数位

JS图像加载回调

文件转 Base64

img对象转 Base64（跨域需额外配置）

遍历 FormData

js获取读file图片宽度

Jq 获取 input file 文件名

Js/Jq Ajax请求

不可设置的请求头

Ajax请求Content-Type属性值

Jq选择器

公告