首页 > 编程语言 >3.5 JavaScript——常用库

3.5 JavaScript——常用库

时间：2024-07-27 12:06:20浏览次数：20  
标签：function 常用 console log JavaScript 3.5 let div click

jQuery 更加方便控制前端组件和属性

使用方式

  • 在<head>元素中添加：
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  • 按jQuery官网提示下载

选择器

$(selector)类似于CSS选择器。例如：

let $div = $('div');//通过jQuery获取div，$符号用于识别jQuery变量
let $div = $('.big-div');//通过jQuery获取类名为.big-div
let $div = $('div > p');//通过jQuery获取div的子元素p

事件

$(selector).on(event, func)绑定事件，例如：

$div.on("click",function() {
	console.log("click div");
});

$(selector).click(func)绑定事件，例如：

    $div.click(function() {
        $div.off("click");//解除绑定
    });

$(selector).off(event, func)删除事件，例如：

$('div').on('click', function (e) {
    console.log("click div");
    $('div').off('click');
});

当存在多个相同类型的事件触发函数时，可以通过click.name来区分，例如：

$('div').on('click.first', function (e) {
    console.log("click div");

    $('div').off('click.first');
});

在事件触发的函数中的return false等价于同时执行：
e.stopPropagation()：阻止事件向上传递，例如：

<div>
     <a href="https://www.acwing.com" target="_blank">AcWing</a>
</div>

点击链接的同时会触发div的click函数
e.preventDefault()：阻止事件的默认行为

元素的隐藏、展现

  • $A.hide()：隐藏，可以添加参数，表示消失时间
  • $A.show()：展现，可以添加参数，表示出现时间
  • $A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
  • $A.fadeIn()：慢慢出现，可以添加参数，表示出现时间
function main(){
    let $div = $('div');//通过jQuery获取div，$符号用于识别jQuery变量
    let $btn_hide = $('.btn-hide');
    let $btn_show = $('.btn-show');
    $btn_hide.click(function () {
        $div.fadeOut(500); 
    });
    $btn_show.click(function() {
        $div.fadeIn(500);
    });
}

<button class="btn-hide">隐藏</button>
<button class="btn-show">出现</button>

元素的添加、删除

$('<div class="mydiv"><span>Hello World</span></div>')：构造一个jQuery对象
$A.append($B)：将\(B添加到\)A的末尾
$A.prepend($B)：将\(B添加到\)A的开头
$A.remove()：删除元素 $ A
$A.empty()：清空元素$A的所有儿子

对类的操作

  • $A.addClass(class_name)：添加某个类
  • $A.removeClass(class_name)：删除某个类
  • $A.hasClass(class_name)：判断某个类是否存在

对CSS的操作

$("div").css("background-color")：获取某个CSS的属性
$("div").css("background-color","yellow")：设置某个CSS的属性
同时设置多个CSS的属性：

$('div').css({
    "width": "200px",
    "height": "200px",
    "background-color": "orange",
});

对标签属性的操作

$('div').attr('id')：获取属性
$('div').attr('id', 'ID')：设置属性

对HTML内容、文本的操作

不需要背每个标签该用哪种，用到的时候Google或者百度即可。
$A.html()：获取、修改HTML内容
$A.text()：获取、修改文本信息
$A.val()：获取、修改文本的值

查找

  • $(selector).parent(filter)：查找父元素
  • $(selector).parents(filter)：查找所有祖先元素
  • $(selector).children(filter)：在所有子元素中查找
  • $(selector).find(filter)：在所有后代元素中查找

ajax 与后端交互

常见场景：页面局部刷新数据

GET方法

$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

POST方法

$.ajax({
    url: url,//后端链接
    type: "POST",
    data: {//参数
    },
    dataType: "json",
    success: function (resp) {//成功时从resp解析内容

    },
});

定时器有关函数

setTimeout(func, delay)

delay毫秒后，执行函数func()。

clearTimeout()

关闭定时器，例如：

let $btn_hide = $('.btn-hide');
let $btn_show = $('.btn-show');
let timer = null;
$btn_hide.click(function () {
	clearTimeout(timer);
});
$btn_show.click(function() {
	timer = setInterval(() => {
		console.log("hhh");
	}, 1000);
});

setInterval(func, delay)

每隔delay毫秒，执行一次函数func()。
第一次在第delay毫秒后执行。

clearInterval()

关闭周期执行的函数，例如：

