• 关于

    CSS中的属性选择器

    的搜索结果

问题

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

马铭芳 2019-12-01 20:09:04 2466 浏览量 回答数 15

回答

这个的目的是,给标签以href属性,并不连接到实际的页面。 给标签增加href属性,就意味着以下事情:•:link选择器可以选择到它•这个a标签可以获得焦点(可以通过tab按键访问到,从而屏幕阅读器能够读出背后的内容,增强可访问性)•在浏览器的默认样式表中,有href属性的标签才有cursor:pointer的效果。•优雅降级,在网络连接很差,还没有加载到CSS的时候,依然有手型与正常的link样式。 给标签以href属性,并不连接到实际的页面,还有其他方案。 额外说一下浏览器的默认样式表。 首先看webkit: a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; } a:-webkit-any-link:active { color: -webkit-activelink 而mozilla有这样的默认样式: *|*:-moz-any-link { cursor: pointer; } *|*:-moz-any-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; } 可以看到,webkit和mozilla浏览器都实现了类似于any-link的私有选择符,选取有link语义的标签,比如,有href的。 IE和opera的默认样式表里没有这样的私有选择符,但是有href属性的标签才会应用上标签的样式,若没有href属性,它的样式和一样,仅仅是inline级别的元素。 /*opera的默认样式*/ a { color: #00C; text-decoration: underline; } a:visited { color: #800080; } 我参考的浏览器默认CSS样式表:•IE:http://www.iecss.com/•WebKit在http://trac.webkit.org/browser/trunk/Source/WebCore/css(包括 html.css,fullscreen.css,quirks.css等

杨冬芳 2019-12-02 02:47:22 0 浏览量 回答数 0

回答

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

牧明 2019-12-02 02:17:40 0 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

问题

前端进阶CSS3详解 【新手百问合集】

马铭芳 2019-12-01 20:09:02 6157 浏览量 回答数 2

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1

回答

你需要的阴影DOM内改变CSS TimePicker的TextField价值部分,我们使用的主题属性的附加选择,以不主题所有的文本字段: [part="value"] { :host([theme~="center"]) text-align: center; } 通过@CssImport注释包括CSS ,对文本字段进行主题设置,并将theme属性设置为日期选择器。主题属性传播到日期选择器中使用的文本字段: @CssImport(value = "./styles/my-time-picker-styles.css", themeFor = "vaadin-time-picker-text-field") public class YourViewOrLayout extends Composite<Div> { ... timePicker.getElement().setAttribute("theme", "center"); } 我在这个答案中更详细地解释了它。 回答来源:Stack Overflow

montos 2020-03-24 16:37:32 0 浏览量 回答数 0

回答

对于浏览器引擎而言,并不存在“HTML标签”这回事。其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。 浏览器引擎才是实际存储和渲染DOM节点对象的“大爷”。只是我们无法直接操作浏览器引擎,所以对这个本质并不熟悉(其实也不需要很熟悉,但是得知道)。 DOM节点对象是唯一的,但操作DOM节点对象的数据,却不止有一种方法。例如对于一个图像的宽度: •HTML可以通过的width属性去定义; •JavaScript可以通过element.width去读取和修改; •别忘了CSS,CSS也可以通过width属性去修改。 HTML属性和JavaScript的DOM对象的属性,本质上都只是影响DOM节点对象数据的众多理由之一。 多个原因影响同一个DOM节点的实质数据(多对一),请务必记住这个本质理由。 详细而言: HTML仅仅是文档树和节点对象的一种描述方法。 •浏览器的解析器部分,根据HTML直接把DOM文档树,交给浏览器引擎。 •用其他的方法,也可以描述DOM对象,例如JSX。(当然用其他方法描述DOM对象的时候,生成DOM文档树的过程,肯定会发生相应的修改) JavaScript中的DOM对象,仅仅是一种操作浏览器引擎中DOM对象的接口。 •JavaScript中的DOM对象,和浏览器引擎中存储的DOM节点,本质上不是一个东西。 •用户实际上仅仅有权操作JavaScript中提供的DOM对象。 •JS引擎和浏览器引擎协作,确保了JavaScript的DOM对象,是引擎中DOM节点的一个原样映射。 •这样用户就能通过操作JavaScript的DOM对象,透明的修改引擎中存储的DOM节点。 •而浏览器引擎在本质上,仅仅负责在DOM树更新时承担重新渲染,实际上并不关心JS的存在。 •你如果用其他办法修改了引擎使用的DOM树,也能更新文档结构。(当然这种办法基本上不存在…) 至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同,这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛: // <img src="http://localhost/1.png" alt="alt text" width=640 height=480 /> node.DataSource = "http://localhost/1.png"; node.AlternativeText = "alt text"; node.Dimension.Width = 640; node.Dimension.Height = 480; 虽然这样就真的没法记了。 JavaScript DOM对象属性名和HTML属性名的近似,是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名,然后记忆(或者是踩坑了再反查)JavaScript属性名中少量和HTML不同名的差异点,这是很自然的。

杨冬芳 2019-12-02 02:54:12 0 浏览量 回答数 0

问题

:nth-child(n)选择器中的n可不可以引用到属性中?

a123456678 2019-12-01 19:30:12 1162 浏览量 回答数 1

回答

首先,浏览器从最右边的选择器,即关键选择器(key selector),向左依次匹配。根据关键选择器,浏览器从 DOM 中筛选出元素,然后向上遍历被选元素的父元素,判断是否匹配。选择器匹配语句链越短,浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器,因为它们会匹配大量的元素,浏览器必须要进行大量的工作,去判断这些元素的父元素们是否匹配。 BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. BEM (Block Element Modifier)原则上建议为独立的 CSS 类命名,并且在需要层级关系时,将关系也体现在命名中,这自然会使选择器高效且易于覆盖。 搞清楚哪些 CSS 属性会触发重新布局(reflow)、重绘(repaint)和合成(compositing)。在写样式时,避免触发重新布局的可能。

茶什i 2019-12-02 03:17:09 0 浏览量 回答数 0

回答

浏览器渲染机制 浏览器采用流式布局模型(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

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

回答

查了下,还是有很多好处的...其中一点是防止a标签跳转,一下为其它优点:•:link选择器可以选择到它•这个a标签可以获得焦点(可以通过tab按键访问到,从而屏幕阅读器能够读出背后的内容,增强可访问性)•在浏览器的默认样式表中,有href属性的标签才有cursor:pointer的效果。•优雅降级,在网络连接很差,还没有加载到CSS的时候,依然有手型与正常的link样式。

杨冬芳 2019-12-02 02:55:28 0 浏览量 回答数 0

回答

使用 @import 语句可以导入外联样式表,@import 后需要加上外联样式表相对 路径,用;表示结束。 示例代码: /** button.acss / .sm-button { padding: 5px; } / app.acss **/ @import "./button.acss"; .md-button { padding: 15px; } 导入路径支持从 node_modules 目录载入第三方模块,例如 page.acss: @import "./button.acss"; /相对路径/ @import "/button.acss"; /项目绝对路径/ @import "third-party/page.acss"; /第三方 npm 包路径/ 内联样式 组件上支持使用 style、class 属性来控制样式。 style 属性 用于接收动态样式,样式在运行时会进行解析。行内样式不支持!important 优先 级规则。 class 属性 用于接收静态样式,属性值是样式规则中类选择器名(样式类名)的集合,样式类 名不需要带上.,多个类名间以空格分隔。请静态样式写进 class 中,避免将静态 样式写进 style 中,以免影响渲染速度。 选择器 同 CSS3 保持一致。 注意:  .a-, .am- 开头的类选择器为系统组件占用,不可使用。  不支持属性选择器 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library

KaFei 2020-04-27 14:02:55 0 浏览量 回答数 0

问题

怎样优化网站服务器性能

以子之矛 2019-12-01 21:27:14 16743 浏览量 回答数 3

回答

选择器 E:last-child 匹配父元素的最后一个子元素 E。 E:nth-child(n)匹配父元素的第 n 个子元素 E。 E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。 RGBA 回答此问题,面试官很可能继续问:rgba()和 opacity 的透明效果有什么不同? 多栏布局 新手上路 新手专区 消费警示 交易安全 24小时在线帮助 免费开店 付款方式 快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款 淘宝特色 手机淘宝 旺信 大众评审 B格指南 .mul-col { column-count: 3; column-gap: 5px; column-rule: 1px solid gray; border-radius: 5px; border: 1px solid gray; padding: 10px; } 多背景图 /* backgroundimage:url('1.jpg),url('2.jpg') */ CSS3 word-wrap 属性 p.test { word-wrap: break-word; } 文字阴影 text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); @font-face 属性 Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。 @font-face { font-family: BorderWeb; src: url(BORDERW0.eot); } @font-face { font-family: Runic; src: url(RUNICMT0.eot); } .border { font-size: 35px; color: black; font-family: "BorderWeb"; } .event { font-size: 110px; color: black; font-family: "Runic"; } /* 淘宝网字体使用 */ @font-face { font-family: iconfont; src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); } 圆角 border-radius: 15px; 边框图片 CSS3 border-image 属性 盒阴影 /* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */ 盒子大小 CSS3 box-sizing 属性 媒体查询 CSS3 @media 查询 CSS3 动画 @keyframes @keyframes abc { from { transform: rotate(0); } 50% { transform: rotate(90deg); } to { transform: rotate(360deg); } } animation 属性 /* animation : name duration timing-function delay interation-count direction play-state / 渐变效果 background-image: -webkit-gradient( linear, 0% 0%, 100% 0%, from(#2a8bbe), to(#fe280e) ); CSS3 弹性盒子模型 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 过渡 div { transition: width 2s; -moz-transition: width 2s; / Firefox 4 / -webkit-transition: width 2s; / Safari 和 Chrome / -o-transition: width 2s; / Opera */ } CSS3 变换 rotate()旋转 translate()平移 scale( )缩放 skew()扭曲/倾斜 变换基点 3d 转换

