现在MVVM框架逐渐占据了主要市场，很多老项目也逐渐的从jQuery转向了MVVM架构！JQuery还有必要学吗？ 我的答案是jQuery必须学！ JavaScript是基础，JQuery能让DOM操作更方便，哪怕用vue react当操作dom的时候 还是离不开的，只是说可以不用学的那么深。

下面就整理一下我之前工作中用到的一些API

代码语言：javascript代码运行次数：0运行复制

button1

button2

点我触发隐藏

点我传id

以这个html为例

1、 获取文件名代码语言：javascript代码运行次数：0运行复制 function fun_get_filename() {

var a = "http://www.jb51.net/html/images/logo.gif";

var b = a.split("/");

// 截取路径/后最后一个字符串并去除后缀名

var c = b.slice(b.length - 1, b.length).toString(String).split(".");

alert("取得的文件名是：" + c.slice(0, 1));

}2、判断元素是否包含某个样式代码语言：javascript代码运行次数：0运行复制function fun_hasclass() {

var hasClass = $("#p_text").hasClass("p_clazz"); //返回布尔值

alert(hasClass)

}3、判断元素是否是某个标签代码语言：javascript代码运行次数：0运行复制 fun_is_element('p');

function fun_is_element(elementName) {

return $("#p_text").is(elementName);

}4、jquery find end代码语言：javascript代码运行次数：0运行复制 //用于在元素内查找元素

function fun_find_and() {

//$("#div_1").find("p").addClass("clr_red"); //把div的后代元素（后代是子、孙、曾孙，依此类推）添加class

$("#div_1").find("p").end().addClass("clr_red"); //.end(); //当前结果集的上一个结果集即div_1

}5、Math函数代码语言：javascript代码运行次数：0运行复制 function fun_math() {

console.log(Math.PI); //圆周率π

console.log(Math.max(10, 13, 12)); //返回一组数据中最大值

console.log(Math.min(10, 13, 12)); //返回一组数据中最小值

console.log(Math.round(12.4)) //四舍五入

console.log(Math.ceil(12.5)); //向上舍入

console.log(Math.floor(12.5)); // 向下舍入

console.log(Math.random()); //获取0-1之间的随机数不包括0和1

}6、.click和.on的区别代码语言：javascript代码运行次数：0运行复制$(document).on('click', '#button_2', function () {

//on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

alert("别点我2");

});

$("#button_1").click(() => {

//当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

//语法：$(选择器).click(fn)

alert("别点我");

});7、定时函数改变div宽度代码语言：javascript代码运行次数：0运行复制 function fun_change_div_width() {

setInterval(() => {

//效果和进度条一样

$("#div_dynamic").width($("#div_dynamic").width() + 10);

}, 1000);

}8、查找集合中最大的属性值代码语言：javascript代码运行次数：0运行复制function fun_list_max() {

var list = [{ count: 3 }, { count: 15 }, { count: 1 }, { count: -5 }, { count: 10 }]

var maxObj = Math.max.apply(Math, list.map(function (o) { return o.count }));

alert(JSON.stringify(maxObj)) //15

}9、删除对象属性代码语言：javascript代码运行次数：0运行复制 function del_obj_property() {

var obj = {

name: "小丽",

age: 15,

address: "北京人"

};

console.log(obj);

delete obj.address;

console.log(obj);

}10、for in 和for offor in 循环,不仅可以循环对象，还可以遍历数组, in 为下标值

for of 循环 const item of list 获取的为集合中的每个对象

代码语言：javascript代码运行次数：0运行复制 var list = [{ a: 1, b: 1 }, { a: 2, b: 2 }];

var obj = { a: 1, b: 1 };

for (let i in list) {

console.log(list[i]);

}

for (let k in obj) {

console.log('key:' + k + ',value:' + obj[k]);

}

for (let i of list) {

console.log(i);

}11、获取指定范围内随机数代码语言：javascript代码运行次数：0运行复制 fun_random(1, 10); //取n-m之间的随机整数值

function fun_random(n, m) {

for (let i = 0; i < 100; i++) {

let num = Math.random() * (m - n) + n;

console.log(Math.floor(num)); //包括n，不包括m

}

}12、删除集合中元素代码语言：javascript代码运行次数：0运行复制 function fun_list_remove() {

var list = [];

for (let i = 0; i < 100; i++) {

list.push(i);

}

console.log(list);

for (var i = list.length; i >= 0; i--) {

// 一定要采用倒循环删除，正循环的话每次删除后要给下标-1，否则会存在漏删

if (list[i] < 10) {

list.splice(i, 1);

}

}

// 有bug的写法

// for (let i = 0; i < list.length; i++) {

// if (list[i] < 10) {

// list.splice(i, 1);

// }

// }

console.log(list);

}13、sessionStorage代码语言：javascript代码运行次数：0运行复制 //读写session

sessionStorage.setItem('key', sessionData);

sessionStorage.getItem('key')14、localStorage代码语言：javascript代码运行次数：0运行复制/*localStorage本地存储、保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);*/15、获取url参数代码语言：javascript代码运行次数：0运行复制//编码解码 escape() unescape()，针对特殊字符使用encodeURI decodeURI