let interval_id = setInterval(() => {
    console.log("Hello World!")
}, 2000);  // 每隔2秒，输出一次"Hello World"

clearInterval(interval_id);  // 清除周期执行的函数

requestAnimationFrame(func)

该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。

    let func = function(timestamp){
        console.log(timestamp);
        last_timestamp = timestamp;

        div_1.style.width = div_1.clientWidth + 1 + 'px';//每帧将div宽度加1
        if(timestamp / 1000 <= 5){ //持续5秒
            func_id = requestAnimationFrame(func);
        }
    };

cancelAnimationFrame(func)

停止AnimationFrame的执行，需要传入函数句柄。

与setTimeout和setInterval的区别

requestAnimationFrame渲染动画的效果更好，性能更强。
该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。
当页面在后台时，因为页面不再渲染，因此requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。

Map与Set

Map

Map 对象保存键值对。

  • 用for...of或者forEach可以按插入顺序遍历。
  • 键值可以为任意值，包括函数、对象或任意基本类型。
  • set(key, value)：插入键值对，如果key已存在，则会覆盖原有的value
  • get(key)：查找关键字，如果不存在，返回undefined
  • size：返回键值对数量
  • has(key)：返回是否包含关键字key
  • delete(key)：删除关键字key
  • clear()：删除所有元素
function main(){
    let map = new Map();
    map.set('name','zjq');
    map.set('age','18');

    console.log(map.has('age'));
    console.log(map.get("name"));
    console.log(map.size);
    console.log(map.delete('age'));

    //遍历方式1
    map.forEach((value,key) =>{
        console.log(key,value);
    });

    //遍历方式2
    for(let [key,value] of map){
        console.log(key,value);
    }
}

export{
    main
};

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

  • 用for...of或者forEach可以按插入顺序遍历。
  • add()：添加元素
  • has()：返回是否包含某个元素
  • size：返回元素数量
  • delete()：删除某个元素
  • clear()：删除所有元素
function func(){
    console.log("123");
}

function main(){
    let map = new Map();
    let set = new Set();
    set.add('yxc');
    set.add(18);
    set.add(func);//可添加函数类型成员
    set.delete(18);
    console.log(set.size);
    console.log(set.has(func));
    set.clear();
    console.log(set.size);
}

export{
    main
};

localStorage 可以在用户的浏览器上存储键值对

常用API：

  • setItem(key, value)：插入
  • getItem(key)：查找
  • removeItem(key)：删除
  • clear()：清空
    示例
function main(){
    localStorage.setItem('name','yxc');
    localStorage.setItem('age',18);
    console.log(localStorage.getItem('name'));
    localStorage.removeItem('name');
    console.log(localStorage);
    localStorage.clear();
    console.log(localStorage);
}

持久化存储数据

image

JSON

JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。
常用API：
JSON.parse()：将字符串解析成对象
JSON.stringify()：将对象转化为字符串
示例

function main(){
    let obj = {
        'name':'yxc',
        'age':18,
        'sex':'male'
    }

    let json = JSON.stringify(obj);//对象转换成json字符串
    console.log(json);
    let obj1 = JSON.parse(json);//json字符串转换为对象
    console.log(obj1);
}

日期

返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：

  • Date.now()：返回现在时刻。
  • Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻。

