首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

5种你未必知道的JavaScript和CSS交互的方法

JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值?...可以的,使用JavaScript可以访问页面中的伪元素。...我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载,而且在加载成功回调函数会给予通知。...当所有的资源都加载,回调函数就会触发,可在回调函数里加载它。非常有用!...一神奇的功能,真的——你不在需要为了防止某个事件会被触发而去检查某个css是否存在。 就是这5给你也许还没有发现的CSS和JavaScript交互的方法。你还有新的发现?分享出来!

89620

腾讯牛逼,连环追问我基础细节!

哈喽,大家好,是千羽。 分享一下来自深圳大学的朋友腾讯TEG二面的面经。...觉得物联网工程可以视为计算机科学的一分支或扩展领域。...冒泡排序的时间复杂度是O(n^2)。 9.有用过哪些设计模式?介绍一下 单例模式(Singleton Pattern):确保一只有一实例,并提供一全局访问点来获取该实例。...渲染进程:每个标签页对应一渲染进程,负责页面的渲染和JavaScript的执行。渲染进程之间是相互隔离的,以防止一面的崩溃影响其他页面。...该方法可以在一对象上定义新的属性或修改现有属性,并返回这个对象。当数据对象的某个属性发生变化时,可以触发相应的操作。

18410
您找到你想要的搜索结果了吗?
是的
没有找到

想进大厂?一起刷 LeetCode 吧!

大致是跟着这个网站的顺序来刷的: https://programmercarl.com/ 因为的方向是前端,所以我用的语言是JavaScript,下边是七道算法题及的解题思路,欢迎小伙伴和我一起刷...出现一次的数字 题目描述: 给定一非空整数数组,除了某个元素出现一次以外,其余每个元素均出现两次。找出那个出现了一次的元素。 说明:你的算法应该具有线性时间复杂度。...进阶: 你可以设计并实现时间复杂度为 O(log n) 的算法解决此问题?...移除元素 题目描述: 给你一数组 nums 和一值val,你需要原地移除所有数值等于val 的元素,并返回移除数组的新长度。...元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。 说明: 为什么返回数值是整数,但输出的答案是数组呢?

27420

大厂面试测试开发岗,需要准备的100道题型

80%是你元素定位的不对,那么多定位方法,一不行换另外一,直接不能定位,先定位父元素,再循环找子元素。一般来说XPATH都能定位到,无非是可阅读性不强。...start() 启动时用的,调用一次 run() 可以调用多次 86、请写一线程安全的单例模型 //Initialization on Demand Holder public class Singleton...94、有两个字符串类型的数字,实现一方法将它们进行相加,并返回相加的数值。...索引会?事务了解?写一SQL 查询语句:给一字段,对其进行从大到小排序,取前十行。...平时的工作中会协助提高数据库的查询效率,会给数据 id 等创建索引;事务开发那边用的比较多,然后举了 ATM 机取款的例子。

89961

CSS 也能实现 if 判断?实现动态高度下的不同样式展现

