Map和Set
--是ES6新增的两个数据类型
--都属于内置构造函数 既 使用new的方法来实例化
Set是一个数据集合看上去是一个类似数组的数据结构，但是不是，就是Set 数据结构
--let s=new set();
--我们可以在new 的时候直接向内部添加数据
--例：const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
Set常用方法和属性
[if !supportLists]1. [endif]size 用来获取该数据结构中有多少数据的
--const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
--console.log(s.size) // 7
[if !supportLists]2. [endif]add 用来向该数据类型中追加数据
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--console.log(s.size) // 3
[if !supportLists]3. [endif]delete 是用来删除该数据类型中的某一个数据的
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--s.delete(0)
--console.log(s.size) // 2
[if !supportLists]4. [endif]clear 用来清空数据结构中的所有数据
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--s.clear()
--console.log(s.size) // 0
[if !supportLists]5. [endif]has 用来判断该数据类型中是否存在每一个数据
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--console.log(s.has(0)) // true
[if !supportLists]6. [endif]forEach 是用来遍历该数据类型的方法
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--s.forEach(item => {
--console.log(item) // 0 {} function () {}})
另：
[if !supportLists]1. [endif]set没有获取元素（没有索引）的直接方法 需要用[...]运算符把该数据类型中的数据放入一个数组中，再获取
[if !supportLists]2. [endif]Set 不允许存储重复的数据
--const s = new Set([1, 2, 3])
--s.add(4) // 此时 size 是 4
--s.add(1) // 此时 size 是 4
--s.add(2) // 此时 size 是 4
--s.add(3) // 此时 size 是 4
Map 是一个数据集合，是一个很类似于对象的数据集合 （值= 值 的数据类型）
--const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
console.log(m)
/*
Map(3) {{…} => {…}, ƒ => ƒ, true => 1}
[[Entries]]
0: {Object => Object}
1: {function () {} => function () {}}
2: {true => 1}
size: (...)
__proto__: Map
*/
Map 常用的方法和属性
[if !supportLists]1. [endif]size 用来获取该数据类型中数据的个数
--const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
--console.log(m.size) // 3
[if !supportLists]2. [endif]delete 用来删除个数据类型中的某一个数据
--const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
--m.delete(true)
--console.log(m.size) // 2
[if !supportLists]3. [endif]set 用来向该数据类型中追加数据的
--const m = new Map()
--m.set({ name: 'Jack' }, { age: 18 })
--console.log(m.size) // 1
[if !supportLists]4. [endif]get 用来获取该数据类型中的每一个数据的
--const m = new Map()
--m.set({ name: 'Jack' }, { age: 18 })
--m.set(true, function () {})
--console.log(m.get(true)) // function () {}
[if !supportLists]5. [endif]clear 用来清除该数据类型中的所有数据
--const m = new Map()
--m.set({ name: 'J ack' }, { age: 18 })
--m.set(true, function () {})
--m.clear()
--console.log(m.size) // 0
[if !supportLists]6. [endif]has 用来判断该数据类型中是否存在某一个数据的
--const m = new Map()
--m.set({ name: 'Jack' }, { age: 18 })
--m.set(true, function () {})
--console.log(m.has(true)) // true
另：
Map 中键名不能重复，如果重复后面的会覆盖前面的
jQuery
--jQuery是一个前端库，也是一个方法库
--他里面封装着一些列的方法供我们使用
--我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
-- jQuery之所以好用，很多人愿意使用，是因为他的几个优点太强大了
--优质的选择器和筛选器
--好用的隐式迭代
--强大的链式编程
使用：页面里面引入jQuery.js就行了,页面里面引入jQuery.js就行了,jQuery向全局暴露的接口就是 jQuery或者 $ 都行
选择器和筛选器
--选择器和筛选器就是用来帮我们获取DOM元素的
选择器
1.按照 id 获取页面中的元素
--const ele = jQuery('#box')
--const ele = $('#box')
2. 按照类名来选择
--const eles = jQuery('.a')
--const eles = $('.a')
3.按照标签名来获取元素，可以获取到一组元素
--const lis = jQuery('li')
--const lis = $('li')
3.按照选择器来获取元素，可以获取到一组元
--const eles = jQuery('ul > li')
--const eles = $('ul > li')
特殊选择器
[if !supportLists]1. [endif]直接找到第一个$('li:first') // 找到所有 li 中的第一个
[if !supportLists]2. [endif]直接找到最后一个$('li:last') // 找到所有 li 中的最后一个
[if !supportLists]3. [endif]直接找到第几个$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
[if !supportLists]4. [endif]找到所有奇数个$('li:odd') // 找到所有 li 中索引为 奇数 的
[if !supportLists]5. [endif]找到所有偶数个$('li:even') // 找到所有 li 中索引为 偶数 的
筛选器
--jQuery的筛选器就是在选择器选择到一组元素以后
--对元素进行筛选，也可以对准确的某一个元素进行判断和获取
1.找到所有元素中的第一个 $('li').first()
2.找到所有元素中的最后一个 $('li').last()
3.找到某一个元素的下一个兄弟元素 $('li:eq(3)').next()
4.找到某一个元素的上一个兄弟元素 $('li:eq(3)').prev()
5.找到某一个元素的后面的所有兄弟元素 $('li:eq(3)').nextAll()
6.找到某一个元素的前面的所有兄弟元素 $('li:eq(3)').prevAll()
7.找到某一个元素的父元素 $('li:eq(3)').parent()
8.找到某一个元素的所有结构父级，一直到 htm $('li:eq(3)').parents()
9.找到一组元素中的某一个
//在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')
//找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')
属性操作
[if !supportLists]1. [endif]给一个元素添加某个属性
--prop这个方法只能添加元素自己本身就有的属性
--如果是添加的自定义属性，不会显示在标签上，但是可以使用
//给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
//获取 div 的 id 属性
console.log($('div').prop('id'))
[if !supportLists]2. [endif]给元素添加某一个自定义属性
//给 div 添加一个 index 属性，值是 1
$('div').attr('index', 1)
//获取 div 的 index 属性
console.log($('div').attr('index'))
[if !supportLists]3. [endif]移除某一个属性
//移除元素自己本身的属性
$('div').removeProp('id')
//移除元素的自定义属性
$('div').removeAttr('index')
[if !supportLists]4. [endif]操作元素的类名
//判断某一个元素有没有某一个 class
$('div').hasClass('box') // true表示该元素有 box 类名，false 表示该元素没有 box 类名
//给元素添加一个类名
$('div').addClass('box2') //给 div 元素添加一个 box2 类名
//移除元素的类名
$('div').removeClass('box') //移除 div 的 box 类名
//切换元素类名
$('div').toggleClass('box3') //如果元素本身有这个类名就移除，本身没有就添加
[if !supportLists]5. [endif]操作元素的内容
//给元素的 innerHTML 赋值
$('div').html('hello world')
//获取元素的 innerHTML
$('div').html()
//给元素的 innerText 赋值
$('div').text('hello world')
//获取元素的 innerText
$('div').text()
//给元素的 value 赋值
$('input').val('admin')
//获取元素的 value 值
$('input').val()
操作样式
// 给元素设置一个 css 样式
$('div').css('width', '100px')
// 获取元素的某一个样式
$('div').css('width')
// 给元素设置一组样式
$('div').css({
width: '100px',
height: '200px'
})
隐式迭代
获取到的元素结合绑定事件的时候，会默认遍历元素集合，给每一个元素都绑定上事件
$('div').click(function(){
console.log(this);
this.css('background-color','orange');//报错
this是原生DOM对象,而css是jquery对象的方法
原生的DOM对象无法使用jquery中方法
$(this).css('background-color','orange');
})
将原生的DOM对象转换为jquery对象
$(原生的DOM对象) 就能的到jquery对象
如果jquery对象想要使用原生的方法属性，需要将jquery的对象转为原生DOM对象
jquery对象[0]
console.log($('div:first')[0]);
需要将jquery对象转为原生DOM对象
$('div:first')[0].onmouseover = function(){
$(this).css('background-color','green');
}
元素操作
- 创建一个元素
var div = $('
')- 内部插入元素
// 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('
'))// 把 p 元素插入到 div 中去，放在最后
$('
hello
').appendTo($('div'))// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('
'))// 把 p 元素插入到 div 中去，放在最前
$('
hello
').prependTo($('div'))- 外部插入元素
// 在 div 的后面插入一个元素 p
$('div').after($('
'))// 在 div 的前面插入一个元素 p
$('div').before($('
'))// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('
'))// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('
'))- 替换元素
// 把 div 元素替换成 p 元素
$('div').replaceWith($('
'))// 用 p 元素替换掉 div 元素
$('
').replaceAll($('div'))- 删除元素
// 删除元素下的所有子节点
$('div').empty()
// 把自己从页面中移除
$('div').remove()
- 克隆元素
// 克隆一个 li 元素
// 接受两个参数
// 参数1： 自己身上的事件要不要复制，默认是 false
// 参数2： 所有子节点身上的事件要不要复制，默认是跟随第一个参数
$('li').clone()