茶什i 2019-12-02 03:16:48 0 浏览量 回答数 0

回答

原生XML扩展 我更喜欢使用其中一个原生XML扩展,因为它们与PHP捆绑在一起,通常比所有第三方库更快,并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现,这是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容,结构和风格。 DOM能够解析和修改现实世界(破碎)的HTML,并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率,但这个时间非常值得IMO。由于DOM是一个与语言无关的接口,因此您可以找到多种语言的实现,因此如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到,一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进,并在途中停在每个节点上。 与DOM一样,XMLReader基于libxml。我不知道如何触发HTML解析器模块,因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM,因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时,可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器,然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml,并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择,但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集,用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时,SimpleXML是一个选项。如果你需要解析破碎的HTML,甚至不要考虑SimpleXml,因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到,PHP手册中还有很多其他的例子。 第三方库(基于libxml) 如果您更喜欢使用第三方库,我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的(使用CSS到XPath转换器)。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON,CSV,JsonML,RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树,并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery(多年未更新) phpQuery是一个服务器端,可链接,CSS3选择器驱动的文档对象模型(DOM)API,基于用PHP5编写的jQuery JavaScript库,并提供额外的命令行界面(CLI)。 另见:https://github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前,我们提供Zend_Dom_Query,它提供了一个统一的界面,可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件,还适用于Web服务和数据库资源。它实现了许多jQuery接口(包括CSS样式的选择器),但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM,以便在所有错误情况下使用异常,而不是PHP警告或通知。为方便起见,他们还添加了各种自定义方法和快捷方式,并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库,用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的,因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式,既有趣又有效。 第三方(不是基于libxml的) 构建DOM / libxml的好处是,您可以获得良好的开箱即用性能,因为您基于本机扩展。但是,并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML! 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签,就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕,解析器本身很慢而且内存很耗。并非所有jQuery选择器(例如子选择器)都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单,灵活的html解析器,允许您使用任何css选择器(如jQuery)选择标签。目标是帮助开发需要快速,简单的方法来废弃html的工具,无论它是否有效!这个项目最初是由sunra / php-simple-html-dom-parser支持的,但支持似乎已经停止,所以这个项目是我对他以前工作的改编。 同样,我不推荐这个解析器。CPU使用率很高,速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误,自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询(比如jQuery - 支持的命名空间) HTML美化器(如HTML Tidy) 缩小CSS和Javascript 排序属性,更改字符大小写,更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔,以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5,但由于HTML5允许的标记,可能会有怪癖。因此,对于HTML5,您要考虑使用专用解析器,例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现,可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后,我们可能会看到更多专用解析器。还有一个W3的博客文章,名为How-To for html 5 parsing,值得一试。 网页服务 如果您不想编写PHP,您也可以使用Web服务。一般来说,我发现这些实用程序很少,但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的,您可以使用正则表达式从HTML中提取数据。通常,不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下,它们只适用于非常特殊的HTML。微小的标记更改,例如在某处添加空格,或添加或更改标记中的属性,可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前,您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好,但它实际上取决于您的用例。 您可以编写更可靠的解析器,但是使用正则表达式编写完整可靠的自定义解析器是浪费时间,因为上述库已经存在并且在此方面做得更好。

