• 关于

    多元素选择器

    的搜索结果

回答

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 层叠选择器: $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器: $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) $("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素 $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 $("td:gt(4)") 选择td元素中序号大于4的所有td元素 $("td:ll(4)") 选择td元素中序号小于4的所有的td元素 $(":header") $("div:animated") 内容过滤选择器: $("div:contains('John')") 选择所有div中含有John文本的元素 $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 $("div:has(p)") 选择所有含有p标签的div元素 $("td:parent") 选择所有的以td为父节点的元素数组 可视化过滤选择器: $("div:hidden") 选择所有的被hidden的div元素 $("div:visible") 选择所有的可视化的div元素 属性过滤选择器: $("div[id]") 选择所有含有id属性的div元素 $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 $("input[name*='man']") 选择所有的name属性包含'news'的input元素 $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器: $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("div span:first-child") 返回所有的div元素的第一个子节点的数组 $("div span:last-child") 返回所有的div元素的最后一个节点的数组 $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 表单元素选择器: $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button $(":text") 选择所有的text input元素 $(":password") 选择所有的password input元素 $(":radio") 选择所有的radio input元素 $(":checkbox") 选择所有的checkbox input元素 $(":submit") 选择所有的submit input元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $(":button") 选择所有的button input元素 $(":file") 选择所有的file input元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器: $(":enabled") 选择所有的可操作的表单元素 $(":disabled") 选择所有的不可操作的表单元素 $(":checked") 选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个 name 为”S_03_22″的input text框的上一个td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始,并且不是以”_R”结尾的 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一个名为 radio_01的radio所选的值 $(”input[@ name =radio_01][@checked]“).val(); $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 例子:找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点 例子:匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 例子:匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 例子:找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ]
小旋风柴进 2019-12-02 02:13:02 0 浏览量 回答数 0

回答

的确 angular.element 不支持 wrapAll 方法,以下是我在网上找到的 angular.element 的支持方法,可供参考。addClass() - 为每个匹配的元素添加指定的样式类名after() - 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append() - 在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone() - 创建一个匹配的元素集合的深度拷贝副本contents() - 获得匹配元素集合中每个元素的子元素,包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data() - 在匹配元素上存储任意相关数据detach() - 从DOM中去掉所有匹配的元素empty() - 从DOM中移除集合中匹配元素的所有子节点eq() - 减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代hasClass() - 确定任何一个匹配元素是否有被分配给定的(样式)类html() - 获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器prepend() - 将参数内容插入到每个匹配元素的前面(元素内部)prop() - 获取匹配的元素集中第一个元素的属性(property)值ready() - 当DOM准备就绪时,指定一个函数来执行remove() - 将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)removeAttr() - 为匹配的元素集合中的每个元素中移除一个属性(attribute)removeClass() - 移除集合中每个匹配元素上一个,多个或全部样式removeData() - 在元素上移除绑定的数据replaceWith() -`用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text() - 得到匹配元素集合中每个元素的合并文本,包括他们的后代toggleClass() - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类triggerHandler() - 为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val() - 获取匹配的元素集合中第一个元素的当前值wrap() - 在每个匹配的元素外层包上一个html元素
a123456678 2019-12-02 02:06:31 0 浏览量 回答数 0

回答

其实你从浏览器的角度来考虑这件事情,便不会有疑问了。假如浏览器支持父级或者前面兄弟元素选择器的话,就不得不在渲染到当前元素时,倒回去找到特定的元素,重新渲染。因为选择器是可以组合的,甚至还会造成很多其它元素也需要重新渲染(想象.someClass:parent div),这样带来的reflow和repaint会造成难以估量的性能问题,甚至计算盒模型的栈保不齐都要溢出。所以自然不会有类似的选择器出现了。
a123456678 2019-12-02 02:22:25 0 浏览量 回答数 0

回答

query事件绑定有2种方式,1种是直接绑定在所选择的dom元素上,这种方式,当你替换dom元素的时候,就不生效了,打个比方,你养了只鹦鹉,你教会它跟着你说hello,这个时候别人把你的鹦鹉换了一只了,新的鹦鹉无论你怎么说hello也不会有反应的,另1钟是事件代理或者叫事件委托,事件绑定的元素并不是触发的元素,而是其父元素,这时候只要父元素没被替换掉,子元素不管怎么替换,只要符合开始绑定的选择器,就可以触发2种写法的区别,在老版本里面有很多种,1.7以后,推荐统一用on,在on方法的参数内不写选择器是第1种,写虚增其则是第2种
小旋风柴进 2019-12-02 02:24:10 0 浏览量 回答数 0

问题

前端小白入门JQuery基础 【新手百问合集】

关于jquery基础教程中关于内部函数问https://yq.aliyun.com/ask/20218jquery这段代码如何只用一个Css函数来写?https://yq.aliyun.com/ask/34385jquery怎么多值运算 ...
马铭芳 2019-12-01 20:09:05 6738 浏览量 回答数 5

问题

前端小白入门JQuery基础【新手百问合集】

快来看看小编为大家整理出来的一些关于JQuery基础问答,看看是否能帮到你呢?关于jquery基础教程中关于内部函数问题https://yq.aliyun.com/ask/20218jquery这段代码如何只用一个Css函数来写?https...
游客886 2019-12-01 20:09:03 1237 浏览量 回答数 1

回答

概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。 参考文档中 选择器 部分获取更多用于 expression 参数的 CSS 语法的信息。 参数 selector,[context]String,Element,/jQueryV1.0selector:用来查找的字符串 context:作为待查找的 DOM 元素集、文档或 jQuery 对象。 elementElementV1.0一个用于封装成jQuery对象的DOM元素 objectobjectV1.0一个用于封装成jQuery对象 elementArrayElementV1.0一个用于封装成jQuery对象的DOM元素数组。 jQuery objectobjectV1.0一个用于克隆的jQuery对象。 jQuery()V1.4返回一个空的jQuery对象。 示例 描述:找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 jQuery 代码:$("div > p");描述:设置页面背景色。 jQuery 代码:$(document.body).css( "background", "black" );描述:隐藏一个表单中所有元素。 jQuery 代码:$(myForm.elements).hide()描述:在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码:$("input:radio", document.forms[0]);描述:在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码:$("div", xml.responseXML);
a123456678 2019-12-02 03:09:12 0 浏览量 回答数 0

回答

bind: 绑定事件,对新添加的事件不起作用,方法用于将一个处理程序附加到每个匹配元素的事件上并返回 jQuery 对象。 live: 方法将一个事件处理程序附加到与当前选择器匹配的所有元素(包含现有的或将来添加的)的指定事件上并返回 jQuery 对象。 delegate: 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素(现有的或将来的)的一个或多个事件上。
茶什i 2019-12-02 03:21:17 0 浏览量 回答数 0

回答

在浏览器中解析后的html文件中是存在span的,而文本框的input也是在span中,所以需要这样选择$("#TxtClientName").next("span")是获取id为TxtClientName同级的后面span节点$("input",$("#TxtClientName").next("span"))是表示选择input元素和获取id为TxtClientName同级的后面span元素,逗号分隔多个选择器
吴孟桥 2019-12-02 02:27:48 0 浏览量 回答数 0

问题

2.2.2.1浏览器

浏览器 [size=; font-size: inherit,inherit]打开网页[size=; font-size: inherit,inherit] 用于操作内部浏览器打开一个新的网页,或...
福利达人 2019-12-01 21:58:36 2466 浏览量 回答数 0

回答

var sele = selector.replace(/s+/, ' ').split(' '); //为什么要空格去替换空格呢?这个是这则,s代表空字符不一定是空格,r n,t这种都算,或者传递多个空格统一替换为1个空格,防止split分割后得到多个空项isGet代表传入的选择器是否正确,有匹配的项目,没有就返回nullif (!isGet) { ele = null; }这个是样式选择器,传入类型.xxxx的值,不懂你的uniqArray怎么写的,应该是将元素的样式变为字符串之类的,然后用元素的样式查询传入的选择器(要去掉第一个点内容,元素样式没有电)的是否在其中(.indexOf()!=-1) case '.': for (var j = 0; j < eleLen; j++) { var name = uniqArray(ele[j].className.split(' ')); if (name.indexOf(sele[i].substring(1)) !== -1) { //括号中内容的意思?? ele = ele[j]; isGet = true; break; } } break;
小旋风柴进 2019-12-02 02:14:36 0 浏览量 回答数 0

回答

其实,没你说的那么复杂,这里就是一个优先级和继承的问题继承:如果父元素上设置了能用于继承的样式,而子元素上又没定义相同的样式,那么就会直接父元素的,比如像 font-size、background等;有些样式是不能继承的,比如border、padding等;优先级:如果针对同一个元素在样式表中设置了多个选择器操作它时,那么在优先级相同的情况下,最后设置的会覆盖掉前面所有的设置,而且元素本身设置的样式优先级也会高于继承的样式;说一下优先级的规则:id选择的优先级为 0 1 0 0class选择的优先级为 0 0 1 0ele 选择的优先级为 0 0 0 1继承的样式是没有优先级的这里我只是说了三个常见的优先级,更多优先级规则LZ可以去看看css权威指南(第二版);再回到你的问题当中table设置了背景色,那子元素td会直接继承过来,但是,又针对某一个td设置了一个class="red",跟据上面的优先级规则,其他td是没有优先级的,只是单纯的继承了table的样式,而class="red的这个td的优先级为 0010,固优先级最高,所以应用之;最后补充一句:优先级相加即使大于10也不会向前进一如:0 0 1 0 大于 0 0 0 15
a123456678 2019-12-02 02:22:20 0 浏览量 回答数 0

问题

jquery 选择器 去掉 首尾元素

$pagecontainer.children()这样得到的是一个div下面的多个div节点数组,我想要排除这个数组中的第一个和最后一个元素也就是直接不选取这2个元素我是这样写的,但是报错!$pagecontainer.children("...
a123456678 2019-12-01 20:18:40 813 浏览量 回答数 3

回答

从需求入手进行分析:     如果想实现的样式效果是多个div都具有同样样式,给多个div标签赋予相同的class名,可以达到同类class样式同时控制的效果     如果想实现的是div中嵌套的div中每个层级嵌套的样式都具有其各自的样式,则需要引入其他的“选择器”配合class的类选择器来分别控制     多个div的关系不是嵌套的是混合的或者是并列的话,同样在Css操作标签时需要结合其他的选择器来实现对某一div的精确控制 从代码运用的角度来纠错: 使用class时注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用 确定CSS在控制标签时,标签元素正确继承属性 确认CSS代码中的样式属性代码正确,没有使用不存在的属性,比如把控制文字独有的属性错用到了块元素的属性控制上 “答案来源于网络,供您参考” 希望以上信息可以帮到您!
牧明 2019-12-02 02:17:40 0 浏览量 回答数 0

问题

TW自动化测试时遇到的脚本录制问题及解决方法?报错

自动化测试工具TestWriter使用时遇到的脚本录制问题及解决方法如下,欢迎大家一起沟通交流~ 1Web 1.1如何使用浏览器调试检查Xpath 1) IE9及以上浏览器。在被测页面按F12打开开发人员工...
爱吃鱼的程序员 2020-06-08 14:10:16 0 浏览量 回答数 1

回答

1、轻量级 JQuery 非常轻巧,采用 Dean Edwards 编写的 Packer 压缩后,大小不到 30KB,如果使用 Min 版并且在服务器端启用 Gzip 压缩后,大小只有 18KB。 gzip: 每天一个 linux 命令(32):gzip 减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间。gzip 是在 Linux 系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用。gzip 不仅可以用来压缩大的、较少使用的文件以节省磁盘空间,还可以和 tar 命令一起构成 Linux 操作系统中比较流行的压缩文件格式。据统计,gzip 命令对文本文件有 60%~ 70%的压缩率。 2、强大的选择器 JQuery 允许开发者使用从 CSS1 到 CSS3 几乎所有的选择器,以及 JQuery 独创的高级而且复杂的选择器,另外还可以加入插件使其支持 XPath 选择器,甚至开发者可以编写属于自己的选择器。由于 JQuery 支持选择器这一特性,因此有一定 CSS 经验的开发人员可以很容易的切入到 JQuery 的学习中来。 XPath: XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。 XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 都构建于 XPath 表达之上。 因此,对 XPath 的理解是很多高级 XML 应用的基础。 3、出色的 DOM 操作的封装 JQuery 封装了大量常用的 DOM 操作,使开发者在编写 DOM 操作相关程序的时候能够得心应手。JQuery 轻松地完成各种原本非常复杂的操作,让 JavaScript 新手也能写出出色的程序。 4、可靠的事件处理机制 JQuery 的事件处理机制吸收了 JavaScript 专家 Dean Edwards 编写的事件处理函数的精华,是的 JQuery 在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery 也做得非常不错。 5、完善的 Ajax JQuery 将所有的 Ajax 操作封装到一个函数$.ajax()里,使得开发者处理 Ajax 的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和 XMLHttpRequest 对象的创建和使用的问题。 6、不污染顶级变量 JQuery 只建立一个名为 JQuery 的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是 JQuery 可以与其他 JavaScript 库共存,在项目中放心地引用而不需要考虑到后期的冲突。 7、出色的浏览器兼容性 作为一个流行的 JavaScript 库,浏览器的兼容性是必须具备的条件之一。JQuery 能够在 IE6.0+,FF 2+,Safari2.+和 Opera9.0+下正常运行。JQuery 同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。 8、链式操作方式 JQuery 中最有特色的莫过于它的链式操作方式——即对发生在同一个 JQuery 对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得 JQuery 的代码无比优雅。 9.隐式迭代 当用 JQuery 找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery 里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。 10、行为层与结构层的分离 开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使 JQuery 开发人员和 HTML 或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在 HTML 代码中寻找某些函数和重复修改 HTML 代码。 11、丰富的插件支持 JQuery 的易扩展性,吸引了来自全球开发者来编写 JQuery 的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。 12、完善的文档 JQuery 的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱 JQuery 的团队都在努力完善 JQuery 中文文档,例如 JQuery 的中文 API。 13、开源 JQuery 是一个开源的产品,任何人都可以自由地使用并提出修改意见。
茶什i 2019-12-02 03:21:37 0 浏览量 回答数 0

回答

浏览器通过优先级规则,判断元素展示哪些样式。优先级通过 4 个维度指标确定,我们假定以a、b、c、d命名,分别代表以下含义: a表示是否使用内联样式(inline style)。如果使用,a为 1,否则为 0。 b表示 ID 选择器的数量。 c表示类选择器、属性选择器和伪类选择器数量之和。 d表示标签(类型)选择器和伪元素选择器之和。 优先级的结果并非通过以上四个值生成一个得分,而是每个值分开比较。a、b、c、d权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。所以,如果b的值不同,那么c和d不管多大,都不会对结果产生影响。比如0,1,0,0的优先级高于0,0,10,10。 当出现优先级相等的情况时,最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则(无论是在该文件内部还是其它样式文件中),那么最后出现的(在文件底部的)样式优先级更高,因此会被采纳。 在写样式时,我会使用较低的优先级,这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要,这样使用者就不需要通过非常复杂的优先级规则或使用!important的方式,去覆盖组件的样式了。
茶什i 2019-12-02 03:17:02 0 浏览量 回答数 0

问题

测试脚本自动生成之利器 TestDesigner

UIAutomator是一套大家喜闻乐见的自动化测试框架,可以通过选择器(UiSelector)对各种UI元素的执行操作,从而实现自动化测试。 手动方式编写UIAutomator的测试脚本的过程是比较枯燥的...
yarx 2019-12-01 21:42:08 1815 浏览量 回答数 2

回答

浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。 重绘 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。 回流 回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。 <body> <div class="error"> <h4>我的组件</h4> <p><strong>错误:</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body> 在上面的HTML片段中,对该段落(p标签)回流将会引发强烈的回流,因为它是一个子节点。这也导致了祖先的回流(div.error和body – 视浏览器而定)。此外,h5和ol也会有简单的回流,因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。 回流必定会发生重绘,重绘不一定会引发回流。 浏览器优化 现代浏览器大多都是通过队列机制来批量更新布局,浏览器会把修改操作放在队列中,至少一个浏览器刷新(即16.6ms)才会清空队列,但当你获取布局信息的时候,队列中可能有会影响这些属性或方法返回值的操作,即使没有,浏览器也会强制清空队列,触发回流与重绘来确保返回正确的值。 主要包括以下属性或方法: - offsetTop、offsetLeft、offsetWidth、offsetHeight - scrollTop、scrollLeft、scrollWidth、scrollHeight - clientTop、clientLeft、clientWidth、clientHeight - width、height - getComputedStyle() - getBoundingClientRect() 所以,我们应该避免频繁的使用上述的属性,他们都会强制渲染刷新队列。 减少重绘与回流 CSS 使用 transform 替代 top使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)避免使用table布局,可能很小的一个小改动会造成整个 table 的重新布局。尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围,使其影响尽可能少的节点。 避免设置多层内联样式,CSS 选择符从右往左匹配查找,避免节点层级过多。 <div> <a> <span></span> </a> 对于第一种设置样式的方式来说,浏览器只需要找到页面中所有的 span 标签然后设置颜色,但是对于第二种设置样式的方式来说,浏览器首先需要找到所有的 span 标签,然后找到 span 标签上的 a 标签,最后再去找到 div 标签,然后给符合这种条件的 span 标签设置颜色,这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器,然后对于 HTML 来说也尽量少的添加无意义标签,保证层级扁平。 - 将动画效果应用到position属性为absolute或fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流,同时,控制动画速度可以选择 requestAnimationFrame,详见探讨 requestAnimationFrame。 - 避免使用CSS表达式,可能会引发回流。 - 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change、video、iframe等标签,浏览器会自动将该节点变为图层。 - CSS3 硬件加速(GPU加速),使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。 2. Javascript - 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。 - 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。 - 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
九旬 2020-05-24 11:22:47 0 浏览量 回答数 0

回答

其实你用审查元素orFireBug看的话你会发现其实input[2](姑且让我这么称呼它)的实际width是100%的,而不是你所谓的默认宽度。这里就要问了,为什么明明width:50px设置在后面,反而得到的是前面的width:100%这个值呢?这里需要注意的是类似权重(原谅我,我也不太清楚这个应该怎么称呼)的东西CSS选择器的优先级。仔细看你的CSS你会看到你设置width:100%的标签用了input.text两个标签,而设置width:50px只用了.input一个标签。这样做,无形中就把input.text的权重增大了,也就是说把它变得更优先了,所以解析器默认使用了width:100%这个参数。好了,到这里,给你一个意见,把.input改成.input.text,看看会发生什么?解决了这个,我们来继续看看问题。为什么width:100%参数生效了,可是宽度还是默认的呢?这只有一个可能,那就是包裹它的标签的宽度有问题。我们往上看一下,发现你对包裹input标签的div父标签设置了float:left这个属性。通过搜索,我们会发现,float参数具有破坏div标签宽度的作用(搜索了一下,发现很多专题讲述float的都很复杂,这里给一个直接简单的地址:http://my.oschina.net/jing31/blog/6601)。你又继续问了一个问题,为何这里的100%和auto是一样的效果呢。这里就要对100%进行解释。width为100%的话实际上应该理解为宽度为其父元素的100%宽度。但是我们又知道,父元素的宽度被float属性破坏了,其实际宽度应该是其子元素被撑大后的宽度。也就是说width:100%找不到比较对象了,不知道是谁的100%了(这里可能理解的不是那么准确)。所以浏览器解释成了auto。这里,你可以试验的将width:100%修改成width:300px,看看会发生什么?或者你在div父标签中填充点文字进去,看看又会发生什么?再次新加的内容可以很好的看上一段粗体的这个解释,应该是正常的情况。由于内部有文字所以div的宽度存在了基数,有了比较对象。没有文字的情况下,你可以这么理解,父元素的宽度靠子元素决定,子元素的宽度靠父元素决定,然后陷入死循环,然后浏览器疯了,然后浏览器就傲娇了,不知所措了,就给了默认的值了(这种情况应该挺正常的吧←_←)。好了,到这里问题应该解决了。最后结果是width:100%优先级高于width:50px而应用到了标签中,但是由于父标签的width变成了最小,所以被包裹的input也变成了默认的了。这里在给个意见,如果把父标签的float参数取消,看看又会发生什么呢?
a123456678 2019-12-02 02:20:37 0 浏览量 回答数 0

问题

随机算法之水塘抽样算法 5月27日 【今日算法】

我最近在 LeetCode 上做到两道非常有意思的题目,382 和 398 题,关于水塘抽样算法(Reservoir Sampling),本质上是一种随机概率算法...
游客ih62co2qqq5ww 2020-05-27 14:01:18 2 浏览量 回答数 0

问题

UI自动化体系建设的创新实践

在云效持续集成持续交付专场直播中,阿里资深研发工程师开风为大家带来了《分层自动化之UI自动化体系建设》分享,他主要从UI自动化之痛和UI自动化体系建设之创新实践两部分,详细讲解了云效团队在UI自动化...
云效平台 2019-12-01 20:57:08 2984 浏览量 回答数 0

问题

问 js和jq那个比较重要。

jq只是js的一个框架,但是jq的dom选择器实在是太方便了,我很讨厌很js 的documentBy来选择dom元素,但是jq不是什么公司都要用的,有些公司甚至要求都用js写,但是jq的发展不就是为了让js代码写起来更加方便吗。为什么很多公...
a123456678 2019-12-01 20:20:50 1077 浏览量 回答数 2

问题

UI 自动化是什么?

UI 自动化是 Web 页面自动化测试的解决方案,可以用来测试应用的前端页面。自动化插件能够记录下应用的界面功能或流程,并用于进行自动化测试。 UI 自动化主要包括在线脚本录制、脚本调试与维护等功能。脚本可以在本...
猫饭先生 2019-12-01 21:05:48 844 浏览量 回答数 0

回答

jQuery 的实现原理 var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context); }; 1)jQuery 采用的是构造函数模式进行开发的,jQuery 是一个类 2)上面说的常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在 jQuery.prototype 上的 ->只有 jQuery 的实例才能使用这些方法 2、选择器/筛选 1)我们的选择器其实就是创造 jQuery 类的一个实例 ->获取页面中元素用的 jQuery(); -> $() $()就是 jQuery 的选择器,就是创建 jQuery 这个类的一个实例 2)执行的时候需要传递两个参数 selector -> 选择器的类型 一般都是string类型 context -> 获取的上下文 第二个参数一般不传,不传默认为document $("#div1") $(".box") $("#div1 span") -> $("span", div1) console.log($("#div1 span:first")) 3)通过选择器获取的是一个 jQuery 类的实例->jQuery 对象 console. log($( #div1")) [jQuery对象的私有的属性] $("#div1")[0] -> div1这个元素对象 S(#div1").selector -> "#div1" S(#div1").context -> document ("#div1").length-)1 获取元素的个数 [jQuery对象的公有的属性] jQuery.prototype 4)我们获取的是 jQuery 对象(他是 jQuery 的实例)不是我们的原生 js 对象 jQuery:$("#div1") JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法 $("#div1").className = "box"; no document.getElementById("div1").addClass(); 5)互相转化 var $oDiv =$("#div1") var oDiv = document.getElementById("div1") Js->jQuery: $(oDiv).addClass() jQuery->Js: $oDiv[o]/ $oDiv.get(0) 3、核心 $(document).ready(function() { //HTML结构加载完成就执行这里的代码 }); $(function() {}); each $("selector").each( function(){})遍历获取的这些元素 jQuery.prototype $.each(ary)遍历数组中的每一项 jQuery.each 我们的 jQuery 不仅仅是一个类(在它的原型上定义了很多的方法,每一个 jQuery 的实例都可以使用这些方法),它还是一个普通的对象,在 jQuery 本身的属性中还增加了一系列的方法:Ajax、each、工具 $.unique(ary) $.ajax() $.extend()->把 jQuery当做一个对象,给它扩展属性->完善类库 $.fn.extend()->在 jQuery的原型上扩展属性和方法->编写 jQuery插件 $.extend({ a: function(){ } }) $.a() $.fn.extend({ b: function(){ } }) $().b()
茶什i 2019-12-02 03:21:18 0 浏览量 回答数 0

回答

重置(Resetting): 重置意味着除去所有的浏览器默认样式。对于页面所有的元素,像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。 标准化(Normalizing): 标准化没有去掉所有的默认样式,而是保留了有用的一部分,同时还纠正了一些常见错误。 当需要实现非常个性化的网页设计时,我会选择重置的方式,因为我要写很多自定义的样式以满足设计需求,这时候就不再需要标准化的默认样式了。
茶什i 2019-12-02 03:16:46 0 浏览量 回答数 0

问题

这几道经典例题帮你轻松搞透贪心算法 6月17日 【今日算法】

贪心算法概念叙述 运用贪心算法求解问题时,会将问题分为若干个子问题,可以将其想象成俄罗斯套娃,利用贪心的原则从内向外依次求出当前子问题的最优解,也就是该算法不会直接从整体考虑问题&#...
游客ih62co2qqq5ww 2020-06-18 15:46:11 1 浏览量 回答数 1

回答

给父元素设置 margin-right: -25px; 即可,不需要 overflow: hidden; 。也可以用 CSS3 的伪类选择器(IE 8 不支持):.child { margin-right: 25px; } .child:nth-child(3n) { margin-right: 0; }前提是你得明确每行放几个,上边假设的是三个。如果想响应式,在设置多个宽度百分比的时候,记得同步修改。
杨冬芳 2019-12-02 02:35:47 0 浏览量 回答数 0

回答

这个内容有些多,但是不复杂,可以给你解析一下:1、获取表格中每行的内容(这个可以用Jquery通过元素选择器进行获取),将所有内容拼接成一个Json格式的字符串;2、Ajax将值传到后台;3、后台获取到传过去的Json数据;4、解析Json数据;5、将得到的数据插入到数据库。分解开来其实也是挺清晰的。一点一点来,加油!
杨冬芳 2019-12-02 03:04:45 0 浏览量 回答数 0

回答

就好比问,汉语中常用写作方法有多少种,怎么分类。 算法按用途分,体现设计目的、有什么特点 算法按实现方式分,有递归、迭代、平行、序列、过程、确定、不确定等等 算法按设计范型分,有分治、动态、贪心、线性、图论、简化等等 作为图灵完备的语言,理论上”Java语言“可以实现所有算法。 “Java的标准库'中用了一些常用数据结构和相关算法. 像apache common这样的java库中又提供了一些通用的算法-------------------------排序是程序开发中一种非常常见的操作,对一组任意的数据元素(或记录)经过排序操作后,就可以把他们变成一组按关键字排序的有序队列。 对一个排序算法来说,一般从下面3个方面来衡量算法的优劣: 时间复杂度:它主要是分析关键字的比较次数和记录的移动次数。 空间复杂度:分析排序算法中需要多少辅助内存。 稳定性:若两个记录A和B的关键字值相等,但是排序后A,B的先后次序保持不变,则称这种排序算法是稳定的;反之,就是不稳定的。 就现有的排序算法来看,排序大致可分为内部排序和外部排序。如果整个排序过程不需要借助外部存储器(如磁盘等),所有排序操作都是在内存中完成,这种排序就被称为内部排序。 如果参与排序的数据元素非常多,数据量非常大,计算无法把整个排序过程放在内存中完成,必须借助于外部存储器(如磁盘),这种排序就被称为外部排序。 外部排序最常用算噶是多路归并排序,即将原文件分解称多个能够一次性装入内存的部分,分别把每一部分调入内存完成排序,接下来再对多个有序的子文件进行归并排序。 就常用的内部排序算法来说,可以分为以下几类: 选择排序(直接选择排序,堆排序) 交换排序(冒泡排序,快速排序) 插入排序(直接插入排序,折半插入排序,Shell排序) 归并排序 桶式排序 基数排序
青衫无名 2019-12-02 01:17:52 0 浏览量 回答数 0

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT