Map和Set
--是ES6新增的兩個(gè)數(shù)據(jù)類型
--都屬于內(nèi)置構(gòu)造函數(shù) ?既 ?使用new的方法來實(shí)例化
Set是一個(gè)數(shù)據(jù)集合看上去是一個(gè)類似數(shù)組的數(shù)據(jù)結(jié)構(gòu)，但是不是琳猫，就是Set 數(shù)據(jù)結(jié)構(gòu)
--let s=new set();
--我們可以在new 的時(shí)候直接向內(nèi)部添加數(shù)據(jù)
--例：const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
Set常用方法和屬性
[if !supportLists]1.?[endif]size ?用來獲取該數(shù)據(jù)結(jié)構(gòu)中有多少數(shù)據(jù)的
--const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
--console.log(s.size) // 7
[if !supportLists]2.?[endif]add ?用來向該數(shù)據(jù)類型中追加數(shù)據(jù)
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--console.log(s.size) // 3
[if !supportLists]3.?[endif]delete ?是用來刪除該數(shù)據(jù)類型中的某一個(gè)數(shù)據(jù)的
--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 ?用來清空數(shù)據(jù)結(jié)構(gòu)中的所有數(shù)據(jù)
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--s.clear()
--console.log(s.size) // 0
[if !supportLists]5.?[endif]has 用來判斷該數(shù)據(jù)類型中是否存在每一個(gè)數(shù)據(jù)
--const s = new Set()
--s.add(0)
--s.add({})
--s.add(function () {})
--console.log(s.has(0)) // true
[if !supportLists]6.?[endif]forEach 是用來遍歷該數(shù)據(jù)類型的方法
--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沒有獲取元素（沒有索引）的直接方法 需要用[...]運(yùn)算符把該數(shù)據(jù)類型中的數(shù)據(jù)放入一個(gè)數(shù)組中锭汛，再獲取
[if !supportLists]2.?[endif]Set 不允許存儲(chǔ)重復(fù)的數(shù)據(jù)
--const s = new Set([1, 2, 3])
--s.add(4) ?// 此時(shí) size 是 4
--s.add(1) ?// 此時(shí) size 是 4
--s.add(2) ?// 此時(shí) size 是 4
--s.add(3) ?// 此時(shí) size 是 4
Map ??是一個(gè)數(shù)據(jù)集合，是一個(gè)很類似于對(duì)象的數(shù)據(jù)集合??（值= 值 的數(shù)據(jù)類型）
--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 用來獲取該數(shù)據(jù)類型中數(shù)據(jù)的個(gè)數(shù)
--const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
--console.log(m.size) // 3
[if !supportLists]2.?[endif]delete ?用來刪除個(gè)數(shù)據(jù)類型中的某一個(gè)數(shù)據(jù)
--const m = new Map([[{}, {}], [function () {}, function () {}], [true, 1]])
--m.delete(true)
--console.log(m.size) // 2
[if !supportLists]3.?[endif]set ?用來向該數(shù)據(jù)類型中追加數(shù)據(jù)的
--const m = new Map()
--m.set({ name: 'Jack' }, { age: 18 })
--console.log(m.size) // 1
[if !supportLists]4.?[endif]get 用來獲取該數(shù)據(jù)類型中的每一個(gè)數(shù)據(jù)的
--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 ?用來清除該數(shù)據(jù)類型中的所有數(shù)據(jù)
--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 用來判斷該數(shù)據(jù)類型中是否存在某一個(gè)數(shù)據(jù)的
--const m = new Map()
--m.set({ name: 'Jack' }, { age: 18 })
--m.set(true, function () {})
--console.log(m.has(true)) // true
另：
Map ?中鍵名不能重復(fù)惧蛹，如果重復(fù)后面的會(huì)覆蓋前面的
jQuery
--jQuery是一個(gè)前端庫桶雀，也是一個(gè)方法庫
--他里面封裝著一些列的方法供我們使用
--我們常用的一些方法它里面都有，我們可以直接拿來使用就行了
-- jQuery之所以好用，很多人愿意使用值朋，是因?yàn)樗膸讉€(gè)優(yōu)點(diǎn)太強(qiáng)大了
--優(yōu)質(zhì)的選擇器和篩選器
--好用的隱式迭代
--強(qiáng)大的鏈?zhǔn)骄幊?/p>
使用：頁面里面引入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.按照標(biāo)簽名來獲取元素，可以獲取到一組元素
--const lis = jQuery('li')
--const lis = $('li')
3.按照選擇器來獲取元素巩搏，可以獲取到一組元
--const eles = jQuery('ul > li')
--const eles = $('ul > li')
特殊選擇器
[if !supportLists]1.?[endif]直接找到第一個(gè)$('li:first') // 找到所有 li 中的第一個(gè)
[if !supportLists]2.?[endif]直接找到最后一個(gè)$('li:last') // 找到所有 li 中的最后一個(gè)
[if !supportLists]3.?[endif]直接找到第幾個(gè)$('li:eq(3)') // 找到所有 li 中索引為 3 的那個(gè)
[if !supportLists]4.?[endif]找到所有奇數(shù)個(gè)$('li:odd') // 找到所有 li 中索引為 奇數(shù) 的
[if !supportLists]5.?[endif]找到所有偶數(shù)個(gè)$('li:even') // 找到所有 li 中索引為 偶數(shù) 的
篩選器
--jQuery的篩選器就是在選擇器選擇到一組元素以后
--對(duì)元素進(jìn)行篩選昨登，也可以對(duì)準(zhǔn)確的某一個(gè)元素進(jìn)行判斷和獲取
1.找到所有元素中的第一個(gè)????????????????????$('li').first()
2.找到所有元素中的最后一個(gè)??????????????????$('li').last()
3.找到某一個(gè)元素的下一個(gè)兄弟元素????????????$('li:eq(3)').next()
4.找到某一個(gè)元素的上一個(gè)兄弟元素????????????$('li:eq(3)').prev()
5.找到某一個(gè)元素的后面的所有兄弟元素????????$('li:eq(3)').nextAll()
6.找到某一個(gè)元素的前面的所有兄弟元素????????$('li:eq(3)').prevAll()
7.找到某一個(gè)元素的父元素????????????????????$('li:eq(3)').parent()
8.找到某一個(gè)元素的所有結(jié)構(gòu)父級(jí)，一直到 htm??$('li:eq(3)').parents()
9.找到一組元素中的某一個(gè)
//在 li 的所有父級(jí)里面找到所有 body 標(biāo)簽
$('li').parents().find('body')
//找到 div 標(biāo)簽下所有后代元素中所有類名為 box 的元素
$('div').find('.box')
屬性操作
[if !supportLists]1.?[endif]給一個(gè)元素添加某個(gè)屬性
--prop這個(gè)方法只能添加元素自己本身就有的屬性
--如果是添加的自定義屬性贯底，不會(huì)顯示在標(biāo)簽上丰辣，但是可以使用
//給 div 元素添加一個(gè) id 屬性，值是 box
$('div').prop('id', 'box')
//獲取 div 的 id 屬性
console.log($('div').prop('id'))
[if !supportLists]2.?[endif]給元素添加某一個(gè)自定義屬性
//給 div 添加一個(gè) index 屬性禽捆，值是 1
$('div').attr('index', 1)
//獲取 div 的 index 屬性
console.log($('div').attr('index'))
[if !supportLists]3.?[endif]移除某一個(gè)屬性
//移除元素自己本身的屬性
$('div').removeProp('id')
//移除元素的自定義屬性
$('div').removeAttr('index')
[if !supportLists]4.?[endif]操作元素的類名
//判斷某一個(gè)元素有沒有某一個(gè) class
$('div').hasClass('box') // true表示該元素有 box 類名笙什，false 表示該元素沒有 box 類名
//給元素添加一個(gè)類名
$('div').addClass('box2') //給 div 元素添加一個(gè) box2 類名
//移除元素的類名
$('div').removeClass('box') //移除 div 的 box 類名
//切換元素類名
$('div').toggleClass('box3') //如果元素本身有這個(gè)類名就移除，本身沒有就添加
[if !supportLists]5.?[endif]操作元素的內(nèi)容
//給元素的 innerHTML 賦值
$('div').html('<span>hello world</span>')
//獲取元素的 innerHTML
$('div').html()
//給元素的 innerText 賦值
$('div').text('hello world')
//獲取元素的 innerText
$('div').text()
//給元素的 value 賦值
$('input').val('admin')
//獲取元素的 value 值
$('input').val()
操作樣式
// 給元素設(shè)置一個(gè) css 樣式
$('div').css('width', '100px')
// 獲取元素的某一個(gè)樣式
$('div').css('width')
// 給元素設(shè)置一組樣式
$('div').css({
width: '100px',
height: '200px'
})
隱式迭代
獲取到的元素結(jié)合綁定事件的時(shí)候睦擂，會(huì)默認(rèn)遍歷元素集合得湘，給每一個(gè)元素都綁定上事件
??$('div').click(function(){
?????console.log(this);
this.css('background-color','orange');//報(bào)錯(cuò)
this是原生DOM對(duì)象,而css是jquery對(duì)象的方法
原生的DOM對(duì)象無法使用jquery中方法
????$(this).css('background-color','orange');
??})
將原生的DOM對(duì)象轉(zhuǎn)換為jquery對(duì)象
$(原生的DOM對(duì)象) 就能的到j(luò)query對(duì)象
如果jquery對(duì)象想要使用原生的方法屬性，需要將jquery的對(duì)象轉(zhuǎn)為原生DOM對(duì)象
jquery對(duì)象[0]
??console.log($('div:first')[0]);
需要將jquery對(duì)象轉(zhuǎn)為原生DOM對(duì)象
??$('div:first')[0].onmouseover = function(){
????$(this).css('background-color','green');
??}
元素操作
- 創(chuàng)建一個(gè)元素 ?
var div = $('<div></div>')
- 內(nèi)部插入元素
// 向 div 元素中插入一個(gè) p 元素顿仇，放在最后
$('div').append($('<p></p>'))
// 把 p 元素插入到 div 中去淘正，放在最后
$('<p>hello</p>').appendTo($('div'))
// 向 div 元素中插入一個(gè) p 元素摆马，放在最前
$('div').prepend($('<p></p>'))
// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))
- 外部插入元素
// 在 div 的后面插入一個(gè)元素 p
$('div').after($('<p></p>'))
// 在 div 的前面插入一個(gè)元素 p
$('div').before($('<p></p>'))
// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('<p></p>'))
// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('<p></p>'))
- 替換元素
// 把 div 元素替換成 p 元素
$('div').replaceWith($('<p></p>'))
// 用 p 元素替換掉 div 元素
$('<p></p>').replaceAll($('div'))
- 刪除元素
// 刪除元素下的所有子節(jié)點(diǎn)
$('div').empty()
// 把自己從頁面中移除
$('div').remove()
- 克隆元素
// 克隆一個(gè) li 元素
// 接受兩個(gè)參數(shù)
// ??參數(shù)1： 自己身上的事件要不要復(fù)制鸿吆，默認(rèn)是 false
// ??參數(shù)2： 所有子節(jié)點(diǎn)身上的事件要不要復(fù)制囤采，默認(rèn)是跟隨第一個(gè)參數(shù)
$('li').clone()
??
?
?
?
