2021-09-14 map set jquery

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('<span>hello world</span>')

//获取元素的 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></div>')


- 内部插入元素


// 向 div 元素中插入一个 p 元素，放在最后

$('div').append($('<p></p>'))


// 把 p 元素插入到 div 中去，放在最后

$('<p>hello</p>').appendTo($('div'))


// 向 div 元素中插入一个 p 元素，放在最前

$('div').prepend($('<p></p>'))


// 把 p 元素插入到 div 中去，放在最前

$('<p>hello</p>').prependTo($('div'))


- 外部插入元素


// 在 div 的后面插入一个元素 p

$('div').after($('<p></p>'))


// 在 div 的前面插入一个元素 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'))


- 删除元素



// 删除元素下的所有子节点

$('div').empty()


// 把自己从页面中移除

$('div').remove()



- 克隆元素


// 克隆一个 li 元素

// 接受两个参数

//   参数1： 自己身上的事件要不要复制，默认是 false

//   参数2： 所有子节点身上的事件要不要复制，默认是跟随第一个参数

$('li').clone()

  

 

 

 

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342

推荐阅读更多精彩内容

  • 学习总结
    1．项目所遇到的问题集合 [if !supportLists]1.[endif]设置div的背景阴影 用：box-...
    一笑奈何_3bea阅读 1,156评论 0赞 0
  • 前端基础知识总结-1
    #前端基础 # ## JavaScript基础 ## ###渲染机制与变量 ### script代码为什么放到bo...
    hmg阅读 232评论 1赞 1
  • ES6-2
    [if !supportLists]第一章 [endif]ES2015 ECMAScript 6（简称ES6）是于...
    海绵宝宝_b8a2阅读 543评论 0赞 0
  • Jquery
    [if !supportLists]第一章 [endif]介绍 [if !supportLists]一、[endi...
    海绵宝宝_b8a2阅读 260评论 0赞 0
  • 前端
    1.javascript的typeof返回哪些数据类型 object number function boolea...
    洛珎阅读 247评论 0赞 0