下面是js获取数组最后一个元素的三种方式 一、JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素。...注意:pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。...(arr);//["js", "JavaScript"] 二、数组的 length 属性 var arr = new Array("js","JavaScript","jQuery"); var end...但是返回的数据类型是 array 不是 string 这点要注意一下!...var arr = new Array("js","JavaScript","jQuery"); var end = arr.slice(-1); console.log(end);//["jQuery
本文介绍js中数组的at函数,属于比较简单的知识普及性文章,难度不大。 0x00 首先,我们可以思考如下一个问题,如果要获取一个数组的最后一个元素(这是很常用的操作),我们应该怎么做?...相信大部分人能够想到的代码是这样的: let last = array[ array.length - 1]; 嗯,这是最常用的获取数组最后一个元素的方式,依此类推获取倒数第二个,第三个的方式类似。...当然除了这种方式之外,还有其他的方式,比如: let last = array.slice(-1)[0] 先通过slice获取后面一个元素的数组,然后通过下标0获取最后一个元素。...这就让人羡慕python里面的数组操作,可以通过负索引的方式获取最后一个元素,代码如下: last = array[-1] js里面不支持负索引的方式。...不过es6新增了一个at方法,可以获取数组的指定索引的元素,并且支持负索引。负索引从后往前计算,-1表示最后一个,-2 表示倒数第二个,依此类推。 因此试用此方法获取最后一个元素会变得简单很多。
文本俺将跟大家讨论js获取数组最后一个元素多种实现方式。 length 因为数组索引是从0开始,所以我们可以通过访问数组长度减去1,这样就达到了访问最后一个元素的目的。...注 :如果索引的位置非法,那么将返回undefined。...my_array = [1,2,3,4,5]; var last_element = my_array[my_array.length - 1]; // 5 prototype属性 我们可以将访问数组最后一个元素绑定到原型链上...Array.prototype.last = function(){ return this[this.length - 1]; }; }; pop方法 因为pop是用来删除数组最后一个元素...,并且返回的是被删除的元素,所以我们可以直接使用该方法。
为了更好的讲这节的内容,提示一个 JS 处理日期的小技巧,想获取上个月最后一天,只需要设置SetDate参数为0即可。...var endDate = new Date(); //上个月最后一天 endDate.setDate(0); 接着正文开始: 使用 JS 获取当前月的最后一天,咱们通常的思路先获取下个月的第一天,然后在减去一天...,所以打印结果如下: 最后一天:2019/8/31 下午4:10:43 那这样的算法有没有bug,咱们并不确定,所以为了还原现场,现在咱们从2019.01.31一个一个来试试 var date= new...:00 咱们可以看到,我们把 1月31号往后拨一个月在往前减一天,理应得到的是 1月31号,实际得到的是 2月28号,所以咱们写的代码是有bug的。...:2019/1/31 上午12:00:00 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug
各位前端的小伙伴还在用array[array.length - 1]来获取数组最后一位元素的值吗?这里介绍几种比较好用的方法,推荐给大家。.... length-1(入门) const arr = [1, 2, 3, 4]; console.log(arr[arr.length - 1]); // 4 2. slice(-1)[0] 截取数组最后一位...(返回的是个数组) const arr = [1, 2, 3, 4]; console.log(arr.slice(-1)[0]); 3. pop() pop():删除数组最后一位元素并返回被删除的元素...arr.concat(); console.log(arrCopy.pop()); // 4 console.log(arr); // [1, 2, 3, 4] 4. at(index) .at(index): 可以获取到...index索引处的元素(就是这么直接) .at()是ES2022的新语法,目前兼容性还不是很好,慎用!
分享一个用原生JS实现的百叶窗特效,效果如下: 代码实现如下,欢迎大家复制粘贴。 window.onload = function () { //获取列表ul1...var timer = null; //设置一个开关,切换一上一下的变化 var bBtn = true... 最后的最后,渴望变成开使!... 下面是以上代码中引入的运动函数move.js的代码: // move.js
=xxx的div ###子元素选择器 $(“div:first-child”) 匹配是div并且是第一个而且要求元素是子元素 $(“div:last-child”) 匹配是div并且是最后一个而且要求元素是子元素...//插入到某个元素的后面 $("div:eq(1)").after(myh1); //删除元素 删除最后一个div $("div:last").remove(); <...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul...最后一个td里面是一个 删除按钮 nametd.text($("input:eq(0)").val()); agetd.text($("input:eq(1)").val());...,或者从我这里下,无需积分免费下载:jquery-1.4.2.js
> // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red...( "li:eq(1)" ); /* 复制节点 */ // 复制第一个 li,并插入到最后一个 li 的后面 $("li:first").clone()...}); find(选择器) 方法返回被选元素的后代元素,一路向下直到最后一个后代 测试 盘古 蚩尤...last() 过滤最后一个元素 eq(index) 过滤到下标为 index 的元素 not() 除了什么之外的元素 is() 返回布尔,判断是不是这种元素 测试 <...; // 最后一个 li var x = $("li").last().text(); // 下标为 1 的 li var x = $("
方式来获取 2.注意点 js点语法能获取到的属性: (1)行内标准属性 (2)js点语法动态添加的自定义属性 不能获取到的属性: (1)行内自定义属性 (2)行外属性 getAttribute能获取到的属性...liList = document.querySelectorAll("#main li"); //获取元素节点下的所有子节点(元素之间的空格部分可以看作一个没有内容的文本节点)...: 最后一个子节点(元素 文本 注释) 4.lastElementChild:最后一个子元素节点 他们的浏览器兼容问题与兄弟节点一致 我是班长的小迷妹...console.log(ul1.firstElementChild); //我是班长1 //3.获取最后一个子节点 console.log(ul1.lastChild...); //#text 空字符 //4.获取最后一个子元素 console.log(ul1.lastElementChild); //我是班长5
[Python]代码 from datetime import datetime from datetime import timedelta impo...
("uname"); //使用JQ获得 获得ID名称为unam的对象 也就是获取的是一个数组 // Object---[Element,Element,Element,Element..."); //$("ul li").first().css("background-color","green"); //获得最后一个节点 //$...// 匹配所有下于索引值为2的元素 $("ul li:lt(2)").css("background-color","red"); })...","green"); //最后一个 而此选择符将为每个父元素匹配一个子元素 //$("ul li:last-child").css("background-color","red..."); //√ 匹配每一个ul 中的li标签的位置 注意:从1开始的 //$("ul li:nth-child(1)").css("background-color
我们以一个案例的形式进行讲解,假如我们需要遍历的是如下ul标签中的li标签: 北京 上海 ...天津 重庆 一、JS的遍历方式 首先第一种:利用js对象进行遍历 利用js对象的方法进行遍历和我们平常的for循环遍历是一样的思路和解法,...首先我们应该获取到需要遍历的元素标签,然后使用for循环方法对其中存在的标签进行遍历:下面以一个实例来进行讲解。...$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li")...语法格式是:for(元素对象 of 容器对象) 同样是容ul标签中取出li标签元素,代码如下: $(function (message) { // 获取到UI下的所有
标签 li标签 ...); // 最后一个子节点 console.log(ulObj.lastChild); // 最后一个子元素 console.log(ulObj.lastElementChild...); 1、以上前四个,chrome, firefox, IE8 都支持 2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素...src="common.js"> // 获取任意一个父元素的第一个子元素 function getFirstElement...node.nextSibling; } return node; } } // 获取任意一个父元素的最后一个子元素
}); // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li // (3) on可以给未来动态创建的元素绑定事件 // $("ol li").click(function()...案例:发布微博案例 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 点击的删除按钮,可以删除当前的微博留言。 <!...因为ul中的li是JS动态创建的,在页面加载时Docoment中并没有此元素,选择器并不能选取。...你好吗"); }); // 一个会获取焦点,一个不会 $("div").triggerHandler("click"); // $("input").triggerHandler...声明一个数组,保存数据。 先要读取本地存储原来的数据(声明函数 getData()),放到这个数组里面。 之后把最新从表单获取过来的数据,追加到数组里面。
的全局变量和局部变量 **全局变量:在js页面标签中定义一个变量,这个变量在页面中的js部分都可以使用 - 在方法的外部使用,在方法的内部使用,在另一个Script标签使用 **局部变量:在方法内部定义一个变量...("ulid"); //返回的是一个集合 //获取ul下面的子标签,兼容性差 var lis=ulid.childNodes; alert(lis.length); //获取ul下面的子标签,兼容性高...li的父节点 parentNode:父节点 var ul1=li1.parentNode; //得到ul alert(ul1.id); * 子节点 li是ul的子节点 childNodes:得到所有的子节点...,但是兼容性差 firstChild:第一个子节点 //获取ul的第一个子节点 //得到ul var ul1=document.getElementById("ulid"); var li1=ul1.firstChild...; alert(li1.id); // li1 lastChild:最后一个子节点 //获取ul的最后一个子节点 //得到ul var ul1=document.getElementById("ulid
前言 好多天前,领导让我实现一个树形图拖拽插件,这个插件用来描述各部门领导与员工之间的关系,每个父节点显示其子结点数量,拖拽任意一个叶结点上的人到另一个结点,他们之间的关系发生改变,树形图重新渲染。...接下来就跟大家下分享下我实现的这个插件,欢迎各位感兴趣的开发者阅读本文。...难点分析 实现可拖拽树形图 可拖拽树形图的实现,也是本插件的核心功能,根据dom的特定规则构建树,实现拖拽功能,拖拽功能我使用的是JQueryUI提供的方法,获取当前拖拽结点和目标结点的原始dom,重新构建树... 实现JSON转DOM解析器 由于后台返回的是树形...这一部分的实现代码位置:「plugins/treeDrag/js/JsonToDomParser.js」 ❝JSON转DOM的解析器,我搞了好久没弄出来,最后求助了一个网友,成功解决了这个问题,感谢 @
React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。 React和Vue的共性: 使用虚拟DOM。 提供响应式视图组件。...现在有一个简单的React应用程序,它将显示名称列表。没有什么可以写的,但它应该能让你了解React的能力是什么。 特别说明下,react.js的相关课程可以点击这里。...Vue.js Templates(模板) 按照最后一个示例,您将再次创建一个简单的应用程序,它将在浏览器上显示名称列表。 你需要做的第一件事就是创建一个空的index.html文件。...为了给你一个更好的提醒,回想一下使用普通HTML创建名称列表需要什么。一个**包含一些的**元素。在Vue,你要做几乎相同的事情,只有少数的变化增加。 创建一个****。... 现在添加一个空的****。 没什么新鲜的变化,通过增加一个指令,一个自定义的Vue的属性你的****元素。
前言 在网页中,实现列表的升序和降序,是一个比较常见的操作,尤其是在做一些数据栓选表格的时候,按照索引,时间等特定的参数,提供升序和降序排列的功能的 具体示例 sort 原生js 在原生js中主要是操作...DOM,遍历节点,通过removeChild()删除节点,而使用appendChild()添加元素去实现的 代码如下所示 // 排序 function sort() { // 获取父级元素DOM...)" value="降序或升序" /> 分析 上面的示例是先把容器html内容清空,最后,把数组的数据以倒排序的方式遍历并填充到之前的ul容器里面 使用原生js方式就是要遍历DOM节点,然后依赖DOM...对象的属性或方法操作DOM的 Vue版本实现 在Vue里面是操作数据,结合数组的sort方法一个简单的方法就可以实现的,原生js想要实现同样类似的效果,那就得不断的去查找DOM节点,操作节点实现的 <template...,b代表后一个数,做一个差值,就可以判断哪个大,哪个小的 总结 升序和降序在Js中是一个比较常见的操作,做一些简单的排序操作可以基于sort方法实现
二级菜单也就是在一级菜单中的li中再添加一个ul-li结构 A B...} 解释三个重要的css代码: 1.写出一个ul-li菜单时,它会默认垂直排列,而我们需要的是水平的菜单栏,所以需要设置li的浮动:float:left 2.当鼠标悬浮在有二级菜单的一级菜单选项时...,才会出现二级菜单,所以在鼠标不悬浮的情况下,需要把二级隐藏起 来display:none 3.最后,设置li :hover ul 这个意思是,当鼠标悬浮在li上时,li下的ul呈现状态,hover是悬浮的意思...,这是为了在加载网页时,先加载出它的样式,最后加载js动态。...那么注意了,在这里如果你的js代码是放在body中,那么引入jquery文件必须放在js代码之前,浏览器编译html文件时,是从上自下编译的,如果jquery文件放在最后,那么在你的js代码又使用到了jquery
⑥ 此时需要知道小圆圈的索引号, 我们可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定 义属性即可。...③ 图片无缝滚动原理 ④ 把ul 第一个li 复制一份,放到ul 的最后面 ⑤ 当图片滚动到克隆的最后一张图片时, 让ul 快速的、不做动画的跳到最左侧: left 为0 ⑥ 同时num 赋值为0,...点击小圆圈,移动图片 当然移动的是ul // ul 的移动距离 小圆圈的索引号 乘以图片的宽度 注意是负值 // 当我们点击某个小li 就拿到当前小li 的索引号 var...克隆第一张图片(li)放到ul最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 7....点击右侧按钮,小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放 circle++; // 如果 circle == ol.childre.length 说明走到最后我们克隆的这张图片了
领取专属 10元无门槛券
手把手带您无忧上云