JavaScript补充和JQuery
JavaScript补充
Map和Set集合
ES6新特性,和Java相近,具体细节注意一些即可
'use strict';
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);
console.log(name);
map.delete('tom');
var set = new Set([3,,1,1,1,1]);//set可以去重
set.add(2);
set.delete(1);
console.log(set.has(3));
iterator
es6 新特性
遍历数组
//通过for of / for in 小标
var arr = [3,4,5];
for (var x in arr) {//容易出bug,不建议使用
console.log(x);
}
for (var x of arr) {
console.log(x);
}
遍历map
var map = new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map) {
console.log(x[0] + ' ' + x[1])
}
遍历set
var set = new Set([3,1,1,1,1]);//set可以去重
for (let x of set) {
console.log(x)
}
let、const详解
局部作用域
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i + 1);//问题:i出了这个作用域还可以使用
}
ES6 let 关键字,解决局部作用域冲突问题!
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i + 1);//ReferenceError: i is not defined
}
建议大家都使用let
去定义局部作用域的变量;
常量 const
在ES6 之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值,在ES6引入了常量关键字const
防止出错
JSON
在JavaScript 一切皆为对象、任何js 支持的类型都可以用JSON来表示;number,string..
格式:
- 对象都用{}
- 数组都用 []
- 所有的键值对 都是用 key:value
JSON字符串和JS对象的和转化
var user = {
name:"zuo",
age:3,
sex:'男'
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象 参数为json 字符串
var obj = JSON.parse('{"name":"zuo","age":3,"sex":"男"}')
面向对象class继承
和ES6之后形式和Java相近了,方便了后端程序员,可以用class设置类和extends继承了
JQuery
jQuery,也就是JavaScript和查询(Query),即辅助JavaScript开发的一个库。jQuery是全球最流行的JavaScript库
公式
$(selector).action()
举例
$('#test-jquery').click(function () {器
alert('hello,jquery');
})
选择器
//JQuery css 中的选择器它全部都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
Jquery也有API文档帮助文档
操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css的操作
$('#test-ul li[name=python]').css("color","red");
元素的显示和隐藏:本质display:none
;
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();