最近在群里,有小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一值时...这个效果在很多场景都会出现,可以算是一高频场景,那么在今天,我们能否不使用 JavaScript,仅仅凭借 CSS 实现类似于这样的功能呢?...下面,我们通过简单的几句容器查询代码,就可以实现让箭头 ICON,在容器高度超过特定高度的时候才出现: .g-container { container-type: size; container-name...有什么办法让它在出现,一直定位在容器的最下方? 别忘了,CSS 中,还有几个非常有意思的数学函数:min()、max()、clamp(),它们可以有效限定动态值在某个范围之内!...我们可以清楚的看到,当我们往下拖动容器变高的时候,箭头元素是逐渐慢慢向上出现,而不是突然在某一高度下,直接出现,所以在实际使用中,会出现这种 ICON 出现了一半的尴尬场景: 但是,莫慌!

31650

关于事件的前端面试题总结

css3中有哪些属性可以直接影响JS中的事件?(可以讲一下pointer-events和touch-action属性) 问题解答 1.mouseover和mouseenter两事件有什么区别?...下面是在网上找到的点击穿透的现象详细说明: 点击穿透现象有3种: 点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失发现触发了按钮下面元素的click事件。...事件委托是指利用“事件冒泡”,通过指定一事件处理程序,来管理某一型的所有事件。...(可以讲一下pointer-events和touch-action属性) css3中有两属性是可以直接影响到JS中的事件的,他们是pointer-events和touch-action。...pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

1.5K50

前端的核心JavaScript

JavaScript中,变量指的是一可以改变的量。...在JavaScript中,给一变量命名,我们需要遵循以下两面的原则。  (1)变量由字母、下划线、$或数字组成,并且第一字母必须是“字母、下划线或$”。  ...然后定义一判断条件i<n; 只要i小于n就会执行for循环中的程序。最后定义一循环的表达式i++,也就是说,每次循环之后都会进行一次i++。...,不存在返回-1 lastindexof 查询某个元素的最后一索引位置 forEach 遍历数组,会遍历数组的每一元素 filter 过滤数组,根据条件进行过滤,返回一新数组,不影响原数组 map...,如果是-1后退一页面,如果是N则前进或后退N页面 history.length() 保存历史记录的数量 # 事件处理   事件一般是用户对页面的一些“小动作”引起的,例如按下鼠标、移动鼠标等,这些都会触发相应的一事件

1.5K30

JavaScript(十)

DOM 描绘了一层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。 1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,为基本的文档结构及查询提供了接口。...每个节点都有一 childNodes 属性,其中保存着一 NodeList 对象。NodeList 是一种数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。...通过这个属性可以取得当前页面的标题,也可以修改当前页面的标题并反映在浏览器的标题栏中。修改 title 属性的值不会改变 title 元素。...URL 属性中包含页面完整的 URL(即地址栏中显示的 URL),domain 属性中包含页面的域名,而 referrer 属性中则保存着链接到当前页面的那个页面的 URL。...使用 document.createElement() 方法可以创建新元素。这个方法接受一参数,即要创建元素的标签名。

67810

前端优化汇总,到底该不该做?

3、减少DOM元素数量,减少DOM的操作: 减少 DOM 元素数量,合理利用:after、:before等伪,避免页面过深的层级嵌套; 优化javascript性能,减少DOM操作次数(或集中操作),...很多公司初始项目搭建,都申请了一域名,站点的所有内容(html/php/jsp、js、css、img等都放在一域名下),域名拆分主要为了增加浏览器资源请求的并行度即并发问题,让浏览器能同时发起更多的请求...拿出电话,找到某个接头人的号码; 发起 TCP 的 3 次握手 - 2. 接通暗号:A)、你好,你好,是长江一号,请问能听到?B),你好,是长江二号,能听到你讲话,你能听到我说什么?...聊完了,准备告别:A)、(可以是服务端,也可以是客户端)该说的都说完了,你自己看着办吧;B)、好的也说完了;B)、(B紧接着又跟A发了条信息),再见;A)、然后A收到B的话,而B那边已经放下手机挂了...到解析IP,到查询根服务器的一过程,可能会在下一次单独总结出来分享,有兴趣的同学也可以自行先了解一下, 要把一项目做好,每一细节都很重要,希望今天的分享能给大家的工作带来些许帮助,谢谢!

74960

国庆节前端技术栈充实计划(6):Web 应用的 13 优化步骤

非常好的实践范例就像 Goggle Images 的搜索工具一样。点击前面的链接并且滑动页面滚动条就可以看到效果了。 3....Array ids 使得 DOM 操作引擎可以「知道」在什么时候某个节点可以被映射到数组当中的某个元素。...如果你正在运行着一拥有很多虚拟元素的页面(庞大的动态表格)或者可交互式的元素(比如游戏),内存优化可以获得更少的卡顿和更高的帧率。...同构 JavaScript 可以解决这个问题:自从 JavaScript 可以同时运行在客户端和服务器端,这就让在服务器端来执行页面的首次渲染成为可能,先把已渲染的页面发送出去然后再由客户端的脚本接管。...这可以通过使用 CSS 媒体查询来实现。媒体查询告诉浏览器,哪些 CSS 样式表应用在某个特定的显示媒体上。举个例子,用于打印的某些规则可以被赋予比用于屏幕显示更低的优先级。

1.4K30

把99%的程序员烤得外焦里嫩的JavaScript面试题

也就是说,在使用某个函数、之前必须定义,或者说,函数、必须在使用前定义。例如,下面的代码是合法的。...对于函数、等语法元素与定义顺序无关的语言必须至少扫描2遍。这是因为第1遍需要确定语法元素(函数、等)的定义,第2遍才是使用这些语法元素。...经过测试,JavaScript的代码是与定义顺序无关的,也就是说,下面的代码可以正常运行: hello() function hello() { } 很显然,JavaScript解析器至少对代码扫描了2...对于动态语言(如JavaScript),通常是一边扫描一边执行的(并不像Java这样的静态语言,扫描时并不执行,直到生成.class文件才通过JVM执行)。...先给出结论:JavaScript的第1遍扫描处理函数和定义(当然,还有可能处理其他的定义,但本文讨论函数和),JavaScript的第2遍扫描负责处理其他代码。

47620

每天10前端小知识 【Day 10】

前端面试基础知识题 1. es5 中的和es6中的class有什么区别? 在es5中主要是通过构造函数方式和原型方式来定义一,在es6中我们可以通过class来定义。...常见场景 情景一:蒙层点击穿透问题,点击蒙层(mask)上的关闭按钮,蒙层消失发现触发了按钮下面元素的click事件。...所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 单线程就意味着,所有任务需要排队,前一任务结束,才会执行任务。...如果前一任务耗时很长,任务就不得不一直等着。但是如果有些任务很慢时(比如Ajax操作从网络读取数据),还是要等结果在执行任务?于是,有了一种异步任务。...任务队列",某个异步任务可以执行了,该任务才会进入主线程执行。

12210

Chrome开发者工具的11高级使用技巧

