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();
posted @ 2025-02-03 23:58  韩熙隐ario  阅读(11)  评论(0)    收藏  举报