与Date对象的实例相关的API：

  • new Date()：返回现在时刻。
  • new Date("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻。
  • 两个Date对象实例的差值为毫秒数
  • getDay()：返回星期，0表示星期日，1-6表示星期一至星期六
  • getDate()：返回日，数值为1-31
  • getMonth()：返回月，数值为0-11
  • getFullYear()：返回年份
  • getHours()：返回小时
  • getMinutes()：返回分钟
  • getSeconds()：返回秒
  • getMilliseconds()：返回毫秒
    示例
function main(){
    let time_now = new Date(Date.now()),time_go = new Date("2024-07-27T15:30:00.000+08:00");
    console.log(time_go - time_now);
    console.log(time_go.getFullYear());
    console.log(time_go.getMonth());
    console.log(time_go.getDate());
    console.log(time_go.getDay());
    console.log(time_go.getHours());
    console.log(time_go.getMinutes());
    console.log(time_go.getSeconds());
    console.log(time_go.getMilliseconds());
}

WebSocket

与服务器建立全双工连接。
常用API：

  • new WebSocket('ws://localhost:8080');：建立ws连接。
  • send()：向服务器端发送一个字符串。一般用 JSON将传入的对象序列化为字符串。
  • onopen：类似于onclick，当连接建立时触发。
  • onmessage：当从服务器端接收到消息时触发。
  • close()：关闭连接。
  • onclose：当连接关闭后触发。

Window

let btn1 = $('.btn-show');
let btn2 = $('.btn-hide');

function main(){
    btn1.click(function(){
        window.open("https://www.acwing.com");
    });

    btn2.click(function(){
        location.reload();
    })
}

Canvas

Canvas

标签：function,常用,console,log,JavaScript,3.5,let,div,click
From： https://www.cnblogs.com/zjq182/p/18277632

相关文章

  • Linux常用命令
    目录pstopfindgreptailtarziphistorywatchtailchownchmodsudf/ducpucpps常见用法：psaufx各个字段的含义：USER：表示哪个用户启动了这个进程PID：进程ID%CPU：进程CPU的占用率%MEM：进程物理内存的占用率VSZ：进程占用的虚拟内存量(Kbytes)RSS：进程当前实际上占用了多少内存TTY......
  • vim常用快捷键
    命令说明i在当前光标所在处前插入文本I在光标移动到当前行的行首，并在行首前插入文本$将光标移动到行尾0将光标移动到行首shift+上向上翻页shift+下向下翻页gg移动到第一行GG移动到最后一行dd删除光标所在行ndd删除光标所在行开始的......
  • 3.5-RNN文本生成
    1语言模型生成文本的顺序前面我们已经能够实现使用下图的LSTM网络进行语言建模；对于一个已经在语料库上学习好的LSTM模型；如果语料库就只是yousaygoobyeandisayhello；那么当把单词i输入到模型中，Timexxx层的第一个LSTM层将会输出一个概率分布，这个概率分布中概率最大......
  • Visual C++ 官方版下载与安装教程（微软常用运行库合集|DLL报错必装）
    前言MicrosoftVisualC++Redistributable（简称MSVC，VB/VC，系统运行库）是Windows操作系统应用程序的基础类型库组件。此版VisualC++运行库组件合集（微软常用运行库合集）由国内封装爱好者@Dreamcast打包而成，整合VisualC++组件安装包运行库所有版本，提供图形安装界面，可自选更新V......
  • Excel常用的一些命令和功能
    excel单元格删除光标后面的数字，用Ctrl+Del快捷键；  删除多个单元格里面的值，用Ctrl+Del快捷键，也可以扩大范围框选；智能排序：在单元格里输入星期一，把光标放在单元格的右下方，等到出现+就可以向右和向下拖动，如图：都可以拖动，因为这些已经提前配置好了，如果没有配置，可以点击文件->选项->......
  • VMware Fusion Pro 虚拟机 免费了附最新版 13.5.2-23775688 下载地址
    VMwareFusionPro可以帮助用户在Mac上安装Windows、Linux等多种操作系统，最重要的是无需重启电脑切换系统，可以和MacOS系统同时运行，就类似于MacOS安装了一个应用。对于家庭用户来说足够简单，对于IT专业人员，开发人员和企业来说足够强大。VMwareFusionPro是一款强大的......
  • 写好JavaScript条件语句的5条守则
    照抄https://juejin.im/post/5bdef288e51d450d810a89c6testEquals(fruit){if(fruit==='apple'||fruit==='strawberry'){console.log('==');}},testIncludes(fruit){constredFruits=['......
  • es6中对数组的常用操作方法-普通数组
    参考https://www.jianshu.com/p/856f4200d3c0最近，经常操作数组，可是数组中的一些常用操作方法很迷糊，看了上面一篇文章之后，茅塞顿开。于是自己按照上面文章的用法，自己全部从头到尾写了一遍，分为普通的数组以及对象数组的操作。//定义数组constarr=[1,2,3,4,5]......
  • es6中对数组的常用操作方法-对象数组
    //定义对象数组constarrayObject=[{name:'name1',title:'title1'},{name:'name2',title:'title2'},{name:'name3',title:'title3'}];//数组对象......
  • 常用System.Text.Json的JsonSerializerOptions配置
    newJsonSerializerOptions{PropertyNamingPolicy=JsonNamingPolicy.CamelCase,//驼峰命名规则Encoder=JavaScriptEncoder.Create(UnicodeRanges.BasicLatin,//基础拉丁文字母UnicodeRanges.CjkUnifiedIdeographs,//中日韩统一的表意文字......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99