JQuery JavaScript常用API整理(前端入门必学)

2023-01-11 185

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQuery JavaScript常用API整理(前端入门必学)

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<style>
    .clr_red {
        background-color: red;
    }
</style>
<body>
    <p class="p_clazz" id="p_text"></p>
    <div>
        <div id="div_1">
            000
            <p>11</p>
            <div>
                <p>222</p>
            </div>
            <p>333</p>
        </div>
    </div>
    <button id="button_1" type="button">button1</button>
    <button id="button_2" type="button">button2</button>
    <button id="button_3" type="button">点我触发隐藏</button>
    <button id="button_4" type="button" onclick="btn_click(id)">点我传id</button>
    <div id="div_click_hide">hello world</div>
    <div id="div_dynamic" style="background-color: red; width: 10px;height: 10px;">
    </div>
    <input id="input_1">
</body>
</html>

以这个html为例

1、获取文件名

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、判断元素是否包含某个样式

function fun_hasclass() {
        var hasClass = $("#p_text").hasClass("p_clazz"); //返回布尔值
        alert(hasClass)
    }

3、判断元素是否是某个标签

fun_is_element('p');
 function fun_is_element(elementName) {
        return $("#p_text").is(elementName);
    }

4、jquery find end

//用于在元素内查找元素
 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函数

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的区别

$(document).on('click', '#button_2', function () {
    //on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
    alert("别点我2");
});
$("#button_1").click(() => {
    //当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。
    //语法：$(选择器).click(fn)
    alert("别点我");
});

7、定时函数改变div宽度

function fun_change_div_width() {
        setInterval(() => {
            //效果和进度条一样
            $("#div_dynamic").width($("#div_dynamic").width() + 10);
        }, 1000);
    }

8、查找集合中最大的属性值

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、删除对象属性

function del_obj_property() {
        var obj = {
            name: "小丽",
            age: 15,
            address: "北京人"
        };
        console.log(obj);
        delete obj.address;
        console.log(obj);
    }

10、for in 和for of

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

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

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、获取指定范围内随机数

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、删除集合中元素

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

//读写session
sessionStorage.setItem('key', sessionData);
sessionStorage.getItem('key')

14、localStorage

/*localStorage本地存储、保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);*/

15、获取url参数

//编码解码 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、回车换行和发送

//回车发送、(ctrl+回车是换行)
    $("#Getevent").keydown(function (event) {
        if (e.keyCode == 13 && e.ctrlKey) {
            // 这里实现换行
            document.getElementById("a").value += "\n";
        } else if (e.keyCode == 13) {
            // 避免回车键换行
            e.preventDefault();
            // 下面写你的发送消息的代码
        }
    });

17、获取时间

//格式为：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、大小写转换

let str = "XafgGkL";
console.log(str.toUpperCase()); //字母转大写
console.log(str.toLowerCase()); //字母转小写

19、数组常用方法

/*
    数组: 删除最后一个元素 .pop()  
        .slice(begin,end); 删除从begin开始的元素不包括end;返回被删除的元素，不改变原来的数组
        .concat(arr)  合并两个数组，返回一个新数组，不改变原来的数组
        .join()  默认,来分割数组中的每个元素，返回一个字符串
        .forEach(function(item){})  遍历数组中的每个元素
        .filter(p=>p.id==1 )  筛选元素
        */

20、++和–在左边和右边的区别

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

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

21、string常用方法

/*
string: indexOf('b') 返回第一次出现的位置
        .substr(start,length)从下标为2的位置截取length个 
        .replace(regex||str,newstr||function)  
        .trim()   去除左右空格  
*/

22、选中下拉

$("#sel option[value='xx']").prop("selected",selected);

23、监听元素回车事件

$("#input_1").keyup(function () {
        if (event.keyCode == 13) {
            //这里写你要执行的事件;
            alert("回车了")
        }
    });

24、代码控制元素的显示和隐藏

$(document).on('click', '#button_3', function () {
        $('#div_click_hide').css("display", "none"); //隐藏
        // $('#div_click_hide').css("display", "none");//显示
        //也可以 .remove(); 直接删除元素
    });

25、通过点击事件传递属性

function btn_click(id) {
        console.log(id); //button_4
    }

26、find和filter

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

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

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方法

返回集合中某个属性值的集合

function fun_map(){
        var list = [{ id: '00001' }, { id: '00002' },{id: '00002'}];
        console.log(list.map(p=>p.id));
    }

28、Object

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

$("#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，<input type=button>按钮区别

当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。
一般写<button id="button_1" type="button">button1</button> 不是表单提交的话，最好把type属性加上

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果是json格式 key不带双引号，则会转换为对象

JQuery JavaScript常用API整理(前端入门必学)

1、获取文件名

2、判断元素是否包含某个样式

3、判断元素是否是某个标签

4、jquery find end

5、Math函数

6、.click和.on的区别

7、定时函数改变div宽度

8、查找集合中最大的属性值

9、删除对象属性

10、for in 和for of

11、获取指定范围内随机数

12、删除集合中元素

13、sessionStorage

14、localStorage

15、获取url参数

16、回车换行和发送

17、获取时间

18、大小写转换

19、数组常用方法

20、++和–在左边和右边的区别

21、string常用方法

22、选中下拉

23、监听元素回车事件

24、代码控制元素的显示和隐藏

25、通过点击事件传递属性

26、find和filter

27、map方法

28、Object

29、获取元素的属性

一些小常识

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JQuery JavaScript常用API整理(前端入门必学)

1、 获取文件名

2、判断元素是否包含某个样式

3、判断元素是否是某个标签

4、jquery find end

5、Math函数

6、.click和.on的区别

7、定时函数改变div宽度

8、查找集合中最大的属性值

9、删除对象属性

10、for in 和for of

11、获取指定范围内随机数

12、删除集合中元素

13、sessionStorage

14、localStorage

15、获取url参数

16、回车换行和发送

17、获取时间

18、大小写转换

19、数组常用方法

20、++和–在左边和右边的区别

21、string常用方法

22、选中下拉

23、监听元素回车事件

24、代码控制元素的显示和隐藏

25、通过点击事件传递属性

26、find和filter

27、map方法

28、Object

29、获取元素的属性

一些小常识

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1、获取文件名