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

ゞ浴缸里的玫瑰 2023-09-28 14:01 6阅读 0赞

现在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 获取的为集合中的每个对象

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

#### 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() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数，则返回一个空数组。

#### 27、map方法 ####

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

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

#### 28、Object ####

#### 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'));

#### 一些小常识 ####

1.  js中’'， 0， 都为false
2.  && ||同时存在的话，先运算`&&`在运算`||`
3.  ajax:添加 `contentType：“application/json“`之后，向后台发送数据的格式必须为json字符串,不添加 的时候可以向后台发送json对象形式。
4.  `button`，`<input type=button>`按钮区别

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

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