游客gsy3rkgcdl27k 2019-12-02 02:09:37 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

回答

样本一 减少 http 请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器。 前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能。 当需要设置的样式很多时设置 className 而不是直接操作 style。 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。 避免使用 CSS Expression(css 表达式)又称 Dynamic properties(动态属性)。 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。 避免在页面的主体布局中使用 table,table 要等其中的内容完全下载之后才会显示出来,显示比 div+css 布局慢。 样本二 减少 HTTP 请求 减少 DOM 操作 避免不必要的重绘与重排 优化 CSS 选择器(从右向左匹配) CSS/JS minify,减少文件体积 开启 Gzip 压缩 将 CSS 放到顶部,JavaScript 放到尾部 压缩图片以及使用 CSS Sprite 使用 CDN 加速,适当进行文件缓存 合理控制 cookie 大小(每次请求都会包含 cookie)

kun坤 2019-12-02 03:23:19 0 浏览量 回答数 0

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

问题

前端面试经典题目合集

小柯卡力多 2019-12-01 22:06:33 14 浏览量 回答数 0

回答

浮动(float)是 CSS 定位属性。浮动元素从网页的正常流动中移出,但是保持了部分的流动性,会影响其他元素的定位(比如文字会围绕着浮动元素)。这一点与绝对定位不同,绝对定位的元素完全从文档流中脱离。 CSS 的clear属性通过使用left、right、both,让该元素向下移动(清除浮动)到浮动元素下面。 如果父元素只包含浮动元素,那么该父元素的高度将塌缩为 0。我们可以通过清除(clear)从浮动元素后到父元素关闭前之间的浮动来修复这个问题。 有一种 hack 的方法,是自定义一个.clearfix类,利用伪元素选择器::after清除浮动。另外还有一些方法,比如添加空的 和设置浮动元素父元素的overflow属性。与这些方法不同的是,clearfix方法,只需要给父元素添加一个类,定义如下: .clearfix::after { content: ""; display: block; clear: both; } 值得一提的是,把父元素属性设置为overflow: auto或overflow: hidden,会使其内部的子元素形成块格式化上下文(Block Formatting Context),并且父元素会扩张自己,使其能够包围它的子元素。

