文章目录
- jQuery
- 使用方式
- 选择器
- 事件
- 元素的隐藏和展现
- 元素的添加、删除
- 对类的操作
- 对css的操作
- 对标签属性的操作
- 对HTML内容、文本的操作
- 查找(定位某个标签)
- Ajax
- setTimeout与setInterval
- setTimeout(func, delay)
- clearTimeout()
- setInterval(func, delay)
- clearInterval()
- requestAnimationFrame(func)
- Map与Set
- Map
- Set
- localStorage
- JSON
- 日期
- WebSocket
- window
- canvas
jQuery
之前我们想要获取某个div需要使用 document.querySelector 函数来获取,学了 jQuery 之后,写法就变得尤为简单了。let $div = $('div');
使用方式
- 在元素中添加:
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
(acwing官网给我们提供好的) - 在jQuery官网下载
选择器
$(selector);例如:(select类似于css的选择器,使用范围很广)
$('div');
$('.big-div');//选择某一个类
$('div > p')//选择父节点时div的子标签p
事件
之前我们学过用 addEventListener 来给某个标签绑定事件,但是比较长,
现在我们可以使用 $(selector).on(event, func) 来绑定事件
let $div = $('div');$div.on('click', function() {console.log("click div");})
用 $(selector).off(event, func) 来删除事件
let $div = $('div');$div.on('click', function() {console.log("click div");$div.off("click");//解绑,只能点击一次了})
当存在多个相同类型的事件触发函数时,可以通过click.name来区分
let $div = $('div');$div.on('click.name1', function() {console.log("click div 1");})$div.on('click.name2', function() {console.log("click div 2");$div.off("click.name2");})
let $div = $('div');$div.on('click', function(e) {console.log("click div");})$('a').on("click", function(e) { //a是一个超链接e.stopPropagation();//阻止事件向上传递;a的链接正常打开,但是不会输出:click dive.preventDefault();//阻止事件的默认行为;a的链接不能打开,但是会输出:click div})
在出发事件函数中加入 return false;等价于上面两个同时发生
元素的隐藏和展现
- $A.hide():隐藏,可以添加参数,表示消失时间(ms)
- $A.show():展现,可以添加参数,表示出现时间(ms)
- $A.fadeOut():慢慢消失,可以添加参数,表示消失时间
- $A.fadeIn():慢慢出现,可以添加参数,表示出现时间
例如:
let $div = $("div");let $btn_hide = $(".hide-btn");let $btn_show = $(".show-btn");$btn_hide.click(function() {$div.fadeOut(1000);})$btn_show.click(function() {$div.fadeIn(1000);})
元素的添加、删除
$('<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的所有儿子
let $a = $('<a href="https://www.acwing.com"> acwing </a>');//注意必须是单引号$div.append($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.click(function() {$div.css({width: '500px',height: '500px','background-color': 'orange',})});
对标签属性的操作
$('div').attr('id')
:获取属性$('div').attr('id', 'ID')
:设置属性
对HTML内容、文本的操作
$A.html()
:获取、修改HTML内容(返回里面标签)$A.text()
:获取、修改文本信息(返回标签里面具体的内容)$A.val()
:获取、修改文本的值(输入型的较多使用)
查找(定位某个标签)
$(selector).parent(filter)
:查找父元素$(selector).parents(filter)
:查找所有祖先元素$(selector).children(filter)
:在所有子元素中查找$(selector).find(filter)
:在所有后代元素中查找
Ajax
GET方法:
$.ajax({url: url,//具体的urltype: "GET",data: {},dataType: "json",success: function (resp) {},
});
POST方法:
$.ajax({url: url,//具体的urltype: "POST",data: {},dataType: "json",success: function (resp) {},
});
setTimeout与setInterval
setTimeout(func, delay)
delay毫秒后,执行函数func();例如:
let $div = $('div');$div.click(function() {setTimeout(function() {console.log("hhh");}, 2000);})
clearTimeout()
关闭定时器,例如:
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函数。调用时会传入一个参数,表示函数执行的时间戳,单位为毫秒。
requestAnimationFrame可以作动画
cancelAnimationFrame可以取消
例如:
let step = () => { $('div').width($('div').width() + 1 );//每帧将div的宽度增加1像素requestAnimationFrame(step);//递归};requestAnimationFrame(step);
Map与Set
Map
保存键值对,类似于C++中的哈希表
- 用for…of或者forEach可以按插入顺序遍历
- 键值可以为任意值,包括函数、对象或任意基本类型
let map = new Map();map.set('name', 'sun');map.set('age', 20);for(let [key, value] of map) {console.log(key, value);}map.forEach(function(value, key) {console.log(value, key)})
常用API:
set(key, value)
:插入键值对,如果key已存在,则会覆盖原有的valueget(key)
:查找关键字,如果不存在,返回undefinedsize
:返回键值对数量has(key)
:返回是否包含关键字keydelete(key)
:删除关键字keyclear()
:删除所有元素
Set
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用
常用API:
add()
:添加元素has()
:返回是否包含某个元素size
:返回元素数量delete()
:删除某个元素clear()
:删除所有元素- 用for…of或者forEach可以按插入顺序遍历
localStorage
可以在用户的浏览器上永久存储键值对
常用API:
setItem(key, value)
:插入getItem(key)
:查找removeItem(key)
:删除clear()
:清空
JSON
JSON对象用于序列化对象、数组、数值、字符串、布尔值和null
JSON.parse()
:将字符串解析成对象JSON.stringify()
:将对象转化为字符串
let obj = {name: "sun",age: 20,};let str = JSON.stringify(obj);let new_obj = JSON.parse(str);console.log(str);
日期
返回值为整数的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的时刻(北京是东八区)getDay()
:返回星期,0表示星期日,1-6表示星期一至星期六getDate()
:返回日,数值为1-31getMonth()
:返回月,数值为0-11getFullYear()
:返回年份getHours()
:返回小时getMinutes()
:返回分钟getSeconds()
:返回秒getMilliseconds()
:返回毫秒- 两个Date对象实例的差值为毫秒数
WebSocket
与服务器建立全双工连接
new WebSocket('ws://localhost:8080')
:建立ws连接send()
:向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串onopen
:类似于onclick,当连接建立时触发onmessage
:当从服务器端接收到消息时触发close()
:关闭连接onclose
:当连接关闭后触发
window
window.open("https://www.acwing.com")
:在新标签栏中打开页面location.reload()
:刷新页面location.href = "https://www.acwing.com"
:在当前标签栏中打开页面
canvas
canvas教程