function getParams(key) {

//访问http://127.0.0.1:5500/js_example/index.html?name=%E5%BC%A0%E4%B8%89&age=15

var url = location.search.replace(/^\?/, '').split('&');

var paramsObj = {};

for (var i = 0, iLen = url.length; i < iLen; i++) {

var param = url[i].split('=');

paramsObj[param[0]] = param[1];

}

if (key) {

return paramsObj[key] || '';

}

return paramsObj;

}16、回车换行和发送代码语言：javascript代码运行次数：0运行复制 //回车发送、(ctrl+回车是换行)

$("#Getevent").keydown(function (event) {

if (e.keyCode == 13 && e.ctrlKey) {

// 这里实现换行

document.getElementById("a").value += "\n";

} else if (e.keyCode == 13) {

// 避免回车键换行

e.preventDefault();

// 下面写你的发送消息的代码

}

});17、获取时间代码语言：javascript代码运行次数：0运行复制//格式为：2022-07-07 13:05:07

var nowDate = new Date();

var nowDateStr = nowDate.getFullYear() + '-' + getDate(nowDate.getMonth() + 1) + '-' + getDate(nowDate.getDate()) + ' ' + getDate(nowDate.getHours()) + ':' + getDate(nowDate.getMinutes()) + ':' + getDate(nowDate.getSeconds());

function getDate(number) {

number = number + '';

if (number.length <= 1) {

return '0' + number;

} else {

return number;

}

}

//一行带过：new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')18、大小写转换代码语言：javascript代码运行次数：0运行复制let str = "XafgGkL";

console.log(str.toUpperCase()); //字母转大写

console.log(str.toLowerCase()); //字母转小写19、数组常用方法代码语言：javascript代码运行次数：0运行复制 /*

数组: 删除最后一个元素 .pop()

.slice(begin,end); 删除从begin开始的元素不包括end;返回被删除的元素，不改变原来的数组

.concat(arr) 合并两个数组，返回一个新数组，不改变原来的数组

.join() 默认,来分割数组中的每个元素，返回一个字符串

.forEach(function(item){}) 遍历数组中的每个元素

.filter(p=>p.id==1 ) 筛选元素

*/20、++和–在左边和右边的区别++ -- 操作符在变量前边，先进行自身运算，在进行其他运算

操作符在变量后边，先进行其他运算，在进行自身运算

21、string常用方法代码语言：javascript代码运行次数：0运行复制/*

string: indexOf('b') 返回第一次出现的位置

.substr(start,length)从下标为2的位置截取length个

.replace(regex||str,newstr||function)

.trim() 去除左右空格

*/22、选中下拉代码语言：javascript代码运行次数：0运行复制$("#sel option[value='xx']").prop("selected",selected);23、监听元素回车事件代码语言：javascript代码运行次数：0运行复制 $("#input_1").keyup(function () {

if (event.keyCode == 13) {

//这里写你要执行的事件;

alert("回车了")

}

});24、代码控制元素的显示和隐藏代码语言：javascript代码运行次数：0运行复制 $(document).on('click', '#button_3', function () {

$('#div_click_hide').css("display", "none"); //隐藏

// $('#div_click_hide').css("display", "none");//显示

//也可以 .remove(); 直接删除元素

});25、通过点击事件传递属性代码语言：javascript代码运行次数：0运行复制 function btn_click(id) {

console.log(id); //button_4

}26、find和filterES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数，则返回 undefined。

filter() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数，则返回一个空数组。

代码语言：javascript代码运行次数：0运行复制function fun_find_filter() {

var list = [{ id: '00001' }, { id: '00002' },{id: '00002'}];

var nub = list.find(nub => nub.id == "00002");

console.log(nub);

var nub1 = list.filter(nub => nub.id == "00002");

console.log(nub1);

}27、map方法返回集合中某个属性值的集合

代码语言：javascript代码运行次数：0运行复制function fun_map(){

var list = [{ id: '00001' }, { id: '00002' },{id: '00002'}];

console.log(list.map(p=>p.id));

}28、Object代码语言：javascript代码运行次数：0运行复制var obj = {a:1};

$.isPlainObject(obj); //返回如果指定的参数是纯粹的对象，则返回true，否则返回false。

//设置对象的值不可改变

function fun_defineProperty(){

Object.defineProperty(obj, "a",{writable:false});//writable：false不能改变属性的值

obj.a = 2;

console.log(obj);

}

//遍历对象属性

Object.keys(obj).forEach(key => {

console.log(obj[key]);

});

obj.hasOwnProperty("a"); //判断自身属性是否存在29、获取元素的属性常用的有attr和prop，当然还有data

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法

如果绑定值是采用data-开头，也可以使用.dataset和.data

代码语言：javascript代码运行次数：0运行复制$("#chke1").prop("checked"); //这是元素固有属性

$("#chke1").attr("userId"); //这是自定义属性

//元素绑定属性: data-id="xxx"

console.log(element.dataset.id);

console.log(element.data('id'));一些小常识js中’'， 0， 都为false&& ||同时存在的话，先运算&&在运算||ajax:添加 contentType：“application/json“之后，向后台发送数据的格式必须为json字符串,不添加 的时候可以向后台发送json对象形式。button，按钮区别代码语言：javascript代码运行次数：0运行复制当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。

但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

一般写button1 不是表单提交的话，最好把type属性加上eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。 如果是json格式 key不带双引号，则会转换为对象