茶什i 2019-12-02 03:17:03 0 浏览量 回答数 0

回答

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

回答

主要回答为什么要使用CSS预处理器。 (下面未指明的预编译预言都是LESS) 1# CSS无法递归式定义 CSS语法不支持递归定义的表达式,所以你没有办法用一个语句定义一个启发式的规则。 比如这样的需求:“.w后面跟着一个数字,这个数字代表着width为百分之多少”(bootstrap的栅格系统就包含12种相对父级宽度的类定义)。 尽管完全是一个规则里定义出的,但你只能这样写CSS: .w1 { width: 1% } .w2 { width: 2% } /** .w3 ... ... .w99 **/ .w100 { width: 100% } 这样将造成很大的冗余,修改费时费力。但如果预编译CSS,就非常简单了 @maxnumber : 100 ; .makeWidthRules(@number) when(@number <= @maxnumber ){ .w@{number}{ width: 1% * @number ; } .makeWidthRules(@number + 1) ; } .makeWidthRules(1) ; 2# CSS的mixin式复用性支持不够 使用纯CSS,我们可以抽象出一些常用的布局CSS属性组合,通过CSS的类组合来达成常见的mixin式复用。 比如这样: <style> .tc { text-align: center; } .m { margin-left: auto; margin-right: auto; } .w50p { width: 50%; } .db { display: block; } </style> <div class="tc m w50p"> <img class="db"> </div> 这种方案有几个问题:•页面重构时,需要频繁修改class name; 这个问题在后端人员掌握着视图层的时候格外突出,前后端耗费很多沟通成本。•要约束上下文的时候非常无力 比如“只有在ul下面的img.db允许是display:block”的规则,写成ul img.db { display: block; }就完全跑偏了——它违背了你创建这个.db类时的本意,造成了代码的可读性和可维护性下降。如果你要改动规则,需要同时修改HTML和CSS,也可能造成新的样式问题。 如果我们想要建立一种代码风格,只允许CSS Class代表UI模块的抽象——改动样式时不至于通知后端改模板——我们就要将上面这个例子的tc m w50p换用一个有实际语义的类名如headwrap,然后在CSS内部实现mixin。——而这正是CSS的短板,CSS体系内的用法只有复制粘贴。 至于如何用预编译语言做mixin,一个非常好的SASS示例由 @nightire 在这个回答里给出,容我摘录一小段: .btn-standout { @extend .btn; @extend .btn-block; @media (max-width: $screen-xs-max) { @include button-size( $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large ); } &.sell { @extend .btn-primary; } } 3# 预编译可缓解多浏览器兼容造成的冗余 进入CSS3的时代,旧式CSS hack如filter,新式兼容前缀如-webkit-等,都是冗余,修改的时候也需要修改多处,不容易维护。 比如对rgba背景的兼容: .bg { filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ccff825b,endcolorstr=#ccff825b); } :root .bg { -ms-filter: none; background: rgba(255,130,91,0.8) } 在LESS里面,写个函数就能解决,多次复用也不需要看到如此之多的hack: .rgbaBG(@c , @a){ @rgba : rgba(red(@c),green(@c),blue(@c),@a); @shim : argb(@rgba) ; filter: ~"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{shim},endcolorstr=@{shim})" ; :root & { -ms-filter: none ; background: @rgba ; } } .bg { .rgbaBG(#ff825b, 0.8) ; } 此外,使用LESS时,可以很方便地使用base64 data uri的方案。不需要直接面临在CSS中一大坨字符:``.bg { background: data-uri('../data/image.jpg'); } SASS的类似方案见评论。 N# 预编译不是万金油 预编译不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。 举个例子:原先我们只需要在chrome/firebug里面找到相应的选择器,如.popup .popup-wrap .head,源文件里面ctrl+F查找.popup .popup-wrap .head就可以快速定位语句。现在我们无法直接在预编译文件中查找,而需要寻找上下文,因为它在LESS中通常是这样被定义的: .popup { .popup-wrap { .head { } } } 更大的问题在于,预编译很容易造成后代选择器的滥用。 曾经有一个观点是预编译可以解决样式覆写的问题,而我觉得,正是预编译语言模糊了样式覆写的问题,而导致要解决样式相互覆写的问题时,问题已经变得规模庞大而难以解决。 举个极端的例子: .popup { font-size: 12px; a { font-size: 13px; } .head { font-size: 18px; } }.informative { font-size: 14px; .head { font-size: 16px; } } 如果我有这么一个文档结构.popup.informative > .head > a,需要a的font-size为17px,你能快速想明白怎么改吗?叠罗汉式地再叠一层?还是再糊一层墙皮,加一行样式?还是干脆用!important轰炸一番?