强大的屏幕截图 捕获屏幕内容是一非常常见的功能需求,当然非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是,你可以完成以下任务?...然后,我们可以就获得当前页面的完整屏幕截图了。 ? 上面的原始图像实际上非常清晰,只是在这里上传了压缩图像以节省你的流量。...复制变量 你可以JavaScript 变量的值复制到其他地方? 这似乎是不可能完成的任务,但是在 Chrome 浏览器中,有一名为copy的函数可以帮助你实现这个功能。 ?...上面的展示中,在“元素”面板中将某个 div 的位置拖动到其他位置,它在网页上的展示位置就会同步更改。 9....我们可能为一元素编写多个 CSS 伪,并且为了方便我们对这些样式进行测试,我们可以直接在“元素”面板中选择触发或关闭这些样式。 ?

2.2K60

分享一些你可能还没使用的 JavaScript 技巧

== 0) // 计算奇数的立方值 .map((n) => n ** 3); 一眼看上去,上面的程序看起来很不错,但是有一大问题。注意我们是先对数字进行排序,然后再进行筛选的。...== 0) // 对筛选的奇数进行升序排序 .sort((a, b) => a - b) // 计算排序的奇数的立方值 .map((n) => n ** 3); 3、不经常使用reduce函数...} return main(); // 执行main()函数 5、不使用原生的Javascript Javascript内置了一些原生的Javascript可以帮助您轻松创建/实例化URL、Headers...Number(userId):""}`; } 上面的代码很混乱,很可能会出错,并且每次添加其他参数时都需要在最后添加一些规则。通过使用像URL这样的本地,我们可以改进我们的代码。...您知道,这里的URL对象遵循了建造者模式,它是您可以在代码中实现的许多设计模式之一,可以将复杂逻辑隐藏在一单独的位置,并提高可读性。

19120

怎样使用 CSS 进行用户追踪?

找到设备类型信息 媒体查询应该是每一 web 开发者都知道的。有了这个,我们可以让 CSS 代码在某些确定的屏幕条件下执行。所以我们可以为智能手机或平板电脑等,编写自己的查询条件。...追踪元素信息 到目前为止,我们所做的事情就是当用户抵达网站,立即对信息进行分析。当然,我们也可以利用 CSS 对单独的事件做出应对。 如下所示,我们可以使用下面的例子,来分析鼠标悬停或活动事件。...例如,悬停事件几乎适用在每一元素上。因此从理论上来讲,我们可以追踪用户的每一行为。 犹豫计时器 使用更多的代码,我们可以组合这些事件并且了解更多信息,而不仅仅是发生了那些事件。...对于许多网站主来说,更感兴趣的是,用户在看到或悬停在元素上犹豫了多久才点击某个元素。通过下面的代码,我们可以测量用户悬停后点击所花费的时间。...试了几次并测量了时间,最终测量的结果非常精确。 很惊人,不是? 让整个功能更美观 为了不被发现,使用不显眼的 URL 是十分有意义的。最后,每个人都可以看到完整的前端代码。

1.7K20

hibernate二级缓存策略

可以看出来,查询缓存需要打开相关的class缓存。list和iterate方法第一次执行的时候,都是既填充查询缓存又填充class缓存的。...list一样,也是保持一串id,但它不会因为这个表更新过就失效,一collection缓存仅在这个collection里面的元素有增删时才失效。...这样有一问题,如果你的collection是根据某个字段排序的,当其中一元素更新了该字段时,导致顺序改变时,collection缓存里面的顺序没有做更新。...,性能比读写缓存好 事务缓存(transactional):缓存支持事务,发生异常的时候,缓存也能够回滚,支持jta环境,这个没有怎么研究过 读写缓存和不严格读写缓存在实现上的区别在于,读写缓存更新缓存的时候会把缓存里面的数据换成一锁...不过哪天你添加了一相关查询缓存,可能会忘记更新这里的移除代码。如果你的jdbc代码到处都是,在你添加一查询缓存的时候,还知道其他什么地方也要做相应的改动

40110

前端学数据结构 - 链表(Linked List)

假如你设计寻宝游戏,达到指定地点(假如你当前在北京西单)在某个特定地方放置一张纸条,该纸条上还包含了下一你要去的地点(下一站去帽儿胡同)…....(node): 在链表中添加新节点 findNodeAt(position):检索出第 n 节点 remove(position): 移除某个节点 3、优缺点 主要是和数组的对比: 数组的优点是随机查找...,但是在插入或者删除元素时后面的元素都会移动。...链表中如果只是插入和删除操作,那么不会移动元素,所以会节省时间,数组的插入和删除是要移动元素的(插入和删除最后一元素不移动);链表的查找操作是从第一元素开始,所以相对数组要耗时间(数组直接就可以查找到...比如堆栈、队列是频繁操作节点的,虽然使用数组可以实现,但使用链表会更加地合适。 双向列表的优势在于可以正向、逆向迭代查询,使用起来稍微比单向列表要灵活一些,但同时也稍微多占用一些内存。

99120
领券