杨冬芳 2019-12-02 02:32:48 0 浏览量 回答数 0

问题

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

马铭芳 2019-12-01 20:09:05 6738 浏览量 回答数 5

回答

html5允许开发者自由为其标签添加属性,这种自定义属性一般用“data-”开头。我目前理解到在bootstrap中data-target,data-toggle等属性主要有两种作用:【1.】在CSS中作标签选择器用。如: [data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > .btn input[type="radio"], [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } 【2.】 用来传递替换文本(不知道是不是这么说),见下面的例子: input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before { content: attr(data-lbl); }

西秦说云 2019-12-02 02:36:23 0 浏览量 回答数 0

问题

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

游客886 2019-12-01 20:09:03 1237 浏览量 回答数 1

回答

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

回答

HTML通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1。`check `CSS通过label和checkbox,我们可以将checkbox隐藏,而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果,如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现,下面是一个简单的例子: .chk_1 { display: none; } .chk_1 + label { background-color: #FFF; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 5px; display: inline-block; position: relative; margin-right: 30px; } .chk_1 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .chk_1:checked + label { background-color: #ECF2F7; border: 1px solid #92A1AC; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: #243441; } .chk_1:checked + label:after { content: '\2714'; //勾选符号 position: absolute; top: 0px; left: 0px; color: #758794; width: 100%; text-align: center; font-size: 1.4em; padding: 1px 0 0 0; vertical-align: text-top; } 浏览页面效果,当点击label的时候,复选框出现勾选符号,表示选中状态,再次点击时,勾选符号消失,表示取消选中状态。DEMO中,我们提供了4个示例,基本可以满足页面常见的复选框样式需求,有需要的可以直接下载源代码,复制css样式即可。你也可以根据项目需求对css样式进行适当修改。补充说明复选框的美化效果可以在IE9+浏览器中支持,那么ie8及以下浏览器需要恢复默认样式,使用以下代码: <!--[if lte IE 8]> <link href="ie8.css" rel="stylesheet" />

小旋风柴进 2019-12-02 02:31:16 0 浏览量 回答数 0

回答

CSS选择器有一个:lang()伪类,可以指定特定语言的样式: .article span:lang(zh) { font-style: normal; } / this will be applied to all zh- languages */.article span:lang(en) { font-style: italic; } / ... applied to all en- languages */ 中文文字 This is an English sentence. 中文文字 值得注意的是,CSS只能根据lang属性标定好的语言来分配样式,而不能承担语言判断的任务。你需要自己使用各种方法把(和文档语言不一致的)其他语言部分包裹标定好。因为有一点是容易混淆,但必须明确的是:语言和文字其实是两回事。我们中文开发者的确习惯于看到汉字就是汉语,看到A~Z就是英语。但实际上汉字和拉丁字母(A~Z)都只是文字系统,而不是确定语言的标志。 同一套文字系统往往是多语言共享的,这样就造成了拿出一段文字,如果不理解其意义就无法反推出是哪一种语言的结果。例如:police可能是英语或法语;文字(U+6587 5B57)可能是汉语或日语*。 说了半天,就是为了说明“CSS和HTML只能标注,而不可能鉴别语言。一个CSS全自动标定英语文本”的想法是不可行的。 也许给拉丁字母一律标注lang="en"的步骤可以自动化,但也只好请题主自己动手。 CJK统一表意文字系统保证了中(含各种变体和方言,含简正两种书写系统)、日、韩、越这几个涉及汉字的语言中,只要是字形等同(或可以认为是等同)的同一汉字,就统一编为同一个编码。这可以保证同一个汉字的同一种字形,不因为语言的不同而被无意义的做出多个编码。 这除了便利性(不言而喻)之外,更有一个额外的优点:维护了文字编码的语言无关性,保证语言是语言,文字是文字,两者不被混淆在一起。

a123456678 2019-12-02 02:23:52 0 浏览量 回答数 0

回答

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
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站