diff options
Diffstat (limited to 'files/zh-cn/conflicting/web')
115 files changed, 14770 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/accessibility/index.html b/files/zh-cn/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..061aae9a6e --- /dev/null +++ b/files/zh-cn/conflicting/web/accessibility/index.html @@ -0,0 +1,49 @@ +--- +title: Web Development +slug: conflicting/Web/Accessibility +tags: + - 网页无障碍访问 +translation_of: Web/Accessibility +translation_of_original: Web/Accessibility/Web_Development +original_slug: Web/Accessibility/Web_Development +--- +<p class="summary"><span class="seoSummary">本篇文档为开发者提供了有关网站无障碍访问以及XUL无障碍开发的更多信息。</span></p> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"> + <h2 id="网页无障碍访问">网页无障碍访问</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA">ARIA - 针对开发者</a></dt> + <dd>ARIA的应用，使得动态HTML的页面内容具有了无障碍的可访问性。在许多的示例中我们都使用了ARIA应用，例如：在线内容区域以及Javascript小组件等。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">Javascript 组件之键盘导航</a></dt> + <dd>到现在为止，那些想让基于固有组件的<DIV>和<span>拥有特定样式的Web开发人员，在技术层面都略欠火候。键盘辅助的可用性，同样是必要需求之一，需要开发人员引起足够的重视。</dd> + </dl> + + <h2 id="XUL_可访问性">XUL 可访问性</h2> + + <dl> + <dt> </dt> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Building_accessible_custom_components_in_XUL">在XUL中构建可访问的自定义组件</a></dt> + <dd>使用DHTML无障碍访问技术，来为自定义的XUL组件添加可访问属性。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_accessibility_guidelines">可访问性XUL使用指南</a></dt> + <dd>当根据使用指南编写完成的同时, XUL有能力自行整合出无障碍用户界面。程序员、核查者、设计师以及质量监管工程师都应该对使用指南保持一定的熟悉程度。</dd> + </dl> + </td> + <td style="vertical-align: top;"> + <h2 id="外部资源">外部资源</h2> + + <dl> + <dt><a href="http://diveintoaccessibility.info/">深入探寻无障碍访问</a></dt> + <dd>这本书回答了两个问题。第一个问题是：“为什么我要让我的网站更具无障碍访问性？”第二个问题是“如何使我的网站做到这一点？”</dd> + <dt><a href="http://www-03.ibm.com/able/guidelines/web/accessweb.html">无障碍访问网页的编写</a></dt> + <dd>这是一本来自于IBM的便携式无障碍访问列表。</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html b/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..f81a2be43c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,164 @@ +--- +title: Drawing graphics with canvas +slug: conflicting/Web/API/Canvas_API/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +original_slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +<div class="note"> + <p>本文大部分（但不包括关于绘制窗体部分的文档）已经被包含到更详尽的Canvas教程中，该页面因为现在已经显得多余可能会被链接到那里，但是某些信息可能仍然是十分有用的。</p> + <p> </p> +</div> +<h2 id="Introduction" name="Introduction">Introduction</h2> +<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code><canvas></code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code><canvas></code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p> +<p><code><canvas></code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p> +<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2> +<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3> +<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> +<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p> +<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p> +<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3> +<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> + ctx.lineTo(30, 30); + ctx.fill(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> +<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p> +<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3> +<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p> +<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3> +<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p> +<pre class="brush: js">function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); +} + +function dot(ctx) { + ctx.save(); + ctx.fillStyle = "yellow"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // note that all other translates are relative to this one + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // unnecessary + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> +<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p> +<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p> +<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple <canvas></h2> +<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> +<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code></canvas></code> tag</h3> +<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> +<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> +<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> +<pre>canvas { + font-size: 0.00001px !ie; +}</pre> +<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2> +<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3> +<div class="note"> + This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> +<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> +<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> +<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> +<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> +<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> +<div class="note"> + <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> + <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: + <ul> + <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/en-US/docs/tag/canvas">And more...</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html b/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..3fd5c0018d --- /dev/null +++ b/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,108 @@ +--- +title: RandomSource +slug: conflicting/Web/API/Crypto/getRandomValues +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +original_slug: Web/API/RandomSource +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong><code>RandomSource</code></strong> 代表密码学安全随机数的来源。它可以通过全局对象的 {{domxref("Crypto")}} 获取：网页中的 {{domxref("Window.crypto")}}，Workrt 里面的 {{domxref("WorkerGlobalScope.crypto")}}。</p> + +<p><code>RandomSource</code> 不是一个接口，这个类型的对象不可以被创建。</p> + +<h2 id="属性">属性</h2> + +<p><em><code>RandomSource</code> 既没有定义也没有属性。</em></p> + +<dl> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> + <dd>使用密码学可靠的随机值填充传递过来的 {{ domxref("ArrayBufferView") }}。</dd> +</dl> + +<h2 id="Specification" name="Specification">标准</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> + <td>{{Spec2('Web Crypto API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>11.0 {{ webkitbug("22049") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(21)}} [1]</td> + <td>11.0</td> + <td>15.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>23</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(21)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>通过 {{ domxref("Window.crypto") }} 获取一个 {{domxref("Crypto")}} 对象。</li> + <li>{{jsxref("Math.random")}}，一个非密码学安全来源的随机数。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/document/characterset/index.html b/files/zh-cn/conflicting/web/api/document/characterset/index.html new file mode 100644 index 0000000000..ce06fbc644 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/document/characterset/index.html @@ -0,0 +1,22 @@ +--- +title: document.inputEncoding +slug: conflicting/Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +translation_of_original: Web/API/Document/inputEncoding +original_slug: Web/API/Document/inputEncoding +--- +<p>{{ ApiRef() }} {{ deprecated_header() }}</p> +<h3 id="概述">概述</h3> +<p>返回一个字符串,代表当前文档渲染时所使用的编码.(比如<code>utf-8</code>).</p> +<div class="warning"> + <strong>警告:</strong> 不要再使用该属性.该属性在DOM 4 规范(草案)中已经被废弃. Gecko 在未来的版本中将会删除它.</div> +<h3 id="语法">语法</h3> +<pre class="eval"><var>encoding</var> = <code>document.inputEncoding;</code> +</pre> +<p><code>inputEncoding</code> 是个只读属性.</p> +<h3 id="规范">规范</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> + <li>This has been removed from {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> +</ul> +<p>{{ languages( {"en": "en/DOM/document.inputEncoding" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/document/createevent/index.html b/files/zh-cn/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..84d91c4dec --- /dev/null +++ b/files/zh-cn/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,36 @@ +--- +title: Event.createEvent() +slug: conflicting/Web/API/Document/createEvent +tags: + - DOM + - Event + - JavaScript + - Method +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +original_slug: Web/API/Event/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。</p> + +<h3 id="语法">语法</h3> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>指明待创建事件对象的类型的字符串</dd> +</dl> + +<p>此方法返回一个新的特定类型的 DOM {{ domxref("Event") }} 对象，此对象在使用前必须经过初始化（init）。</p> + +<h3 id="示例">示例</h3> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h3 id="规范">规范</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/document/hasfocus/index.html b/files/zh-cn/conflicting/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..db40737695 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/document/hasfocus/index.html @@ -0,0 +1,80 @@ +--- +title: HTML 焦点管理 +slug: conflicting/Web/API/Document/hasFocus +tags: + - DOM + - HTML + - HTML5 + - 焦点 +translation_of: Web/API/Document/hasFocus +translation_of_original: Web/HTML/Focus_management_in_HTML +original_slug: Web/HTML/Focus_management_in_HTML +--- +<p>重定向 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></p> + +<p> </p> + +<p>在 HTML5 工作草案中，DOM 属性 <code><a href="/cn/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a></code> 与方法 <code><a href="/cn/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a></code> 为程序员提供了更好的控制页面交互的能力，特别是对于用户行为引发的交互。例如，它们都可以用于统计使用目的，跟踪页面特定链接的点击次数，计算元素获得焦点的次数等等。此外，当与 AJAX 技术结合以后，将会减少向服务器请求的数目，这取决于用户的活跃程度和页面的布局。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="浏览器相关注释">浏览器相关注释</h3> + +<h4 id="Gecko_notes">Gecko notes</h4> + +<p>[1] Gecko 8.0 {{geckoRelease("8.0")}} 开始，Firefox 会在任意 <code>tabindex</code> 值大于 0 的元素周围绘制一个焦点框，而不只是一小部分元素。一部分元素例外： {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}} 和 {{HTMLElement("html")}}。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{domxref("document.activeElement")}}</li> + <li>{{domxref("document.hasFocus")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/document_object_model/index.html b/files/zh-cn/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..d7a4164ee9 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,53 @@ +--- +title: 前言 +slug: conflicting/Web/API/Document_Object_Model +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +original_slug: Web/API/Document_Object_Model/Preface +--- +<p>{{ ApiRef() }}</p> +<h3 id="About_This_Reference" name="About_This_Reference">关于此参考文档</h3> +<p>本节将描述与此向导本身相关的一些内容，内容包括它是做什么的，里面的信息是如何呈现的，以及怎样在你DOM开发中如何使用这份参考文档中的示例。</p> +<p>注意，这份文档尚在开发中，并没有完整包含Gecko中所有已经移植的DOM方法及其属性，但是，文档中的每一个小节（例如，DOM文件参考）中所描述的对象是完整的。今后当某个API库的成员的信息可用时，它将会被整合到此文档中。</p> +<h3 id="哪些人应该阅读这份指南">哪些人应该阅读这份指南</h3> +<p>这份Gecko DOM参考文档的读者应该是一位web开发人员或者是一位对网页制作有一定了解的熟练web用户。这份文档对读者对DOM、XML、web服务或者web标准，甚至JavaScript——DOM呈现给读者的语言——的熟练度都没有要求。但是，本文档假定读者至少对HTML、标签、网页的基本结构、浏览器以及样式表是熟悉的。</p> +<p>在这里，介绍性的资料在展示的同时伴随有许多示例，并且高等级的解释对没有经验的和经验丰富的web开发者都同样有用，并且也并不仅仅针对入门开发者。然而，这是一份正在不断改进中的API参考手册。</p> +<h3 id="什么是Gecko？">什么是Gecko？</h3> +<p>Mozilla，Firefox, Netscape 6以上版本，以及一些基于Mozilla的其他浏览器都有一个相同的对DOM的实现。这是因为它们使用的是相同的技术。</p> +<p>Gecko，即在上述各种浏览器中处理HTML的解析，页面的排版，文档对象模型，以及整个应用界面的渲染的软件组件，是一个快速的、兼容多种标准的渲染引擎。它移植了W3C的DOM标准以及出现在网页页面和应用界面（或者称为chrome）中的类DOM（但尚未标准化）的浏览器对象模型（即所谓window等的）。</p> +<p>尽管应用界面和页面内容在不同的浏览器里的呈现方式不一样，但是DOM期望它们统一地作为一种节点的分层结构。</p> +<h3 id="API语法">API语法</h3> +<p>API参考里的每个描述都包括语法、输入输出参数（包括返回类型），一个例子，额外的一些提示，以及指向对应参考文档的链接。</p> +<p>只读的属性只能被读取。因为它们无法被设置，所以通常以一个单独的一行语法表示。例如screen对象的只读属性availHeight使用的语法如下：</p> +<pre>iAvail = window.screen.availHeight +</pre> +<p>这意味着你只能把该只读属性放在等式的右边。</p> +<p>可读/写的属性，既能被读取也能被写入：</p> +<pre>msg = window.status +window.status = msg +</pre> +<p>一般来说，描述对象的成员时，对象的格式声明通常都带有一个简单的类型描述符，例如，对所有的元素使用element，对所有的顶层文档对象使用document，对所有的表对象使用table等（详见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types">重要的数据类型</a>）。</p> +<h3 id="Using_the_Examples" name="Using_the_Examples">如何使用示例</h3> +<p>本参考文档中的许多示例都是完整的文档，你可以把他们复制粘贴到一个新的文件，然后在浏览器中打开它。</p> +<p>其他的例子是一些代码片段。你可以把它们加入到JavaScript的回调函数中来执行。</p> +<p>例如，这个关于<a href="/zh-CN/DOM/window.document" title="zh-CN/DOM/window.document">window.document</a>属性的例子能通过一个函数来测试。这里，它通过一个按钮的<code>onclick </code>属性来调用。</p> +<pre class="brush: html"><html> +<head> +<title>Test Page</title> +<script type="text/javascript"> +function testWinDoc() { + + var doc= window.document; + + alert(doc.title); + +} +</script> +</head> + +<body> + <button onclick="testWinDoc();">test document property</button> +</body> +</html> +</pre> +<p>其他一些尚未完整打包的对象成员也采用与此类似的函数和页面。参见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">测试DOM API</a>，可以一次对各种API的做一次“无害测试”。</p> diff --git a/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html b/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html new file mode 100644 index 0000000000..285ced6f96 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html @@ -0,0 +1,34 @@ +--- +title: DOM 开发者指南 +slug: conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/API/DOM +--- +<p>{{draft}}</p> + +<p><a href="https://developer.mozilla.org/docs/DOM">文档对象模型</a>（ <a href="/docs/DOM">Document Object Model</a>） 是为 <a href="/en-US/docs/HTML">HTML</a> 和<a href="/en-US/docs/XML">XML</a> 文档编写的应用程序接口。它为文档提供了结构化的描述, 使得开发者能够修改它们的内容和展现方式. 更重要的是, 它可以将网页与脚本或编程语言连接起来。</p> + +<p>开发者能用来修改和创建网页的所有性质、方法和事件都被组织到<a href="/en-US/docs/Gecko_DOM_Reference">对象</a>( <a href="/en-US/docs/Gecko_DOM_Reference">objects</a>)中， (例如, document 对象代表着文档本身，table 对象代表 一个 HTML 表格元素等等)。在较新的网络浏览器中，这些对象都可以用脚本语言获取。</p> + +<p>DOM模型常被用来与 <a href="/en-US/docs/JavaScript">JavaScript</a>交互。然而，DOM是独立于任何编程语言之外而设计的，这使得文档的结构化描述可以从一个<a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference">单个、兼容的接口</a>获取，尽管我们青睐于Javascript,但我们可以为任何语言创建DOM的引用接口。</p> + +<p><a href="http://www.w3.org/">万维网联盟组织</a>（ <a href="http://www.w3.org/">World Wide Web Consortium</a> ）为DOM建立了一套标准， 叫做<a href="http://www.w3.org/DOM/"> W3C DOM</a>。它被如今大多数主流浏览器所支持，使得可以开发出强大的跨浏览器应用。</p> + +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">为什么DOM很重要？</h2> + +<p>"动态超文本链接语言" (<a href="/en-US/docs/DHTML">DHTML</a>) 是一个被一些开发者们用来描述结合HTML、样式表、脚本而使文档富有动态效果技术的名词。 W3C DOM工作组致力于开发可操作的、不受语言限制并被大家所认同的解决方案 (可参见 <a href="http://www.w3.org/DOM/faq.html">W3C 问答</a>).</p> + +<p>正如 Mozilla 的标题"网络应用程序平台”所强调的, 对DOM的支持是核心的特点，也是Mozilla能取代其它浏览器所必需的特点。更为重要的事实是--Mozilla（包括Firefox和Thunderbird）的用户界面都是用<a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a>创建的，并且用DOM<a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">修改自己的用户界面</a>。</p> + +<h2 id="更多关于DOM的内容">更多关于DOM的内容</h2> + +<p>{{LandingPageListSubpages}}</p> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..83bcafb45b --- /dev/null +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,46 @@ +--- +title: Document.elementFromPoint() +slug: conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +original_slug: Web/API/Document/elementFromPoint +--- +<div> + {{APIRef()}} {{Fx_minversion_header(3)}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre><em>var element</em> = document.elementFromPoint(<em>x</em>, <em>y</em>);</pre> +<ul> + <li><code>element</code> 是返回的DOM<a href="/en-US/docs/DOM/element" title="DOM/element">元素</a>.</li> + <li><code>x</code> 和 <code>y</code> 是坐标数值, 不需要单位比如px.</li> +</ul> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>elementFromPoint example</title> + +<script> +function changeColor(newColor) { + elem = document.elementFromPoint(2, 2); + elem.style.color = newColor; +} +</script> +</head> + +<body> +<p id="para1">Some text here</p> +<button onclick="changeColor('blue');">blue</button> +<button onclick="changeColor('red');">red</button> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">附注</h2> +<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.</p> +<p>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>null</code>.</p> +<p>{{Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}</p> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li>Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint">elementFromPoint</a></code></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html new file mode 100644 index 0000000000..3b1043f630 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html @@ -0,0 +1,130 @@ +--- +title: Document.elementsFromPoint() +slug: conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint +translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +translation_of_original: Web/API/Document/elementsFromPoint +original_slug: Web/API/Document/elementsFromPoint +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var<em> elements</em> = <em>document</em>.elementsFromPoint(<em>x</em>, <em>y</em>);</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个包含多个元素的数组</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt>x</dt> + <dd>当前视口内某一点的横坐标</dd> + <dt>y</dt> + <dd>当前视口内某一点的纵坐标</dd> +</dl> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p>Some text</p> +</div> +<p>Elements at point 30, 20:</p> +<div id="output"></div> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); +if (document.elementsFromPoint) { + var elements = document.elementsFromPoint(30, 20); + for(var i = 0; i < elements.length; i++) { + output.textContent += elements[i].localName; + if (i < elements.length - 1) { + output.textContent += " < "; + } + } +} else { + output.innerHTML = "<span style=\"color: red;\">" + + "您的浏览器不支持 <code>document.elementsFromPoint()</code>" + + "</span>"; +}</pre> + +<p>{{EmbedLiveSample('Example', '420', '120')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> {{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td> + <td>10.0 {{property_prefix("ms")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(11)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoMobile("46.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(11)}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..dce4bc9c58 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,16 @@ +--- +title: document.getSelection +slug: conflicting/Web/API/DocumentOrShadowRoot/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/Document/getSelection +--- +<article class="approved text-content" style="padding-right: 10px; width: 652px; float: left;"> +<div class="boxed translate-rendered" style=""> +<p>{{APIRef("DOM")}}</p> + +<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p> +</div> +</article> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..088be5bd6b --- /dev/null +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,27 @@ +--- +title: Document.styleSheets +slug: conflicting/Web/API/DocumentOrShadowRoot/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/Document/styleSheets +--- +<div>{{APIRef}}</div> + +<p><strong><code>Document.styleSheets</code></strong> 只读属性，返回一个由 {{domxref("StyleSheet ")}} 对象组成的 {{domxref("StyleSheetList")}}，每个 {{domxref("StyleSheet ")}} 对象都是一个文档中链接或嵌入的样式表。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">let <var>styleSheetList</var> = <em>document</em>.styleSheets; +</pre> + +<p>返回的对象是一个 {{domxref("StyleSheetList")}}。</p> + +<p>它是一个 {{domxref("StyleSheet")}} 对象的有序集合。<code><em>styleSheetList</em>.item(<em>index</em>)</code> 或 <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> 根据它的索引（索引基于0）返回一个单独的样式表对象。</p> + +<pre class="syntaxbox"> </pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/dommatrix/index.html b/files/zh-cn/conflicting/web/api/dommatrix/index.html new file mode 100644 index 0000000000..364ba0709c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/dommatrix/index.html @@ -0,0 +1,95 @@ +--- +title: CSSMatrix +slug: conflicting/Web/API/DOMMatrix +translation_of: Web/API/DOMMatrix +translation_of_original: Web/API/CSSMatrix +original_slug: Web/API/CSSMatrix +--- +<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> + +<p><strong><code>CSSMatrix</code></strong> 代表可以用于2D或3D变换的4x4齐次矩阵。据说这个类曾经是 CSS Transitions Module Level 3 的一部分，但在现在的工作草案里不存在 。请使用 <a href="/en-US/docs/Web/API/DOMMatrix"><code>DOMMatrix</code></a> 。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#webkitcssmatrix-interface', 'WebKitCSSMatrix')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Initial standardization of the WebKit-prefixed version, <code>WebKitCSSMatrix</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>11<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 将此 API<code>实现为MSCSSMatrix</code>。在版本11中，加入了别名<code>WebKitCSSMatrix</code>。</p> + +<p>[2] WebKit 将此 API<code>实现为WebKitCSSMatrix</code>。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx"><code>MSCSSMatrix</code> documentation on MSDN</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html"><code>WebKitCSSMatrix</code> documentation at Safari Developer Library</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla bug 717722: implement <code>(WebKit)CSSMatrix()</code></a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/element/index.html b/files/zh-cn/conflicting/web/api/element/index.html new file mode 100644 index 0000000000..51c660e9ce --- /dev/null +++ b/files/zh-cn/conflicting/web/api/element/index.html @@ -0,0 +1,49 @@ +--- +title: Slotable +slug: conflicting/Web/API/Element +tags: + - API + - Web Components + - 参考 + - 接口 +translation_of: Web/API/Slottable +translation_of_original: Web/API/Slotable +original_slug: Web/API/Slotable +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p><code>Slotable</code> mixin 定义了允许节点成为 {{htmlelement("slot")}} 元素的内容的特性——下面的特性被包含在 {{domxref("Element")}} 和 {{domxref("Text")}} API 之中。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> + <dd>返回节点所插入的 {{htmlelement("slot")}} 元素。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>无。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Slotable")}}</p> diff --git a/files/zh-cn/conflicting/web/api/event/composedpath/index.html b/files/zh-cn/conflicting/web/api/event/composedpath/index.html new file mode 100644 index 0000000000..525b27f4b8 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/event/composedpath/index.html @@ -0,0 +1,91 @@ +--- +title: Event.deepPath +slug: conflicting/Web/API/Event/composedPath +translation_of: Web/API/Event/composedPath +translation_of_original: Web/API/Event/deepPath +original_slug: Web/API/Event/deepPath +--- +<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> + +<p><span class="seoSummary">{{domxref("Event")}}的<strong><code>deepPath</code></strong> 属性返回事件冒泡过程所有经过的节点所构成的{{jsxref("Array")}}数组</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>nodes</em>[] = Event.deepPath</pre> + +<h3 id="返回值">返回值</h3> + +<p>一组节点 构成的{{jsxref("Array")}}数组</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评语</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM','#widl-Event-deepPath-sequence-EventTarget','deepPath')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..0d43c26ea1 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,10 @@ +--- +title: 为这个EventTarget附加事件. +slug: conflicting/Web/API/EventTarget/addEventListener +tags: + - Junk +translation_of: Web/API/EventTarget/addEventListener +translation_of_original: Web/API/EventTarget/attachEvent +original_slug: Web/API/EventTarget/attachEvent +--- +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html b/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..f28ce6bc9a --- /dev/null +++ b/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,94 @@ +--- +title: EventTarget.fireEvent() +slug: conflicting/Web/API/EventTarget/dispatchEvent +translation_of: Web/API/EventTarget/dispatchEvent +translation_of_original: Web/API/EventTarget/fireEvent +original_slug: Web/API/EventTarget/fireEvent +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="概述">概述</h2> + +<p>这是微软IE浏览器用以替代{{domxref("EventTarget.dispatchEvent()")}}的私有方法，与{{domxref("EventTarget.dispatchEvent()")}}不同的是通过<code>fireEvent()</code> 触发的事件不会触发事件的默认行为，例如，通过fireEvent()触发<input type="checkbox">的点击事件并不会切换checkbox的选中状态</p> + +<p>语法</p> + +<pre class="syntaxbox"><em>cancelled</em> = <em>target</em>.fireEvent(<em>eventNameWithOn</em>, <em>event</em>) +</pre> + +<dl> + <dt>target</dt> + <dd>要触发事件的元素</dd> + <dt>eventNameWithOn</dt> + <dd>要触发事件的名字，前缀为“on”，例如，可以用过"onclick"来触发点击事件</dd> + <dt>event</dt> + <dd>要触发的事件对象</dd> + <dt>cancelled</dt> + <dd>布尔值，事件是否被事件句柄取消</dd> +</dl> + +<h2 id="规范">规范</h2> + +<p>无此部分的规范</p> + +<p>微软的描述： <a href="https://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx">has a description on MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6 到 10 [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: fireEvent()在IE11+已经不再支持，{{domxref("EventTarget.dispatchEvent()")}}在IE9+已经支持</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="http://help.dottoro.com/ljvtddtm.php">Dottoro Web Reference article</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..4331abb35c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,98 @@ +--- +title: EventTarget.detachEvent() +slug: conflicting/Web/API/EventTarget/removeEventListener +tags: + - API + - DOM + - Method + - Non-standard +translation_of: Web/API/EventTarget/removeEventListener +translation_of_original: Web/API/EventTarget/detachEvent +original_slug: Web/API/EventTarget/detachEvent +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="简介">简介</h2> + +<p>这是Microsoft Internet Explorer专有的用于替代标准的 {{domxref("EventTarget.removeEventListener()")}} 的方法。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) +</pre> + +<dl> + <dt>target</dt> + <dd>将要移除事件的DOM节点</dd> + <dt>eventNameWithOn</dt> + <dd>将要移除的事件名，以“on”为前缀（例如它是一个事件处理程序）。 例如，您可以使用“onclick”移除点击事件的事件处理程序。</dd> + <dt>callback</dt> + <dd>注销事件后的回调函数</dd> +</dl> + +<h2 id="详细">详细</h2> + +<p>任何规范没有此部分。</p> + +<p>微软在 <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">MSDN</a> 上有相关描述。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6 至 10 [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <code>detachEvent()</code> 在 IE11+ 中不再支持。 {{domxref("EventTarget.removeEventListener()")}} 在 IE9+ 中支持。</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("EventTarget.attachEvent()") }}</li> + <li>{{ domxref("EventTarget.fireEvent()") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html new file mode 100644 index 0000000000..8322c91998 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html @@ -0,0 +1,82 @@ +--- +title: File System API guide +slug: conflicting/Web/API/File_and_Directory_Entries_API/Introduction +translation_of: Web/API/File_and_Directory_Entries_API/Introduction +translation_of_original: WebGuide/API/File_System +original_slug: WebGuide/API/File_System +--- +<p>{{ SeeCompatTable() }}</p> +<p>The File System API simulates a local file system that web apps can navigate around. You can develop apps that can read, write, and create files and directories in a virtual, sandboxed file system.</p> +<p>The asynchronous API methods return without blocking the calling thread. The asynchronous API doesn't give you data by returning values; instead, you have to pass a callback function. The synchronous API is intended to be used inside <a href="/en/DOM/Worker" title="Worker">WebWorkers</a>.</p> +<p>For an overview of the File System API, see the following articles:</p> +<p>{{ListSubpages}}</p> +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Asynchronous API</td> + <td>13 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>15 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Synchronous API</td> + <td>13 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>15 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Asynchronous API</td> + <td>{{ CompatNo() }}</td> + <td>0.16{{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>14 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Synchronous API</td> + <td>{{ CompatNo() }}</td> + <td>0.16{{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>14 {{ property_prefix("webkit") }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/Reference/File_System_API" title="/en-US/docs/Web/Reference/File_System_API">File System API reference</a></li> + <li>Specification: {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/geolocation/index.html b/files/zh-cn/conflicting/web/api/geolocation/index.html new file mode 100644 index 0000000000..e38bc3e6b7 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/geolocation/index.html @@ -0,0 +1,106 @@ +--- +title: NavigatorGeolocation +slug: conflicting/Web/API/Geolocation +translation_of: Web/API/Geolocation +translation_of_original: Web/API/NavigatorGeolocation +original_slug: Web/API/NavigatorGeolocation +--- +<p>{{APIRef("Geolocation API")}}</p> + +<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> + +<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation. </a></li> +</ul> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html new file mode 100644 index 0000000000..a792bdd45d --- /dev/null +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -0,0 +1,144 @@ +--- +title: Element.ongotpointercapture +slug: conflicting/Web/API/GlobalEventHandlers/ongotpointercapture +tags: + - API + - DOM + - Element + - Event Handler + - Pointer Events + - Property + - Reference + - 事件句柄 + - 元素 + - 属性 + - 引用 + - 指针事件 +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +translation_of_original: Web/API/Element/ongotpointercapture +original_slug: Web/API/Element/ongotpointercapture +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code>ongotpointercapture</code> 是一个{{domxref("Element")}} 接口的{{domxref("EventHandler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var gotCaptureHandler = target.ongotpointercapture; +</pre> + +<h3 id="Return_Value" name="Return_Value">Return value</h3> + +<dl> + <dt><code>gotCaptureHandler</code></dt> + <dd>元素 <code>target</code> 的gotpointercapture 事件句柄。 .</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js"><html> +<script> +function overHandler(ev) { + // Determine the target event's gotpointercapture handler + var gotCaptureHandler = ev.target.ongotpointercapture; +} +function init() { + var el=document.getElementById("target"); + el.onpointerover = overHandler; +} +</script> +<body onload="init();"> +<div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>无稳定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementation withdrawn. See {{Bug("1166347")}}.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{ event("gotpointercapture") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..2a1afdf2ac --- /dev/null +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,44 @@ +--- +title: window.onmouseup +slug: conflicting/Web/API/GlobalEventHandlers/onmouseup +translation_of: Web/API/GlobalEventHandlers/onmouseup +translation_of_original: Web/API/Window/onmouseup +original_slug: Web/API/Window/onmouseup +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>当前窗口的mouseup事件的事件句柄.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">window.onmouseup = <em>funcRef</em>; +</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><code>funcRef</code> 是个函数引用</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre>window.onmouseup = doFunc; +</pre> +<pre><html> +<head> + +<title>onmouseup测试</title> + +<script type="text/javascript"> + +window.onmouseup = mouseup; + +function mouseup() +{ + alert("检测到mouseup事件!"); +} +</script> +</head> + +<body> +<p>在页面上按下鼠标中某个键,保持几秒后松开.mouseup事件会在你松开鼠标时触发</p> +</body> +</html> +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>没有任何公开的标准</p> +<p>{{ languages( { "ja": "ja/DOM/window.onmouseup" ,"en": "en/DOM/window.onmouseup" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..9bd58ff3f5 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,55 @@ +--- +title: window.onscroll +slug: conflicting/Web/API/GlobalEventHandlers/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +translation_of_original: Web/API/Window/onscroll +original_slug: Web/API/Window/onscroll +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>为当前页面的页面滚动事件添加事件处理函数.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">window.onscroll = <em>funcRef</em>; +</pre> +<ul> + <li><code>funcRef</code> 是个函数类型的对象引用或者匿名函数.</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre class="brush: js">window.onscroll = function (e) { + // 当页面的滚动条滚动时,会执行这里的代码 +} +</pre> +<pre class="brush: html"><html> +<head> + +<title>onscroll test</title> + +<script type="text/javascript"> + +window.onscroll = scroll; + +function scroll() +{ + alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset); + // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高. +} +</script> +</head> + +<body> +<p>Resize the window</p> +<p>to a very small size,</p> +<p>and use the scrollbars</p> +<p>to move around the page content</p> +<p>in the window.</p> +</body> +</html> +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>{{ Bug("189308") }}, 在旧版本的Gecko中(Gecko 1.8/Firefox 1.5之前), scroll 事件只会在用户拖动滚动条时发生,使用方向键和鼠标滚轮滚动页面则不会触发该事件.</p> +<p>当 window.scrollX/scrollY 不为 0时,意味着用户或者网页脚本已经执行了窗口的滚动行为.</p> +<h3 id="Specification" name="Specification">规范</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/window.onscroll"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html new file mode 100644 index 0000000000..7579ce0d36 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.ontouchmove +slug: conflicting/Web/API/GlobalEventHandlers/ontouchmove +translation_of: Web/API/GlobalEventHandlers/ontouchmove +translation_of_original: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove +original_slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</p> + +<div class="note"> +<p><strong>注意：这个属性还没有正式的标准。它在 </strong>{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 说明书里被规定且不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性没有被广泛应用。</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var moveHandler = someElement.ontouchmove; +</pre> + +<h3 id="Return_Value" name="Return_Value">Return value</h3> + +<dl> + <dt><code>moveHandler</code></dt> + <dd>The <em>touchmove</em> event handler for element <code>someElement</code>.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>This example shows two ways to use <em>ontouchmove</em> to set an element's <em>touchmove</em> event handler.</p> + +<pre class="brush: js"><html> +<script> +function moveTouch(ev) { + // Process the event +} +function init() { + var el=document.getElementById("target1"); + el.ontouchmove = moveTouch; +} +</script> +<body onload="init();"> +<div id="target1"> Touch me ... </div> +<div id="target2" ontouchmove="moveTouch(event)"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Non-stable version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ event("touchmove") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html b/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html new file mode 100644 index 0000000000..54458e93a2 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html @@ -0,0 +1,10 @@ +--- +title: Node.outerText +slug: conflicting/Web/API/HTMLElement/outerText +tags: + - Node.outerText +translation_of: Web/API/HTMLElement/outerText +translation_of_original: Web/API/Node/outerText +original_slug: Web/API/Node/outerText +--- +<p>请参阅 {{domxref("HTMLElement.outerText")}}</p> diff --git a/files/zh-cn/conflicting/web/api/htmlinputelement/index.html b/files/zh-cn/conflicting/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..82a91a1271 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/htmlinputelement/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLInputElement.mozSetFileNameArray +slug: conflicting/Web/API/HTMLInputElement +translation_of: Web/API/HTMLInputElement +translation_of_original: Web/API/HTMLInputElement/mozSetFileNameArray +original_slug: Web/API/HTMLInputElement/mozSetFileNameArray +--- +<div> +<div> +<div> +<div>{{APIRef("HTML DOM")}}</div> +</div> +</div> +{{gecko_minversion_header("1.9.2")}}</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>设置一个HTML <code>input</code>元素中选中的若干文件的路径以及文件名.</p> + +<div class="note"><strong>注:</strong> 该方法是Gecko私有的方法,在其他浏览器中不可用,且是个特权方法,不能在普通网页中使用.</div> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">inputElement.mozSetFileNameArray(<em>aFileNames, </em><em>aLength</em>); +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>aFileNames</code> 指定给该元素的若干个文件的文件名路径以及文件名.</li> + <li><code>aLength </code>需要指定文件的个数(<code>通常是</code>数组<code>aFileNames</code>的长度).</li> +</ul> + +<h3 id="Example" name="Example">示例</h3> + +<pre class="brush: js">var fileArray = {"/foo/bar.txt", "/foo/foosball.txt"}; + +inputElement.mozSetFileNameArray(fileArray, fileArray.length); +</pre> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>非标准,Mozilla私有方法.</p> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a href="/zh-CN/DOM/Input" title="zh-CN/DOM/Input"><code>Input</code></a></li> + <li><a href="/zh-CN/DOM/Input.mozGetFileNameArray" title="zh-CN/DOM/Input.mozGetFileNameArray"><code>Input.mozGetFileNameArray</code></a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..1b77441e5e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,75 @@ +--- +title: abort +slug: conflicting/Web/API/HTMLMediaElement/abort_event +tags: + - abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +original_slug: Web/Events/abort +--- +<p>当一个资源的加载已中止时，将触发 <strong>abort</strong>事件。</p> + +<div class="note"> +<p>译者注：这个事件只在 IE 支持，试了最新的 Chrome、FireFox、Safari 都不支持。</p> +</div> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">从UI组件产生为UIEvent , 否则为Event .</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">元素（Element）</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/zh-CN/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/zh-CN/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (该文档的<code>window</code>对象 )</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/conflicting/web/api/index.html b/files/zh-cn/conflicting/web/api/index.html new file mode 100644 index 0000000000..333f98f0a4 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/index.html @@ -0,0 +1,72 @@ +--- +title: Element.name +slug: conflicting/Web/API +translation_of: Web/API +translation_of_original: Web/API/Element/name +original_slug: Web/API/Element/name +--- +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong>name</strong> 获取或设置一个 DOM 对象的 <code>name</code> 属性；它只能应用于下列元素：{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p>需要注意的是，<code>name</code> 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。</p> +</div> + +<p>Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，<a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 以及 the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // 获取表单中第一个元素的引用 + var formElement = document.forms['formA'].elements[0]; + + // 设置一个 name + formElement.name = 'inputA'; + + // 显示 input 的 value 值 + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>W3C DOM 2 HTML Specification:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html new file mode 100644 index 0000000000..382f62201d --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html @@ -0,0 +1,45 @@ +--- +title: event.altKey +slug: conflicting/Web/API/MouseEvent/altKey +translation_of: Web/API/MouseEvent/altKey +translation_of_original: Web/API/event.altKey +original_slug: Web/API/event.altKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>表明当事件触发时,ALT键是否处于按下的状态.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">event.altKey +</pre> +<h3 id="例子">例子</h3> +<pre><code><em>var bool</em> = event.altKey;</code> +</pre> +<p>如果当事件触发时,ALT键处于按下的状态,<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">则bool</code>的值为<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">true,否则为</code><code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">false</code>.</p> +<pre class="brush: html"><html> +<head> +<title>altKey 示例</title> + +<script type="text/javascript"> + +function showChar(e){ + alert( + "按下的键: " + String.fromCharCode(e.charCode) + "\n" + + "charCode: " + e.charCode + "\n" + + "是否按下ALT键: " + e.altKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="showChar(event);"> +<p> +按下一个字符键,尝试同时按下ALT键.<br /> +你也可以同时按下SHIFT键和ALT键. +</p> +</body> +</html> +</pre> +<h3 id="规范">规范</h3> +<p>DOM Level 2 Events - property of MouseEvent object</p> +<p>{{ languages( { "ja": "ja/DOM/event.altKey", "pl": "pl/DOM/event.altKey", "en": "en/DOM/event.altKey" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/button/index.html b/files/zh-cn/conflicting/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..1a3142e74e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/button/index.html @@ -0,0 +1,83 @@ +--- +title: event.button +slug: conflicting/Web/API/MouseEvent/button +translation_of: Web/API/MouseEvent/button +translation_of_original: Web/API/event.button +original_slug: Web/API/event.button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>表明当前事件是由鼠标的哪个按键触发的.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre>event.button +</pre> +<h3 id="例子">例子</h3> +<pre>var buttonCode = event.button; +</pre> +<p>该属性返回一个整数值,代表触发当前事件的鼠标按键.在通常情况下,对应关系如下:</p> +<ul> + <li>0 为 左键点击.</li> + <li>1 为 中键点击.</li> + <li>2 为 右键点击.</li> +</ul> +<div class="note"> + <strong>注意:</strong> IE不遵守 See <a class="external" href="http://www.quirksmode.org/js/events_properties.html#button" title="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</div> +<p>The order of buttons may be different depending on how the pointing device has been configured.</p> +<h3 id="Example" name="Example">例子</h3> +<pre class="brush: html"><script> +var whichButton = function (e) { + // 处理不同的事件模型 + var e = e || window.event; + var btnCode; + + if ('object' === typeof e) { + btnCode = e.button; + + switch (btnCode) { + case 0: + alert('你按了左键.'); + break; + case 1: + alert('你按了中键.'); + break; + case 2: + alert('你按了右键.'); + break; + default: + alert('未知按键: ' + btnCode); + } + } +} +</script> + +<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">请点击鼠标...</button> +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.</p> +<p>Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> +<h3 id="浏览器兼容性">浏览器兼容性</h3> +<p>Based on Jan Wolter's <a class="external" href="http://unixpapa.com/js/mouse.html">JavaScript Madness: Mouse Events</a>.</p> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Gecko</th> + <th>Webkit</th> + <th>Internet Explorer</th> + <th>Opera</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>523</td> + <td>9</td> + <td>8</td> + </tr> + </tbody> + </table> +</div> +<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" ,"en": "en/DOM/event.button" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html new file mode 100644 index 0000000000..aed477e044 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html @@ -0,0 +1,125 @@ +--- +title: event.relatedTarget +slug: conflicting/Web/API/MouseEvent/relatedTarget +translation_of: Web/API/MouseEvent/relatedTarget +translation_of_original: Web/API/event.relatedTarget +original_slug: Web/API/event.relatedTarget +--- +<h2 id="Summary" name="Summary"> </h2> + +<p>{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">简要</h2> + +<p>为事件标识第二目标</p> + +<h2 id="Summary" name="Summary">描述</h2> + +<p><code>relatedTarget</code> 属性用于在一个事件中查找另外一个元素。有些事件比如 <code>mouseover</code> 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 <code>mouseover</code> 事件.</p> + +<h2 id="事件">事件</h2> + +<p>只有 <code>MouseEvent</code>s 有这个属性，而且这些些只在特定的 <code>MouseEvent</code>s 事件中有效：</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">事件名</td> + <td class="header"><code>relatedTarget</code> role</td> + </tr> + <tr> + <td>focusin</td> + <td>哪个 {{domxref("EventTarget")}} 失去焦点</td> + </tr> + <tr> + <td>focusout</td> + <td>哪个 {{domxref("EventTarget")}} 获得焦点</td> + </tr> + <tr> + <td>mouseenter</td> + <td>鼠标从哪个 {{domxref("EventTarget")}} 进来</td> + </tr> + <tr> + <td>mouseleave</td> + <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> + </tr> + <tr> + <td>mouseout</td> + <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> + </tr> + <tr> + <td>mouseover</td> + <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> + </tr> + <tr> + <td>dragenter</td> + <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> + </tr> + <tr> + <td>dragexit</td> + <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + +<style> +div > div { + height: 128px; + width: 128px; +} +#top { background-color: red; } +#bottom { background-color: blue; } +</style> + +<script> +function outListener(event) { + console.log("exited " + event.target.id + " for " + event.relatedTarget.id); +} + +function overListener(event) { + console.log("entered " + event.target.id + " from " + event.relatedTarget.id); +} + +function loadListener() { + var top = document.getElementById("top"), + bottom = document.getElementById("bottom"); + + top.addEventListener("mouseover", overListener); + top.addEventListener("mouseout", outListener); + bottom.addEventListener("mouseover", overListener); + bottom.addEventListener("mouseout", outListener); +} +</script> + +</head> + +<body onload="loadListener();"> + +<div id="outer"> + <div id="top"></div> + <div id="bottom"></div> +</div> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/uTe99">在JSFiddle中查看</a></p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-relatedTarget">DOM Level 2 Events: MouseEvent.relatedTarget</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..d61d354b15 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,42 @@ +--- +title: event.shiftKey +slug: conflicting/Web/API/MouseEvent/shiftKey +translation_of: Web/API/MouseEvent/shiftKey +translation_of_original: Web/API/event.shiftKey +original_slug: Web/API/event.shiftKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>表明当事件触发时,SHIFT键是否处于按下状态.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>var bool</em> = event.shiftKey; +</pre> +<p><code>bool</code> 的值为 <code>true</code> 或 <code>false</code></p> +<h3 id="Example" name="Example">例子</h3> +<pre><html> +<head> +<title>shiftKey example</title> + +<script type="text/javascript"> + +function showChar(e){ + alert( + "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" + + "charCode: " + e.charCode + "\n" + + "SHIFT key pressed: " + e.shiftKey + "\n" + + "ALT key pressed: " + e.altKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="showChar(event);"> +<p><span>按下一个字符键,尝试同时按下</span>SHIFT<span>键.</span><br /> +<span>你也可以同时按下SHIFT键和ALT键.</span></p> +</body> +</html> +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> +<p>{{ languages( { "pl": "pl/DOM/event.shiftKey" ,"en": "en/DOM/event.shiftKey" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/node/getrootnode/index.html b/files/zh-cn/conflicting/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..ea5deb0b98 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/node/getrootnode/index.html @@ -0,0 +1,116 @@ +--- +title: Node.rootNode +slug: conflicting/Web/API/Node/getRootNode +tags: + - API + - DOM + - Node + - Property + - Reference + - rootNode +translation_of: Web/API/Node/getRootNode +translation_of_original: Web/API/Node/rootNode +original_slug: Web/API/Node/rootNode +--- +<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p><code><strong>Node.rootNode</strong></code> 是 {{domxref("Node")}} 的一个只读属性, 返回该节点所在 DOM 数的根节点(最高节点). 此属性是通过 {{domxref("Node.parentNode")}} 属性循环查找直到找到根节点.</p> + +<div class="warning"> +<p><strong>注意</strong>: 由于某种原因, 此属性已经被 {{domxref("Node.getRootNode()")}} 方法替代.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><var>rootNode</var> = <em>node</em>.rootNode; +</pre> + +<h3 id="返回值"> 返回值</h3> + +<p>返回 {{domxref("Node")}} 对象.</p> + +<h2 id="Example" name="Example">样例</h2> + +<p>下面是输出<code>body</code>的根节点样例:</p> + +<pre class="brush: js">console.log(document.body.rootNode);</pre> + +<h2 id="Notes" name="Notes">参考</h2> + +<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 + <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, + 而不是使用者所预期得到的节点.</p> + + <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> + 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 此属性已经废弃, 使用{{domxref("Node.getRootNode()")}} 方法替代.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">样式</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/conflicting/web/api/node/index.html b/files/zh-cn/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..08e2664f32 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/node/index.html @@ -0,0 +1,20 @@ +--- +title: Node.baseURIObject +slug: conflicting/Web/API/Node +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +original_slug: Web/API/Node/baseURIObject +--- +<div> + {{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>baseURIObject</code>属性返回一个代表当前节点(通常是文档节点或元素节点)的基URL的{{Interface("nsIURI")}}对象.该属性类似与{{domxref("Node.baseURI")}},只是它返回的是一个包含更多信息的nsIURI对象,而不只是一个URL字符串.</p> +<p>该属性在所有类型的节点上都可用(HTML,XUL,SVG,MathML等),但脚本本身必须要有 UniversalXPConnect权限(XUL默认有这个权限,HTML没有).</p> +<p>查看{{domxref("Node.baseURI")}}了解基URL(base URL)是什么.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> +<h2 id="Notes" name="Notes">附注</h2> +<p>该属性只读,尝试为它赋值会抛出异常. 此外,这个属性只能从特权代码中访问.</p> +<h2 id="Specification" name="Specification">规范</h2> +<p>不属于任何规范,mozilla私有属性.</p> diff --git a/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..03f557b347 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,20 @@ +--- +title: Node.nodePrincipal +slug: conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +original_slug: Web/API/Node/nodePrincipal +--- +<div> + {{APIRef}}{{Fx_minversion_header(3)}}{{Non-standard_header}} + <p>The <code><strong>Node.nodePrincipal</strong></code> read-only property returns the {{Interface("nsIPrincipal")}} object representing current security context of the node.</p> + <p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> + <h2 id="Syntax" name="Syntax">Syntax</h2> + <pre class="syntaxbox"><i>principalObj</i> = element.nodePrincipal +</pre> + <h2 id="Notes" name="Notes">Notes</h2> + <p>This property is read-only; attempting to write to it will throw an exception. In addition, this property may only be accessed from privileged code.</p> + <h2 id="Specification" name="Specification">Specification</h2> + <p>Not in any specification.</p> +</div> +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/push_api/index.html b/files/zh-cn/conflicting/web/api/push_api/index.html new file mode 100644 index 0000000000..76526ed4ce --- /dev/null +++ b/files/zh-cn/conflicting/web/api/push_api/index.html @@ -0,0 +1,425 @@ +--- +title: Using the Push API +slug: conflicting/Web/API/Push_API +tags: + - Push + - Push API + - Service Workers + - Using the Push API +translation_of: Web/API/Push_API +translation_of_original: Web/API/Push_API/Using_the_Push_API +original_slug: Web/API/Push_API/Using_the_Push_API +--- +<p class="summary"><span>W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> </span>为开发人员在Web应用程序中提供了一些令人兴奋的新功能：本文提供了一个简单的演示，以获取Push通知的设置和运行。</p> + +<p>在任何时候——不论这一应用是否处于激活状态——从服务器向客户端推送消息或者通知的能力，是一种原生应用已经享受了一段时间的能力。现在 Web 应用也拥有了这一能力。桌面系统上的 Firefox 43+ 和 Chrome 42+ 已经支持 Push 的大部分功能，移动平台也很可能在不久的将来提供支持。 {{domxref("PushMessageData")}} 当前只在 Firefox Nightly (44+) 中提供实验性的支持，并且这一实现也可能会变更。</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox OS 的早期版本使用了这一 API 的一个 proprietary 版本，叫做 <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a> ，现在已经被 Push API 标准废弃。</p> +</div> + +<h2 id="Demo_the_basis_of_a_simple_chat_server_app">Demo: the basis of a simple chat server app</h2> + +<p>我们创建的这一 demo 是一个简单的聊天应用。它提供了一个表单，用来输入聊天内容，还有一个按钮，用来订阅（subscribe）推送的消息。按下按钮后，你将订阅这一消息推送服务，服务器会记录你的信息，同时当前所有的订阅者会收到一个推送消息，告诉他们有人订阅。</p> + +<p>此时，新订阅者的名字会出现在订阅者列表上，同时界面上会出现一个文本域和一个提交按钮，允许订阅者发送消息。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> + +<p>要运行这一 demo，请参阅 <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>。请注意，想要在 Chrome 中使用这一应用并且以一个更合理的方式运行，服务器端还需要大量的工作。然而，推送的细节解释起来特别麻烦，我们先概览这个推送接口是怎么运作的，然后再回来详细了解。</p> + +<h2 id="Technology_overview">Technology overview</h2> + +<p>这一部分提供了这一例子中用到的技术的概览。</p> + +<p>Web Push 消息是 <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> 技术族的一部分；特别的，一个service worker想要接收消息，就必须在一个页面上被激活。 在 service worker 接收到推送的消息后，你可以决定如何显示这一消息。你可以：</p> + +<ul> + <li>发送一个 <a href="/en-US/docs/Web/API/Notifications_API">Web notification</a> ，弹出一个系统通知提醒用户。这一操作需要发送推送消息的权限。</li> + <li>通过 {{domxref("MessageChannel")}} 将消息送回主页面。</li> +</ul> + +<p>通常这两者可以结合使用，下面的 demo 显示了两者的特点。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注：</strong>你需要在服务器端部署某种形式的代码来处理endpoint数据的加密和发送推送消息的请求。</span> 在我们的Demo里，我们把那些代码放进了一个快速、劣质的服务器代码（a quick-and-dirty server ）里，部署在 <a href="https://nodejs.org/">NodeJS</a> 上。</p> +</div> + +<p>service worker 需要订阅推送消息服务。在订阅服务时，每一个会话会有一个独立的端点（endpoint）。订阅对象的属性({{domxref("PushSubscription.endpoint")}}) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 service worker。不同浏览器需要用不同的推送消息服务器。</p> + +<h3 id="加密（Encryption）">加密（Encryption）</h3> + +<div class="note"> +<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> +</div> + +<p>在通过推送消息发送数据时，数据需要进行加密。数据加密需要通过 {{domxref("PushSubscription.getKey()")}} 方法产生的一个公钥。这一方法在服务器端运行，通过复杂的密码学机制来生成公钥，详情可参阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 。以后可能会有更多用于处理推送消息加密的库出现，在这一 demo 中，我们使用 Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> +</div> + +<h3 id="Push_workflow_summary">Push workflow summary</h3> + +<p>这里我们总结一下推送消息的实现。在之后的章节中你可以找到这一 demo 代码的更多细节。</p> + +<ol> + <li>请求 web 通知及你所使用的其他功能的权限。</li> + <li>调用 {{domxref("ServiceWorkerContainer.register()")}} ，注册一个 service worker。</li> + <li>使用 {{domxref("PushManager.subscribe()")}} 订阅推送消息。</li> + <li>取得与订阅相关联的 endpoint （{{domxref("PushSubscription.endpoint")}}），并且生成一个客户公钥（{{domxref("PushSubscription.getKey()")}}） 。注意 <code>getKey()</code> 是试验性的，只在 Firefox 有效。</li> + <li>将详细信息发送给服务器，服务器可以用这些信息来发送推送消息。这一 demo 使用 {{domxref("XMLHttpRequest")}} ，但你也可以使用 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 。</li> + <li>如果你使用 <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> 来和 service worker 通信，则创建一个新的 message channel ({{domxref("MessageChannel.MessageChannel()")}}) ，并且在 service worker 调用 {{domxref("Worker.postMessage()")}} ，将 <code>port2</code> 发送给 service worker ，以建立 communication channel 。你应该设置一个 listener 来响应从 service worker 发来的消息。</li> + <li>在服务器端，存储端点以及其他在发送推送消息给订阅者时需要的信息（我们使用一个简单的文本文件，但你可以使用数据库，或者其他你喜欢的方式）。在生产环境中，请保护好这些信息，以防恶意的攻击者用这些信息给订阅者推送垃圾消息。</li> + <li>要发送一个推送消息，你需要向端点 URL 发送一个 HTTP <code>POST</code> 。这一请求需要包括一个 TTL 头，用来规定用户离线时消息队列的最大长度。要在请求中包括数据，你需要使用客户公钥进行加密。在我们的 demo 中，我们使用 <a href="https://github.com/marco-c/web-push">web-push</a> 模块来处理困难的部分。</li> + <li>在你的 service worker 中，设置一个 <code>push</code> 事件句柄来响应接收到的推送消息。 + <ol> + <li>如果你想要将一个信道消息发送回主 context（看第6步），你需要先取得之前发送给 service worker 的 <code>port2</code> 的引用 ({{domxref("MessagePort")}}) 。这个可以通过传给 <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}) 的{{domxref("MessageEvent")}} 对象取得。 具体地说，是 <code>ports</code> 属性的索引 0 。 之后你可以用 {{domxref("MessagePort.postMessage()")}} 来向 <code>port1</code> 发送消息 。</li> + <li>如果你想要使用系统通知，可以调用 {{domxref("ServiceWorkerRegistration.showNotification()")}} 。注意，在我们的代码中，我们将其运行在一个 {{domxref("ExtendableEvent.waitUntil()")}} 方法中——这样做将事件的 生命周期（lifetime）扩展到了通知被处理后，使得我们可以确认事情像我们期望的那样进行。<span id="cke_bm_307E" style="display: none;"> </span></li> + </ol> + </li> +</ol> + +<h2 id="Building_up_the_demo">Building up the demo</h2> + +<p>让我们浏览一下 demo 的代码，理解一下它是如何工作的。</p> + +<h3 id="The_HTML_and_CSS">The HTML and CSS</h3> + +<p>这个 demo 的 HTML 和 CSS 没有什么需要特别留意的地方。初始化时，HTML包含一个简单的表单、一个按钮和两个列表。按钮用来订阅，两个列表分别显示订阅者和聊天消息。订阅之后，会出现用来输入聊天消息的控件。</p> + +<p>为了对不干扰 Push API 的理解，CSS被设计得非常简单。</p> + +<h3 id="The_main_JavaScript_file">The main JavaScript file</h3> + +<p>JavaScript 明显更加重要。让我们看看主 JS 文件。</p> + +<h4 id="Variables_and_initial_setup">Variables and initial setup</h4> + +<p>开始时，我们声明一些需要使用的变量：</p> + +<pre class="brush: js">var isPushEnabled = false; +var useNotifications = false; + +var subBtn = document.querySelector('.subscribe'); +var sendBtn; +var sendInput; + +var controlsBlock = document.querySelector('.controls'); +var subscribersList = document.querySelector('.subscribers ul'); +var messagesList = document.querySelector('.messages ul'); + +var nameForm = document.querySelector('#form'); +var nameInput = document.querySelector('#name-input'); +nameForm.onsubmit = function(e) { + e.preventDefault() +}; +nameInput.value = 'Bob';</pre> + +<p>首先，是两个布尔变量，一个用来记录 Push 是否被订阅，一个用来记录是否有通知的权限。</p> + +<p>其次，是订阅/取消订阅 {{htmlelement("button")}} 的引用，以及发送消息按钮的引用和输入的引用（订阅成功之后按钮和输入才会创建）。</p> + +<p>接下来，是页面上的三个{{htmlelement("div")}} 元素的引用，在需要插入元素时会用到（比如创建 <em>Send Chat Message</em> 按钮，或者 <em>Messages </em>列表中增加聊天消息时）。</p> + +<p>最后，是 name selection 表单和 {{htmlelement("input")}} 元素的引用。我们给 input 一个默认值，并且使用 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 方法，让按下回车时不会自动提交表单。</p> + +<p>之后，我们通过 {{domxref("Notification.requestPermission","requestPermission()")}} 请求发送web通知的权限：</p> + +<pre class="brush: js">Notification.requestPermission();</pre> + +<p>在 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> 时我们运行一段代码，让应用开始初次加载时的初始化过程。首先我们给 subscribe/unsubscribe 按钮添加 click event listener ，让这一按钮在已经订阅（<code>isPushEnabled为真）</code>时执行 <code>unsubscribe()</code> 函数，否则执行 <code>subscribe()</code> ：</p> + +<pre class="brush: js">window.addEventListener('load', function() { + subBtn.addEventListener('click', function() { + if (isPushEnabled) { + unsubscribe(); + } else { + subscribe(); + } + });</pre> + +<p>之后，我们检查 service workers 是否被支持。如果支持，则用 {{domxref("ServiceWorkerContainer.register()")}} 注册一个 service worker 并且运行 <code>initialiseState()</code> 函数。若不支持，则向控制台输出一条错误信息。</p> + +<pre class="brush: js"> // Check that service workers are supported, if so, progressively + // enhance and add push messaging support, otherwise continue without it. + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('sw.js').then(function(reg) { + if(reg.installing) { + console.log('Service worker installing'); + } else if(reg.waiting) { + console.log('Service worker installed'); + } else if(reg.active) { + console.log('Service worker active'); + } + + initialiseState(reg); + }); + } else { + console.log('Service workers aren\'t supported in this browser.'); + } +}); +</pre> + +<p>接下来是 <code>initialiseState()</code> 函数。查看 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> 可获得有注释的完整源码（简洁起见，此处省略）。</p> + +<p><code>initialiseState()</code> 首先检查 service workers 是否支持 notifications ，如果支持则将 <code>useNotifications</code> 变量设为真。之后检查用户是否允许 said notifications ， push messages 是否支持，并分别进行设置。</p> + +<p>最后，使用 {{domxref("ServiceWorkerContainer.ready()")}} 来检测 service worker 是否被激活并开始运行，会返回一个Promise对象。当这一 promise 对象 resolve 时，我们访问 {{domxref("ServiceWorkerRegistration.pushManager")}} 属性，得到一个 {{domxref("PushManager")}} 对象，再调用该对象的 {{domxref("PushManager.getSubscription()")}}方法，最终获得用来推送消息的订阅对象。当第二个 promise 对象 resolve 时，我们启用 subscribe/unsubscribe 按钮（<code>subBtn.disabled = false;）</code>，并确认订阅对象。</p> + +<p>这样做了之后，订阅的准备工作已经完成了。即使这一应用并没有在浏览器中打开， service worker 也依然可能在后台处于激活状态。如果我们已经订阅，则对UI进行更新，修改按钮的标签，之后将 <code>isPushEnabled 设为真，通过 </code>{{domxref("PushSubscription.endpoint")}} 取得订阅的端点，通过 {{domxref("PushSubscription.getKey()")}} 生成一个公钥，调用<code> updateStatus()</code> 方法与服务器进行通信。</p> + +<p>此外，我们通过 {{domxref("MessageChannel.MessageChannel()")}} 得到一个新的 {{domxref("MessageChannel")}} 对象，并通过 {{domxref("ServiceworkerRegistration.active")}} 得到一个激活的 service worker 的引用，然后通过 {{domxref("Worker.postMessage()")}} 在主浏览器 context 和 service worker 间建立起一个信道。浏览器 context 接收 {{domxref("MessageChannel.port1")}} 中的消息。当有消息到来时，我们使用 <code>handleChannelMessage()</code> 方法来决定如何处理数据（参阅{{anch("Handling channel messages sent from the service worker")}}）。</p> + +<h4 id="订阅和取消订阅（Subscribing_and_unsubscribing）">订阅和取消订阅（Subscribing and unsubscribing）</h4> + +<p>现在把我们的注意力转到 <code>subscribe()</code> 和 <code>unsubscribe()</code> 函数上，它们用来订阅或取消订阅 来自服务器的通知。</p> + +<p>在订阅的时候，我们使用 {{domxref("ServiceWorkerContainer.ready()")}}方法再一次确认service worker处于激活状态并且可以使用了。当 promise 成功执行，我们用{{domxref("PushManager.subscribe()")}}方法订阅服务。如果订阅成功，我们会得到一个 {{domxref("PushSubscription")}} 对象，它携带了endpoint信息 ，并且可以产生（generate）一个公钥的方法 (再多说一点，{{domxref("PushSubscription.endpoint")}}属性和{{domxref("PushSubscription.getKey()")}}方法)，我们要把这两个信息传递给<code>updateStatus()</code> 函数，同时还要传递第三个信息——更新状态的类型（订阅还是不订阅），让它能够把这些必要的细节传递给服务器。</p> + +<p>我们也需要更新我们应用的状态 (设置 <code>isPushEnabled</code> 为<code>true</code>) 和 UI (激活<strong>订阅</strong>或者不订阅的按钮，同时改变标签的显示状态，让用户下一次点击按钮的时候变成<strong>不订阅</strong>的状态或者订阅的状态。)</p> + +<p><code><font face="Open Sans, Arial, sans-serif">不订阅 </font>unsubscribe()</code> 函数在结构上和订阅函数相识，然而基本上它们做的是完全相反的事； 最值得注意的不同是得到当前订阅对象是使用{{domxref("PushManager.getSubscription()")}}方法，而且使用{{domxref("PushSubscription.unsubscribe()")}}方法获得的promise对象。</p> + +<p>在两个函数中也提供了适当的错误处理函数。</p> + +<p><code><font face="Open Sans, Arial, sans-serif">为了节省时间，我们只在下面展示</font>subscribe()的代码；</code>查看全部请点击 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> + +<pre class="brush: js">function subscribe() { + // Disable the button so it can't be changed while + // we process the permission request + + subBtn.disabled = true; + + navigator.serviceWorker.ready.then(function(reg) { + reg.pushManager.subscribe({userVisibleOnly: true}) + .then(function(subscription) { + // The subscription was successful + isPushEnabled = true; + subBtn.textContent = 'Unsubscribe from Push Messaging'; + subBtn.disabled = false; + + // Update status to subscribe current user on server, and to let + // other users know this user has subscribed + var endpoint = subscription.endpoint; + var key = subscription.getKey('p256dh'); + updateStatus(endpoint,key,'subscribe'); + }) + .catch(function(e) { + if (Notification.permission === 'denied') { + // The user denied the notification permission which + // means we failed to subscribe and the user will need + // to manually change the notification permission to + // subscribe to push messages + console.log('Permission for Notifications was denied'); + + } else { + // A problem occurred with the subscription, this can + // often be down to an issue or lack of the gcm_sender_id + // and / or gcm_user_visible_only + console.log('Unable to subscribe to push.', e); + subBtn.disabled = false; + subBtn.textContent = 'Subscribe to Push Messaging'; + } + }); + }); +}</pre> + +<h4 id="更新应用和服务器的状态">更新应用和服务器的状态</h4> + +<p><code><font face="Open Sans, Arial, sans-serif">接下来的一个主要的JavaScript函数就是</font>updateStatus()，当订阅和取消订阅的时候，它负责更新UI中与服务器沟通的信息并发送状态更新的请求给服务器。</code></p> + +<p>这个函数做了三件事当中的哪一件事，取决于下面赋值给statusType的类型：</p> + +<ul> + <li><code>subscribe</code>: 一个按钮和和一个聊天信息的input输入框被创建后，就被插入到UI界面里面，然后通过XHR请求发送了一个包含状态信息的字面量对象给服务器，包含了statusType（subscribe）、订阅者的名字（ username of the subscriber）、订阅终端（subscription endpoint）和客户端公钥（client public key）。</li> + <li><code>unsubscribe</code>: 这个和订阅基本上是相反的——聊天的按钮和输入框被移除，同时又一个字面量对象被发送给服务器，告诉它取消订阅。</li> + <li><code>init</code>: 当应用被第一次载入或者安装的时候会运行——它创建与服务器沟通的UI,并且发送一个对象告诉服务器是哪一个用户初始化（重新载入）了。</li> +</ul> + +<p>再多说一句，为了简介这里不会展示全部的代码。检查全部代码点击： <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> + +<h4 id="处理在service_worker中发送过来的channel_message">处理在service worker中发送过来的channel message</h4> + +<p>正如刚才我们提到的，当我们接收到从service worker发送的<a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> 时，我们的 <code>handleChannelMessage()</code> 函数才会去执行它。 我们用{{domxref("channel.port1.onmessage")}}事件处理函数去处理{{event("message")}} event, :</p> + +<pre class="brush: js">channel.port1.onmessage = function(e) { + handleChannelMessage(e.data); +}</pre> + +<p>这个函数会在service worker中发送信息给页面的时候在页面中执行（This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>）。</p> + +<p> <code>handleChannelMessage()</code> 函数如下：</p> + +<pre class="brush: js">function handleChannelMessage(data) { + if(data.action === 'subscribe' || data.action === 'init') { + var listItem = document.createElement('li'); + listItem.textContent = data.name; + subscribersList.appendChild(listItem); + } else if(data.action === 'unsubscribe') { + for(i = 0; i < subscribersList.children.length; i++) { + if(subscribersList.children[i].textContent === data.name) { + subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); + } + } + nameInput.disabled = false; + } else if(data.action === 'chatMsg') { + var listItem = document.createElement('li'); + listItem.textContent = data.name + ": " + data.msg; + messagesList.appendChild(listItem); + sendInput.value = ''; + } +}</pre> + +<p>这个函数会做什么取决于传入的action参数的赋值：</p> + +<ul> + <li><code>subscribe</code> or <code>init</code> (在启动和重启的时候,我们需要在这个示例中做同样的事情):一个{{htmlelement("li")}} 元素被创建，它的text content 被设置为 <code>data.name</code> (订阅者的名字),然后它被添加到订阅者的列表里(一个简单的 {{htmlelement("ul")}}元素里)，所以这里是订阅者（再次）加入聊天的一个视觉反馈。</li> + <li><code>unsubscribe</code>: 我们循环遍历订阅者的列表，查找谁的 text content 和<code>data.name</code> (取消订阅者的名字)相同，然后删除这个节点以提供一个视觉反馈表示有人取消订阅了。</li> + <li><code>chatMsg</code>: 和第一个表现的形式类似, 一个 {{htmlelement("li")}}被创建，它的text content设置为<code>data.name + ": " + data.msg</code> (例如： "Chris: This is my message"), 然后它被添加到每一个用户UI的聊天列表里。</li> +</ul> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注: </strong></span> 我们需要在更新DOM之前传递需要的数据给主页面（main context）， 因为service worker不能操作DOM。你在使用前一定要知道service worker的一些限制。阅读 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> 获取更多细节.</p> +</div> + +<h4 id="发送聊天信息">发送聊天信息</h4> + +<p>当‘<em>Send Chat Message‘ </em>按钮被点击后，相关联的文本域的内容就作为聊天内容被发送出去。这个由 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> </a>函数处理(再多说一句,为了简洁就不展示了). 这个和 <code>updateStatus()</code> 的不同之处也是差不多的。 (查看 {{anch("Updating the status in the app and server")}}) — 我们获得 endpoint 和 public key 是来自一个 {{domxref("PushSubscription")}} 对象, 这个对象又是来自于 {{domxref("ServiceWorkerContainer.ready()")}} 方法和{{domxref("PushManager.subscribe()")}}方法。它们（endpoint、public key）被传递进一个字面量对象里面（ in a message object），同时含有订阅用户的名字，聊天信息，和chatMsg的statusType，然后通过{{domxref("XMLHttpRequest")}}对象发送出去的，。</p> + +<h3 id="服务端（The_Server）">服务端（The Server）</h3> + +<p>正如我们上面提到的，我们需要一个服务端的容器去存储订阅者的信息，并且还要在状态更新时发送推送消息给客户端。 我们已经用一种hack的方式把一些需要的东西放到了一个快速-劣质(quick-and-dirty)的<a href="http://nodejs.org/">NodeJS</a> 服务端上(<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>)，用于处理来自客户端JavaScript的异步请求。</p> + +<p>它用一个文本文件 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)去存储订阅者的信息；这个文件一开始是空的(empty)。 有四种不同类型的请求，分别由被传输过来的对象中的statusType决定；这些在客户端通俗易懂的的状态类型同样也适用于服务端，因为服务端也有相同的状态。下面是这四个个状态在服务端代表的各自的含义。</p> + +<ul> + <li><code>subscribe</code>: 服务器将会添加订阅者的信息到存储的容器里 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)，包括endpoint等，然后会推送给所有已经订阅了的订阅者一条消息，告诉每一个订阅者有新的订阅者加入了聊天。</li> + <li><code>unsubscribe</code>: 服务器在存储订阅信息的容器里找到发送该类型请求的订阅者的详情，并移除这个订阅者的信息，然后推送一条消息给所有依然订阅的用户，告诉他们这个人取消订阅了。</li> + <li><code>init</code>: 服务器从那个存储信息的文本中读取所有订阅者的信息，然后告诉他们有人初始化或者再次加入了这个聊天。</li> + <li><code>chatMsg</code>: 推送一条订阅者想发送的信息给所有的订阅者；服务器从存储容器里读取现在订阅者的信息，然后服务器给每一个人推送一条包含聊天信息的消息。</li> +</ul> + +<p>其他需要注意的东西：</p> + +<ul> + <li>我们使用的是Node.js的 <a href="https://nodejs.org/api/https.html">https 模块 </a> 去创建的服务器，因为出于安全考虑，service worker只允许工作在一个安全的连接里(https only)。这也就是为什么我们要在应用里包含了<code>.pfx</code> 安全证书，然后在Node代码里引用这个证书。</li> + <li>当你发送一条没有数据的推送消息的时候，只需要把它用http的post请求发送给对应订阅者的endpoint的URL。然而，当推送消息里包含数据的时候，你需要加密它，这个加密过程往往很复杂。随着时间的推移，一些出现的库文件（libraries）帮你做了这部分的工作。在这个demo里面我们用了 Marco Castelluccio的NodeJS库文件（<a href="https://github.com/marco-c/web-push">web-push library</a>)。查阅这些源代码了解更多加密过程是怎么完成的 (查阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 获取更多细节)。库文件让发送一条推送消息变得简单（ The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>）。</li> +</ul> + +<h3 id="The_service_worker">The service worker</h3> + +<p>现在让我们来看看服务工作者代码（sw.js），它响应由{{Event("push")}}事件表示的推送消息。 这些通过（{{domxref("ServiceWorkerGlobalScope.onpush")}}）事件处理程序在服务工作人员的范围内处理; 它的工作就是为每个收到的消息做出回应。 我们首先通过调用{{domxref("PushMessageData.json()")}}将收到的消息转换回对象。然后，通过查看这个对象的action属性，就能知道这个推送消息的类型：</p> + +<ul> + <li><code>subscribe</code> 或者 <code>unsubscribe</code>: 我们发送一个系统通知是通过 <code>fireNotification()</code> 函数，但同时，也通过{{domxref("MessageChannel")}}把这个消息发送回函数的上下文环境（main context），以便我们相应地更新订阅者列表（subscriber list） (查看 {{anch("Handling channel messages sent from the service worker")}} 了解详细).</li> + <li><code>init</code> 或者 <code>chatMsg</code>: 我们只是发送一个消息回主要的上下文（main context）来处理 <code>init</code> 和 <code>chatMsg</code> 情况（这些不需要系统通知）.</li> +</ul> + +<pre class="brush: js">self.addEventListener('push', function(event) { + var obj = event.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + fireNotification(obj, event); + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +});</pre> + +<p>下一步， 让我们看看 <code>fireNotification()</code> 函数的代码 (它真的太他妈简单了).</p> + +<pre class="brush: js">function fireNotification(obj, event) { + var title = 'Subscription change'; + var body = obj.name + ' has ' + obj.action + 'd.'; + var icon = 'push-icon.png'; + var tag = 'push'; + + event.waitUntil(self.registration.showNotification(title, { + body: body, + icon: icon, + tag: tag + })); +}</pre> + +<p>我们先在这里列出通知消息框所需要的资源：标题、主体内容、图标。然后我们通过 {{domxref("ServiceWorkerRegistration.showNotification()")}} 方法把这个通知发送出去，同时提供一个"push"给tag属性，表示这是一个推送消息，以便我们能够在全部的通知消息中找到（identify）这个推送消息。 当我们成功发送一条推送消息，它可能会在用户对应的电脑或者设备上展示一个系统通知对话框，在不同的设备上通知对话框的外观可能是不一样的（下面的这张图片展示的是Mac OSX系统上的通知对话框）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> + +<p>注意，我们做的这些都包裹在{{domxref("ExtendableEvent.waitUntil()")}} 方法里；这是为了让ServiceWorker在发送通知消息的过程中依然保持活动，知道消息发送完成。 <code>waitUntil()</code> 会延长service worker的生命周期至（这个周期里）所有活动都已经完成。</p> + +<div class="note"> +<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> +</div> + +<h2 id="处理推送订阅过早失效（Handling_premature_subscription_expiration）">处理推送订阅过早失效（Handling premature subscription expiration）</h2> + +<p>有时候，推送订阅会过早失效，而不会调用{{domxref("PushSubscription.unsubscribe()")}} 。例如，当服务器过载或长时间处于脱机状态时，可能会发生这种情况。这是高度依赖于服务器的，所以确切的行为很难预测。 在任何情况下，您都可以通过查看{{Event("pushsubscriptionchange")}} 事件来处理此问题，您可以通过提供{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} 事件处理程序来侦听此事件；这个事件只会在这种情况下才会被触发。</p> + +<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token"> // do something,一般来说都会在这里重新订阅， + // 并通过XHR或者Fetch发送新的订阅信息回服务器</span><span class="comment token"> +</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>注意，我们在demo里没有覆盖这种情况，因为订阅端点（subscription ending）作为一个简单的聊天服务器并不是什么难事。但是对于更复杂的示例，您可能需要重新订阅（resubscribe ）用户。</p> + +<h2 id="（让Chrome支持的额外步骤）Extra_steps_for_Chrome_support">（让Chrome支持的额外步骤）Extra steps for Chrome support</h2> + +<p>为了让应用也能够在Chrome上面运行，我们需要一些额外的步骤，因为在Chrome上，现在需要依赖谷歌云消息推送（Google's Cloud Messaging） 服务才能正常工作。</p> + +<h3 id="配置谷歌云消息推送（Setting_up_Google_Cloud_Messaging）">配置谷歌云消息推送（Setting up Google Cloud Messaging）</h3> + +<p>按照以下步骤配置:</p> + +<ol> + <li>跳转到 <a href="https://console.developers.google.com">Google Developers Console</a> 然后创建一个新项目。</li> + <li>进入你项目主页(例如：我们的示例是在 <code>https://console.developers.google.com/project/push-project-978</code>), 然后 + <ol> + <li>在你的应用选项里打开<em> Google APIs </em>。</li> + <li>在下一屏，在移动API那一部分下面点击“<em>Cloud Messaging for Android</em>” 。</li> + <li>点击开启API按钮。</li> + </ol> + </li> + <li>现在你需要记下你的项目编号和API key,因为待会儿你会用到他们。 它们在这些地方: + <ol> + <li><strong>项目编号</strong>: 点击左侧的主页；项目编号在你的项目主页上方很容易看见的位置。</li> + <li><strong>API key</strong>: 点击左边菜单里的证书（<em>Credentials</em> ）；API key 能够在这个页面找到。</li> + </ol> + </li> +</ol> + +<h3 id="manifest.json">manifest.json</h3> + +<p>你需要在你的应用里包含Google应用风格的 <code>manifest.json</code> ，这里面的 <code>gcm_sender_id</code> 参数需要设置为你的项目编号。下面是一个简单的示例（<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>）:</p> + +<pre class="brush: js">{ + "name": "Push Demo", + "short_name": "Push Demo", + "icons": [{ + "src": "push-icon.png", + "sizes": "111x111", + "type": "image/png" + }], + "start_url": "/index.html", + "display": "standalone", + "gcm_sender_id": "224273183921" +}</pre> + +<p>同时，你也需要在HTML文档用一个{{HTMLElement("link")}} 标签里指向你的manifest文件:</p> + +<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> + +<h3 id="userVisibleOnly参数">userVisibleOnly参数</h3> + +<p>Chrome 要求你在订阅推送服务的时候设置 <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly 参数</code></a> 为 <code>true</code> , 表示我们承诺每当收到推送通知时都会显示通知。这可以在我们的<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127"> <code>subscribe()</code> 函数</a> 中看到。</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> +</div> diff --git a/files/zh-cn/conflicting/web/api/url/index.html b/files/zh-cn/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..3245250d9c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/url/index.html @@ -0,0 +1,106 @@ +--- +title: Window.URL +slug: conflicting/Web/API/URL +tags: + - Window.URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +original_slug: Web/API/Window/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p><strong>Window.URL</strong> 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 {{domxref("URL")}} 对象。</p> + +<div class="note"> +<p>Note: 此功能在Web Workers中可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<p>调用一个静态方法：</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>构造一个新对象：</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 从 Gecko 2 (Firefox 4) 到 包括Gecko 18, Gecko 返回一个不标准的nsIDOMMozURLProperty内部类型. 在实践中, 这是没有意义的.</p> + +<p>[2] 在非标准名称webkitURL下实现。</p> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{domxref("URL")}} API.</li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/web_storage_api/index.html b/files/zh-cn/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..c5bde57455 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,543 @@ +--- +title: Storage +slug: conflicting/Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +original_slug: Web/Guide/API/DOM/Storage +--- +<h3 id="概述"> + 概述</h3> +<p> + DOM存储是一套在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> 规范中首次引入的与<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关的特性</a>的总称, 现在已经分离出来,单独发展成为独立的<a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web存储</a>规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在<a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> 和 <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>中首次引入.</p> +<div class="note"> + <strong>注意:</strong> DOM存储有别于<a href="/zh-cn/Storage" title="zh-cn/Storage">mozStorage</a> (Mozilla的XPCOM接口,用来访问SQLite) 也有别于<a href="/zh-cn/Session_store_API" title="zh-cn/Session_store_API">Session store API</a> (一个<a href="/zh-cn/XPCOM" title="zh-cn/XPCOM">XPCOM</a> 存储工具,主要为扩展程序使用).</div> +<h3 id="描述"> + 描述</h3> +<p> + DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).</p> +<p> + 基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"<a class="external" href="http://msdn.microsoft.com/zh-cn/library/ms531424%28VS.85%29.aspx">userData behavior</a>",它允许你在多重浏览器会话中永久地保存数据.)</p> +<p> + DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器<a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookie</a>的能力有限，而且不支持组织持久数据，其他方法（如<a href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">flash本地存储</a>）需要外部插件支持。</p> +<p> + 由<a href="http://aaronboodman.com/">Aaron Boodman</a>编写的<a href="http://aaronboodman.com/halfnote/">halfnote</a>（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。</p> +<p> + 虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。</p> +<h3 id="参考"> + 参考</h3> +<p> + 以下所提到的对象都是全局对象，作为 <a href="/zh-cn/DOM/window" title="/zh-cn/DOM/window">window 对象</a> 的属性存在。这意味着可以以 <code>sessionStorage</code> 或者 <code>window.sessionStorage 的形式访问这些对象。</code>(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)</p> +<h4 id="Storage"> + <code>Storage</code></h4> +<p> + 它是所有Storage实例（<code>sessionStorage</code>和<code>globalStorage[location.hostname]</code>）的构造函数，设置<code>Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }</code>，可通过<code>localStorage.removeKey</code> 和 <code>sessionStorage.removeKey</code>访问到。</p> +<p> + <code>globalStorage</code>对象不是<code>Storage</code>的实例，而是<code>StorageObsolete</code>的一个实例。</p> +<p> + <code>Storage</code>被定义在WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> 中,如下:</p> +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +}; +</pre> +<div class="note"> + <strong>注意：</strong>虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。</div> +<div class="note"> + <strong>注意：</strong>需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 <code>.toString</code> 方法被转换成字符串。所以一个普通对象将会被存储为 <code>"[object Object]"</code>，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。</div> +<h4 id="sessionStorage_2"> + <code>sessionStorage</code></h4> +<p> + <code>sessionStorage</code> 是个全局对象，它维护着<span style="line-height: inherit;">在页面会话(page session)期间有效的</span><span style="line-height: inherit;">存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。</span><span style="line-height: inherit;"> </span></p> +<pre class="brush: js">// 保存数据到当前会话的存储空间 +sessionStorage.setItem("username", "John"); + +// 访问数据 +alert( "username = " + sessionStorage.getItem("username")); +</pre> +<p> + 当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。<code>sessionStorage</code> 对象在处理这种情况的时候是最有用的。</p> +<p> + {{ fx_minversion_note("3.5", "在Firefox 3.5之前的版本中,如果浏览器意外崩溃,则在重启后,sessionStorage中保存的数据不会被恢复.之后的版本中,会恢复上次崩溃前的sessionStorage数据.") }}</p> +<p> + <strong>例子:</strong></p> +<p> + 自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。</p> +<pre class="brush: js"> // 获取到我们要循环保存的文本域 + var field = document.getElementById("field"); + + // 查看是否有一个自动保存的值 + // (只在浏览器被意外刷新时) + if ( sessionStorage.getItem("autosave")) { + // 恢复文本域中的内容 + field.value = sessionStorage.getItem("autosave"); + } + + // 每隔一秒检查文本域中的内容 + setInterval(function(){ + // 并将文本域的值保存到session storage对象中 + sessionStorage.setItem("autosave", field.value); + }, 1000); +</pre> +<p> + <strong>更多信息:</strong></p> +<ul> + <li> + <a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> +</ul> +<h4 id="localStorage"> + <code>localStorage</code></h4> +<p> + <code>localStorage</code> is the same as sessionStorage with same same-origin rules applied but it is persistent. <code>localStorage</code> was introduced in Firefox 3.5.</p> +<div class="note"> + <strong>注意：</strong>当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。</div> +<h4 id="兼容性"> + 兼容性</h4> +<p> + 这些<code> Storage</code> 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 <code>localStorage</code> 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。</p> +<p> + This algorithm is an exact imitation of the <code>localStorage</code> object, but making use of cookies.</p> +<pre class="brush: js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + var sExpDate = new Date(); + sExpDate.setDate(sExpDate.getDate() - 1); + document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) { + iCouple = aCouples[iCouplId].split(/\s*=\s*/); + if (iCouple.length > 1) { + oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> +<div class="note"> + <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> +<p> + Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8. It also makes use of cookies.</p> +<pre class="brush: js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + var sExpDate = new Date(); + sExpDate.setDate(sExpDate.getDate() - 1); + document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> +<div class="note"> + <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to get, add, change or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> +<h5 id="与_globalStorage_的关系的兼容性"> + 与 globalStorage 的关系的兼容性</h5> +<p class="note"> + <code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. 例如，在 <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 中不能访问 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 中的 <code>localStorage</code> 对象，但是它们都可以访问同一个 <code>globalStorage。</code> <code>localStorage</code> 是个标准接口，但 <code>globalStorage</code> 是非标准的。所以你的代码最好不要依赖这些关系。</p> +<p> + Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items, only extending <code>StorageObsolete.prototype</code> does.</p> +<h4 id="globalStorage_2"> + <code>globalStorage</code></h4> +<p> + {{ Non-standard_header() }}{{ obsolete_header("13.0") }}<code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML 5 has been removed from the HTML 5 specification in favor of <code>localStorage</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).</p> +<div class="warning"> + Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> +<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access +globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); +</pre> +<p> + Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> +<ul> + <li> + <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> +</ul> +<p> + <strong>例子:</strong></p> +<p> + All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p> +<p> + Remember a user's username for the particular sub-domain that is being visited:</p> +<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); +</pre> +<p> + Keep track of the number of times that a user visits all pages of your domain:</p> +<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string + globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); +</pre> +<h3 id="存储位置以及清除数据"> + 存储位置以及清除数据</h3> +<p> + In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> +<ul> + <li> + DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) + <ul> + <li> + But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> + <li> + Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> + </ul> + </li> + <li> + DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> + <li> + Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/zh-cn/HTML/Using_the_application_cache" title="zh-cn/Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> +</ul> +<p> + See also <a href="/zh-cn/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="zh-cn/Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> +<h3 id="更多信息"> + 更多信息</h3> +<ul> + <li> + <a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li> + <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> +<h3 id="例子"> + 例子</h3> +<ul> + <li> + <a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial describing how to use the Web Storage API by creating a simple address book application</li> + <li> + <a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li> + <a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> + <li> + <a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> + <li> + <a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML 5 localStorage example</a>. Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> + <li> + <a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> + <li> + <a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> + <li> + <a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> +</ul> +<h3 id="浏览器兼容性"> + 浏览器兼容性</h3> +<p> + {{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th> + Feature</th> + <th> + Chrome</th> + <th> + Firefox (Gecko)</th> + <th> + Internet Explorer</th> + <th> + Opera</th> + <th> + Safari (WebKit)</th> + </tr> + <tr> + <td> + localStorage</td> + <td> + 4</td> + <td> + 3.5</td> + <td> + 8</td> + <td> + 10.50</td> + <td> + 4</td> + </tr> + <tr> + <td> + sessionStorage</td> + <td> + 5</td> + <td> + 2</td> + <td> + 8</td> + <td> + 10.50</td> + <td> + 4</td> + </tr> + <tr> + <td> + globalStorage</td> + <td> + {{ CompatNo() }}</td> + <td> + 2-13</td> + <td> + {{ CompatNo() }}</td> + <td> + {{ CompatNo() }}</td> + <td> + {{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th> + Feature</th> + <th> + Android</th> + <th> + Firefox Mobile (Gecko)</th> + <th> + IE Phone</th> + <th> + Opera Mobile</th> + <th> + Safari Mobile</th> + </tr> + <tr> + <td> + Basic support</td> + <td> + {{ CompatUnknown() }}</td> + <td> + {{ CompatUnknown() }}</td> + <td> + {{ CompatUnknown() }}</td> + <td> + {{ CompatUnknown() }}</td> + <td> + {{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p> + All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> +<p> + </p> +<h3 id="相关链接"> + 相关链接</h3> +<ul> + <li> + <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/zh-cn/DOM/document.cookie" title="zh-cn/DOM/document.cookie">document.cookie</a></code>)</li> + <li> + <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li> + <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> + <li> + <a href="/zh-cn/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="zh-cn/XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> + <li> + <a href="/zh-cn/DOM/event/StorageEvent" title="zh-cn/DOM/Event/StorageEvent">StorageEvent</a></li> +</ul> +<p> + {{ HTML5ArticleTOC() }}</p> +<p> + {{ languages( { "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "en": "en/DOM/Storage" } ) }}</p> +<p> + ---------------------------------</p> +<p> + </p> +<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> + 摘要</h3> +<p> + DOM Storage，就是在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> specification中介绍的那些<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关特性</a>集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone & iPad Safari。</p> +<div class="note"> + <strong>Note:</strong> DOM Storage 与 <a href="/cn/Storage" title="cn/Storage">mozStorage</a> （Mozilla对于SQLite的XPCOM接口）和<a href="/cn/Session_store_API" title="cn/Session_store_API">Session store API</a>(扩展使用的一个<a href="/cn/XPCOM" title="cn/XPCOM">XPCOM</a>存储).不同</div> +<h3 id=".E6.8F.8F.E8.BF.B0" name=".E6.8F.8F.E8.BF.B0"> + 描述</h3> +<p> + DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。</p> +<p> + 目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>"，他允许你在多重浏览器会话中永久地保存数据。</p> +<p> + DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">浏览器cookies</a> 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a>）。</p> +<p> + 第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a> 写的 <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a>(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。</p> +<p> + 不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。</p> +<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83"> + 参考</h3> +<p> + 下面的内容都是作为每个<a href="/cn/DOM/window" title="cn/DOM/window"><code>window</code> 对象</a>的属性存在的全局对象。这也就是说，可以通过<code>sessionStorage</code> 或者 <code>window.sessionStorage</code> 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）</p> +<h4 id="sessionStorage" name="sessionStorage"> + <code>sessionStorage</code></h4> +<p> + 这是一个全局对象（<code>sessionStorage</code>），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。</p> +<pre class="eval">// 将数据存入当前会话的一个存储中 +sessionStorage.username = "John"; + +// 访问某些已存储的数据 +alert( "username = " + sessionStorage.username ); +</pre> +<p> + <code>sessionStorage</code> 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，</p> +<div class="bug"> + <strong>Note:</strong> <code>sessionStorage</code> 还应该有在浏览器崩溃后存储和恢复数据的功能，不过由于{{ Bug(339445) }}的原因，这个功能到现在还没有在Firefox中实现。这个功能实现之后，<code>sessionStorage</code>的防御功能就十分有用了。</div> +<p> + <strong>举例:</strong></p> +<p> + 自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。</p> +<pre class="eval"> // 获得我们要跟踪的那个文本字段 + var field = document.getElementById("field"); + + // 看看我们是否有一个autosave的值 + // (这将只会在页面被突然刷新时发生) + if ( sessionStorage.autosave ) { + // 恢复文本字段中的内容 + field.value = sessionStorage.autosave; + } + + // 每秒钟检查一次文本字段的内容 + setInterval(function(){ + // 并把结果保存到会话存储对象中 + sessionStorage.autosave = field.value; + }, 1000); +</pre> +<p> + <strong>更多信息:</strong></p> +<ul> + <li> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">sessionStorage specification</a></li> +</ul> +<h4 id="globalStorage" name="globalStorage"> + <code>globalStorage</code></h4> +<p> + 这是一个全局对象(<code>globalStorage</code>)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。</p> +<pre class="eval">// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据 +globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?"; + +// 可以这样访问为任何网页任何域存储的数据 +globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; +</pre> +<p> + 特别地，<code>globalStorage</code>对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用<code>globalStorage</code>的网页，我们有下面这些存储对象可以使用：</p> +<ul> + <li> + <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。</li> + <li> + <code>globalStorage{{ mediawiki.external('\'mozilla.org\'') }}</code> - 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> + <li> + <code>globalStorage{{ mediawiki.external('\'org\'') }}</code> - 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> + <li> + <code>globalStorage{{ mediawiki.external('') }}</code> - 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。</li> +</ul> +<div class="bug"> + <strong>注意:</strong> firefox目前还没有实现<code>globalStorage{{ mediawiki.external('tld') }}</code> 和 <code>globalStorage{{ mediawiki.external('') }}</code> （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 <a class="external" href="http://ejohn.org/blog/dom-storage-answers/">更多信息</a></div> +<p> + <strong>示例:</strong></p> +<p> + 下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。</p> +<p> + 记录某个指定子域名下面正在访问的用户的username：</p> +<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> +<p> + 跟踪一个用户在你的域名下所访问的所有页面的次数：</p> +<pre class="eval"> // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt + globalStorage['mozilla.org'].visits = + parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; +</pre> +<p> + 记录所有你访问的网站：</p> +<pre class="eval"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname; +</pre> +<p> + <strong>更多信息:</strong></p> +<ul> + <li> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">globalStorage specification</a></li> +</ul> +<h3 id="More_information" name="More_information"> + More information</h3> +<ul> + <li> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 Specification</a></li> + <li> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Web Applications 1.0 Storage Specification</a></li> + <li> + <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> +<h3 id="Examples" name="Examples"> + Examples</h3> +<ul> + <li> + <a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a></li> + <li> + <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - Note writing application that uses DOM Storage.</li> +</ul> +<h3 id="Related" name="Related"> + Related</h3> +<ul> + <li> + <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/cn/DOM/document.cookie" title="cn/DOM/document.cookie">document.cookie</a></code>)</li> + <li> + <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li> + <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..bfc9b851dc --- /dev/null +++ b/files/zh-cn/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,24 @@ +--- +title: WebRTC API overview +slug: conflicting/Web/API/WebRTC_API +translation_of: Web/API/WebRTC_API#WebRTC_concepts_and_usage +translation_of_original: Web/API/WebRTC_API/Overview +original_slug: Web/API/WebRTC_API/Overview +--- +<p>{{WebRTCSidebar}}</p> + +<p><span class="seoSummary">WebRTC是由一些关联的API和协议一起协作，支持两个或多个终端之间交换数据和媒体信息的技术。这篇文章提供了这些APIs的介绍和提供的功能。</span></p> + +<h2 id="RTCPeerConnection">RTCPeerConnection</h2> + +<p>在媒体能够交换，或者数据通道建立之前，你需要把两个终端连接起来。这个连接过程的完成就是使用{{domxref("RTCPeerConnection")}} 接口。</p> + +<h2 id="MediaStream">MediaStream</h2> + +<p>{{domxref("MediaStream")}}接口描述了终端之间传输的媒体流。这个流由一个或多个媒体通道信息；通常这是一个音频通道或者视频通道信息。一个媒体流能够传输实时的媒体（例如音频通话或者视频会议等）或者已存的媒体（例如网上电影）。</p> + +<h2 id="RTCDataChannel">RTCDataChannel</h2> + +<p>WebRTC支持在建立连接的两个终端之间相互的传输二进制数据。这个过程通过{{domxref("RTCDataChannel")}}接口。</p> + +<p>这个接口可以作为数据的反向通道，甚至作为主要的数据通道去交换各种数据。例如在游戏应用中，通过这个接口可以实现多玩家支持，相互传送玩家的动作更新之类的数据。</p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html new file mode 100644 index 0000000000..7aa818b5d5 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html @@ -0,0 +1,19 @@ +--- +title: WebRTC 架构概览 +slug: conflicting/Web/API/WebRTC_API/Protocols +tags: + - WebRTC 架构概览 +translation_of: Web/API/WebRTC_API/Protocols +translation_of_original: Web/API/WebRTC_API/Architecture +original_slug: Web/API/WebRTC_API/Architecture +--- +<p>{{WebRTCSidebar}}</p> + +<p>用来创建WebRTC连接的API底层使用了一系列的网络协议和连接标准。这篇文章涵盖了这些标准。</p> + +<p>为了让WebRTC正常工作，需要的协议、标准和API比较繁多。因此对于初学者来说可能会比较难以理解。当你一旦上手，你会惊喜地发现原来这一切都是如此的优雅和简单易懂。至于你信不信，反正我是信了。</p> + + + + +<p>重定向 <a class="redirect" href="/zh-Hans/docs/Web/API/WebRTC_API/Protocols">WebRTC 协议介绍</a></p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html new file mode 100644 index 0000000000..d3ca2eb29c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -0,0 +1,264 @@ +--- +title: WebRTC basics +slug: conflicting/Web/API/WebRTC_API/Signaling_and_video_calling +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +translation_of_original: Web/API/WebRTC_API/WebRTC_basics +original_slug: Web/API/WebRTC_API/WebRTC_basics +--- +<p>{{WebRTCSidebar}}</p> + +<div class="summary"> +<p>当你理解 <a href="/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC 架构</a>之后, 你就可以阅读本篇文章了。本篇文章将带领你贯穿整个跨浏览器 RTC 应用的创建过程。到本章结束的时候，你就拥有了一个可以运行的点对点的数据通道和媒体通道。</p> +</div> + +<div class="note"> +<p><strong>本页的案例过期了! 不要再尝试他们了。</strong></p> +</div> + +<h2 id="注意">注意</h2> + +<p>由于近期 API 做了一些修改，一些比较老的案例需要修复，暂时不可用。</p> + +<ul> + <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> + <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> + <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> +</ul> + +<p>当前可以正常工作的的案例是:</p> + +<ul> + <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> +</ul> + +<p>正确的实现方式或许可以从<a href="http://w3c.github.io/webrtc-pc/">标准</a>中推断出来。</p> + +<p>本页包含的其余的过期的信息，在 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">bugzilla</a>。</p> + +<h2 id="Shims">Shims</h2> + +<p>就像你想的那样，这样前卫的 API 肯定需要浏览器前缀才可以，然后再将它转换成通用的变量。</p> + +<pre class="brush: js">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; +var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; +navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> + +<h2 id="RTCPeerConnection">RTCPeerConnection</h2> + +<p>这是使用 peer 创建连接的起始点。它接收一个配置选项，其中配置了用来创建连接的 ICE 服务器信息。</p> + +<pre class="brush: js">var pc = new RTCPeerConnection(configuration);</pre> + +<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> + +<p> {{domxref("RTCConfiguration")}} 对象包含了一些信息，这些信息是关于用来做 ICE 的 TURN 和 / 或 STUN 服务器的。这是用来确保大多数用户可以避免因 NAT 和防火墙导致的无法建立连接。</p> + +<pre class="brush: js">var configuration = { + iceServers: [ + {urls: "stun:23.21.150.121"}, + {urls: "stun:stun.l.google.com:19302"}, + {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} + ] +}</pre> + +<p>Google 运行了一个我们可以使用的<a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">公共 STUN 服务器</a>。我也在 http://numb.viagenie.ca/ 创建了一个免费的可以访问 TURN 服务器的账户。可能你也想这么做，你只要替换到你自己的许可证书就可以了。</p> + + + +<h2 id="ICECandidate">ICECandidate</h2> + + + +<p>创建好 PeerConnection 并传入可用的 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> 之后，当 ICE 框架找到可以使用 Peer 创建连接的 “候选者”，会立即触发一个事件（onicecandidate）。这些 “候选者” 就是 ICECandidate, 而且他们会在 <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a> 事件中执行一个回调函数。</p> + +<pre class="brush: js" lang="javascript">pc.onicecandidate = function (e) { + // candidate exists in e.candidate + if (!e.candidate) return; + send("icecandidate", JSON.stringify(e.candidate)); +};</pre> + +<p>回调函数执行之后，我们必须使用信令通道 (signal channel) 将候选发送到其他的点。在 Chrome 中，ICE 框架一般会找到重复的候选者，所以，我一般只发送第一个，然后将处理函数删除。Firfox 中将候选者包含在了 Offer SDP 中。</p> + +<h2 id="Signal_Channel">Signal Channel</h2> + +<p>现在我们有了 ICE 候选，然后需要将它发送到我们的另一端，以让它知道如何跟我们建立连接。然而，现在有一个先有鸡还是先有蛋的问题。我们想要 PeerConnection 发送数据到另一端，但是在那之前我们需要先把元数据发送过去……</p> + +<p>现在就是用到信令通道（Signal Channel）的时候了。它的任何一个数据传输方法都允许两个端点之间交换信息。在本文中，我们将使用 <a href="http://firebase.com">FireBase</a>。因为它设置起来灰常简单，并且不需要任何主机或者服务器端的代码编写。</p> + +<p>现在我们想象只有两个两个方法：send()， 它将使用一个键，然后将数据赋值给它；recv() ，当一个键有值的时候会调用一个处理函数。</p> + +<p>数据库的结构就像下面这样：</p> + +<pre class="brush: js" lang="json">{ + "": { + "candidate:": … + "offer": … + "answer": … + } +}</pre> + +<p>连接会被 roomId 分割，然后会保存四条信息：发起者 (oferer) 的 ICE 候选、应答者 (answerer) 的 ICE 候选、offer SDP 和 answer SDP.</p> + +<h2 id="Offer">Offer</h2> + +<p>Offer SDP 是用来向另一端描述期望格式（视频, 格式, 解编码, 加密, 解析度, 尺寸 等等）的元数据。</p> + +<p>一次信息的交换需要从一端拿到 offer，然后另外一端接受这个 offer 然后返回一个 answer。</p> + +<pre class="brush: js" lang="javascript">pc.createOffer(function (offer) { + pc.setLocalDescription(offer, function() { + send("offer", JSON.stringify(pc.localDescription)); + }, errorHandler); +}, errorHandler, options);</pre> + +<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3> + +<p>创建 offer 的过程如果出现问题，就会执行这个函数，并且将错误的详细信息作为第一个参数。</p> + +<pre class="brush: js" lang="javascript">var errorHandler = function (err) { + console.error(err); +};</pre> + +<h3 id="options"><strong><code>options</code></strong></h3> + +<p>Offer SDP 的选项.</p> + +<pre class="brush: js" lang="javascript">var options = { + offerToReceiveAudio: true, + offerToReceiveVideo: true +};</pre> + +<p><code>offerToReceiveAudio/Video</code> 告诉另一端，你想接收视频还是音频。对于 DataChannel 来说，这些是不需要的。</p> + +<p>offer 创建好之后，我们必须将本地 SDP 设置进去，然后通过信令通道将它发送到另一端，之久就静静地等待另一端的 Answer SDP 吧.</p> + +<h2 id="Answer">Answer</h2> + +<p>Answer SDP 跟 offer 是差不多的，只不过它是作为相应的。有点像接电话一样。我们只能在接收到 offer 的时候创建一次 Answer.</p> + +<pre class="brush: js" lang="javascript">recv("offer", function (offer) { + offer = new SessionDescription(JSON.parse(offer)) + pc.setRemoteDescription(offer); + + pc.createAnswer(function (answer) { + pc.setLocalDescription(answer, function() { + send("answer", JSON.stringify(pc.localDescription)); + }, errorHandler); + }, errorHandler); +});</pre> + +<h2 id="DataChannel">DataChannel</h2> + +<p>我将首先阐述如何将 PeerConnection 用在 DataChannels API 上，并且如何在 peers 之间传输任意数据。</p> + +<p><em>注意：撰写这篇文章的时候，DataChannels 在 Chrome 和 Firefox 之间是无法互用的。Chrome 支持了一个类似的私有协议，这个协议将在不久被标准协议支持。</em></p> + +<pre class="brush: js" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> + +<p>offer 的创建者和 channel 的创建者应该是同一个 peer。 answer 的创建者将在 PeerConnection 的 ondatachannel 回调中接收到 这个 channel。你必须在创建了这个 offer 之后立即调用 createDataChannel()。</p> + +<h3 id="channelName"><strong><code>channelName</code></strong></h3> + +<p>这个字符串会作为 channel 名字的标签。注意：确保你 Channel 的名字中没有空格，否则在 Chrome 中调用 createAnswer() 将会失败。</p> + +<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> + +<pre class="brush: js" lang="javascript">var channelOptions = {};</pre> + +<p>当前 Chrome 还不支持这些选项，所以你可以将这些选项留空。检查 RFC 以获取更多关于这些选项的信息。</p> + +<h3 id="Channel_事件和方法">Channel 事件和方法</h3> + +<h4 id="onopen"><strong><code>onopen</code></strong></h4> + +<p>当连接建立的时候会被执行。</p> + +<h4 id="onerror"><strong><code>onerror</code></strong></h4> + +<p>连接创建出错时执行。第一个参数是一个 error 对象。</p> + +<pre class="brush: js" lang="javascript">channel.onerror = function (err) { + console.error("Channel Error:", err); +};</pre> + +<h4 id="onmessage"><strong><code>onmessage</code></strong></h4> + +<pre class="brush: js" lang="javascript">channel.onmessage = function (e) { + console.log("Got message:", e.data); +}</pre> + +<p>这是连接的核心。当你接收到消息的时候，这个方法会执行。第一个参数是一个包含了数据、接收时间和其它信息的 event 对象。</p> + +<h4 id="onclose"><strong><code>onclose</code></strong></h4> + +<p>当连接关闭的时候执行。</p> + +<h3 id="绑定事件"><strong>绑定事件</strong></h3> + +<p>如果你是这个 channel 的创建者（offerer）, 你可以直接在通过 createChannel 创建的 DataChannel 上绑定事件。如果你是 answerer 你必须使用 PeerConnection 的 ondatachannel 回调去访问这个 channel。</p> + +<pre class="brush: js" lang="javascript">pc.ondatachannel = function (e) { + e.channel.onmessage = function () { … }; +};</pre> + +<p>这个 channel 可以在传递到回调函数中的 event 对象中以 e.channel 的方式访问。</p> + +<h4 id="send()"><strong><code>send()</code></strong></h4> + +<pre class="brush: js" lang="javascript">channel.send("Hi Peer!");</pre> + +<p>这个方法允许你直接传递数据到 peer！令人惊奇。你必须传递确保传递的数据是 String, Blob, ArrayBuffer 或者 ArrayBufferView 中的一种类型，所以，确保字符串化对象。</p> + +<h4 id="close()"><strong><code>close()</code></strong></h4> + +<p>在连接应该中止的时候关闭 channel。推荐在页面卸载的时候调用。</p> + +<h2 id="Media">Media</h2> + +<p>现在我们将会涉及到如何传递诸如音视频的媒体的话题。要显示音视频，你必须在文档中加入包含 autoplay 属性的 <video> 标签。</p> + +<h3 id="Get_User_Media">Get User Media</h3> + +<pre class="brush: js"><video id="preview" autoplay></video> + +var video = document.getElementById("preview"); +navigator.getUserMedia(constraints, function (stream) { + video.src = URL.createObjectURL(stream); +}, errorHandler);</pre> + +<p><strong><code>constraints</code></strong></p> + +<p>约定你想从用户获取到的媒体类型。</p> + +<pre class="brush: js" lang="javascript">var constraints = { + video: true, + audio: true +};</pre> + +<p>如果你只想进行音频聊天，移除 video 成员。</p> + +<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4> + +<p>当返回请求的媒体错误时被调用</p> + +<h3 id="Media_Events_and_Methods">Media Events and Methods</h3> + +<h4 id="addStream"><strong><code>addStream</code></strong></h4> + +<p>将从 getUserMedia 返回的流加入 PeerConnection。</p> + +<pre class="brush: js" lang="javascript">pc.addStream(stream);</pre> + +<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> + +<pre class="brush: js"><video id="otherPeer" autoplay></video> + +var otherPeer = document.getElementById("otherPeer"); +pc.onaddstream = function (e) { + otherPeer.src = URL.createObjectURL(e.stream); +};</pre> + +<p>当连接建立并且其它的 peer 通过 addStream 将流加入到了连接中时会被调用。你需要另外的 <video> 标签去显示其它 peer 的媒体。</p> + +<p>第一个参数是包含了其它 peer 流媒体的 event 对象。</p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html new file mode 100644 index 0000000000..4f15dae53e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html @@ -0,0 +1,77 @@ +--- +title: WebRTC +slug: conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0 +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +original_slug: WebRTC +--- +<p>WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。</p> + +<p>WebRTC组件是通过JavaScript APIs获得的。目前正在开发中的APIs包括：网络流API(能够提供音频和视频)，点对点连接API(允许两个或更多用户通过浏览器进行联系)。同样在开发中的还有数据API，能够让浏览器在实时游戏，文字聊天，文件传输和其他应用中与其他类型数据进行交流。</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">关于Webrtc的文档</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/Introduction" title="https://developer.mozilla.org/en-US/docs/WebRTC/Introduction">介绍WebRTC</a></dt> + <dd>关于什么是WebRTC以及它是如何工作的一个介绍性指南。</dd> + <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">使用网络流 API</a></dt> + <dd>使用网络流API传输音频和视频的指南。</dd> + <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">使用网络流API</a></dt> + <dd>指导如何使用网络流API创建音频流和视频流。</dd> + <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">运用WebRTC进行点对点通信</a></dt> + <dd>如何使用 WebRTC 的API进行对等通信。</dd> + <dt>使用WebRTC进行点对点通信</dt> + <dd>如何使用WebRTC APTs进行点对点通信交流的指导。</dd> + <dt><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="taking webcam photos">从网络相机获取图像</a></dt> + <dd>介绍 WebRTC 是什么并如何工作。</dd> + <dt>从网络摄像头获得图像</dt> + <dd>介绍如何利用 WebRTC 通过网络摄像头获得图像。</dd> + <dt><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a></dt> + <dd>这个API支持媒体流对象的生成和操作。</dd> + <dt>多媒体API</dt> + <dd>这个API支持通用多媒体对象。</dd> + <dt><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> + <dd>这个函数能获取系统媒体设备。</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">查看全部...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">从社区获取帮助</h2> + + <p> </p> + + <p>在开发利用WebRTC技术的网站和Web应用程序时，与其他人进行对话可能会很有用。</p> + + <ul> + <li>咨询媒体主题论坛: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> + </ul> + + <ul> + <li>Mozilla's Media IRC 通道提出你的问题: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">不要忘记网络礼节...</a></span></p> + + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关话题</h2> + + <ul> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">使用 HTML5 音频 和 </a>视频</li> + </ul> + + <h2 class="Tools" id="相关资源">相关资源</h2> + + <ul> + <li>{{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/api/window/localstorage/index.html b/files/zh-cn/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..eab3bf85fe --- /dev/null +++ b/files/zh-cn/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,137 @@ +--- +title: LocalStorage +slug: conflicting/Web/API/Window/localStorage +tags: + - 存储API + - 离线 +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +original_slug: Web/API/Storage/LocalStorage +--- +<p><code>localStorage</code> 与<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code> 一样，都遵循同源策略，但是它是持续存在的。<code>localStorage</code> 首次出现于 Firefox 3.5。</p> + +<div class="note"><strong>Note:</strong> 当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。</div> + +<pre class="brush:js" style="font-size: 14px;">// Save data to the current local store +localStorage.setItem("username", "John"); + +// Access some stored data +alert( "username = " + localStorage.getItem("username"));</pre> + +<p class="note">本地存储（<code>localStorage</code>）的持续存在对许多事情都有帮助，包括这个示例<a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>所演示的记录页面查看次数。</p> + +<h4 id="兼容性" style="line-height: 18px; font-size: 1.28571428571429rem;">兼容性</h4> + +<p><code>Storage</code> 对象最近才加入标准，因此可能并不被所有浏览器支持。你可以通过在你的scripts代码前加入以下两段代码中某一段来规避在不能原生支持的执行环境使用<code>localStorage</code>对象的问题。</p> + +<p>该算法借助于cookies，对localStorage对象进行了严谨的实现。</p> + +<pre class="brush: js" style="font-size: 14px;">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> + +<div class="note"><strong>注意：</strong>数据的最大大小是通过cookies来严格限制的。可以使用这样的算法实现，使用<code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>这两个函数进行添加、改变或删除一个键。使用方法为<code>localStorage.yourKey = yourValue;和delete localStorage.yourKey;</code>进行设置和删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> + +<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的<code>sessionStorage</code>实现会将储存键值访问权限限定在当前浏览上下文。</div> + +<p>下面是另一个，并不那么严谨的<code>localStorage</code>对象的实现。相比上一个方法，它更简单且能与旧的浏览器良好兼容，如Internet Explorer < 8 (甚至能在<strong> Internet Explorer 6 上正常工作</strong>)。它同样是使用cookies来实现的。</p> + +<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> + +<div class="note"><strong>注意：</strong>数据量的最大值是通过cookies来严格限制的。可以使用<code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>等方法获取、设置或删除一个键。使用方法<code>localStorage.yourKey = yourValue;</code>获取、添加、改变或者删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> + +<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的sessionStorage实现会将储存键值限定在当前浏览环境上下文。</div> + +<h4 id="与globalStorage的兼容性及关系" style="line-height: 18px; font-size: 1.28571428571429rem;">与globalStorage的兼容性及关系</h4> + +<p class="note"><code>localStorage</code> 和 <code>globalStorage[location.hostname]</code> 是一样的, 除了作用域是在 HTML5 origin (结构 + 主机名 + 非标准的端口)， 并且 <code>localStorage</code> 是一个 <code>Storage</code> 实例 ，而<code>globalStorage[location.hostname]</code> 是一个 <code>StorageObsolete</code> 实例，下面将要讨论这个。 例如, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 无法访问与 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 相同的 <code>localStorage</code> 对象 ，但是它们可以访问同一个 <code>globalStorage</code>. <code>localStorage</code> 是标准的接口，<code>globalStorage</code> 不是， 所以不要依赖于 <code>globalStorage</code> 。 </p> + +<p>请注意，给globalStorage[location.hostname]设置一个属性并不会影响到localStorage。拓展<code>Storage.prototype</code>也不会影响<code>globalStorage</code>对象，只有拓展<code>StorageObsolete.prototype</code>才会影响。</p> + +<h4 id="存储格式">存储格式</h4> + +<p><code>Storage</code>的键和值都是以每个字符占2个字节的UTF-16字符串(<a href="/zh-CN/docs/Web/API/DOMString">DOMString</a>)格式存储的。</p> diff --git a/files/zh-cn/conflicting/web/api/window/moveto/index.html b/files/zh-cn/conflicting/web/api/window/moveto/index.html new file mode 100644 index 0000000000..066314234c --- /dev/null +++ b/files/zh-cn/conflicting/web/api/window/moveto/index.html @@ -0,0 +1,18 @@ +--- +title: Window.restore() +slug: conflicting/Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +translation_of_original: Web/API/Window/restore +original_slug: Web/API/Window/restore +--- +<p>{{APIRef}}</p> + +<p>这个方法现在已经失效，不过可以使用下面的方法代替：</p> + +<p>{{domxref("window.moveTo")}}({{domxref("window.screenX")}}, {{domxref("window.screenY")}});</p> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + + + +<p>{{Compat("api.Window.restore")}}</p> diff --git a/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..4a7bcf7366 --- /dev/null +++ b/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,121 @@ +--- +title: WebAPI +slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 +translation_of: Web/API +translation_of_original: WebAPI +original_slug: WebAPI +--- +<p><strong>WebAPI</strong>指一组设备兼容套件和访问接口，它允许Web应用及其内容访问设备硬件（比如电池状态或设备振动器），同时也可以获取设备上的数据（比如日历或联系人等信息）。通过这些API，我们希望对Web应用进行扩展，实现过去只有专有平台才可以实现的功能。</p> + +<div class="note"> +<p><strong>注意:</strong> 可以从<a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">packaged apps</a>获取每一个标记的简要说明。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">通信接口</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">网络信息接口（Network Information API）</a></dt> + <dd>提供当前网络连接的基本信息，如网速。</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">蓝牙（Bluetooth）</a></dt> + <dd>提供了对设备蓝牙的底层访问。</dd> + <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">移动连接接口（Mobile Connection API）</a>{{NonStandardBadge}}</dt> + <dd>提供设备的无线连接信息，如信号强度、操作者信息等。</dd> + <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">网络状态接口（Network Stats API）</a>{{NonStandardBadge}}</dt> + <dd>监控数据使用并将这些信息提供给授权应用。</dd> + <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">电话（Telephony）</a> {{NonStandardBadge}}</dt> + <dd>允许应用处理和回应呼叫和使用内建的电话页面。</dd> + <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">短信（WebSMS）</a>{{NonStandardBadge}}</dt> + <dd>允许应用发送和接收短信，也能访问和管理存储在设备上的短信。</dd> + <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">无线连接信息接口（WiFi Information API）</a>{{NonStandardBadge}}</dt> + <dd>提供信号强度、当前连接网络的名称及可用的WIFI网络等信息。</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">硬件访问接口</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">环境光传感器接口（Ambient Light Sensor API）</a></dt> + <dd>提供对环境光传感器的访问，使应用可以分辨设备周围环境光的等级。</dd> + <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">电池状态接口（</a><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">）</a></dt> + <dd>提供设备的电量信息，和设备是否在充电的信息。</dd> + <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">相机接口（</a><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">）</a>{{NonStandardBadge}}</dt> + <dd>允许应用使用内置摄像头拍摄照片、录制视频。</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">地理位置接口（</a><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">）</a></dt> + <dd>提供设备的物理位置信息。</dd> + <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">指针锁定接口（Pointer Lock API）</a></dt> + <dd>使应用锁定鼠标位置，并且获取鼠标的移动而不是绝对坐标，常用于游戏中。</dd> + <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">电量管理接口（Power Management API）</a>{{NonStandardBadge}}</dt> + <dd>使应用可以点亮或关闭屏幕、CPU、设备供电等，也提供了对资源锁定事件的侦听和检查。</dd> + <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">附近接口（Proximity API）</a></dt> + <dd>允许查看设备附近的物体，比如用户的面部。</dd> + <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">设备朝向接口（Device Orientation API）</a></dt> + <dd>当设备的朝向改变（横向或纵向）时提供通知。</dd> + <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">屏幕朝向接口（Screen Orientation API）</a></dt> + <dd>当屏幕的朝向改变时提供通知。也可以用来指定朝向。</dd> + <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">振动器接口（Vibration API）</a></dt> + <dd>允许应用在必要的时候访问设备震动器（比如游戏的触感反馈）。不推荐用于通知类的事件。通知类的事件情使用<a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a>。</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">查看全部...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">数据管理接口</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">文件句柄接口（FileHandle API）</a></dt> + <dd>提供对可写文件的支持。</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">索引数据库（IndexedDB）</a></dt> + <dd>结构化数据的客户端存储，并实现高效搜索。</dd> + <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">设置接口（Settings API）</a> {{NonStandardBadge}}</dt> + <dd>允许设备检查、更新存储在设备上的系统设置选项。</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">其他接口</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">闹钟接口（Alarm API）</a></dt> + <dd>允许应用安排通知。也支持在特定时间自动启动应用。</dd> + <dt><a href="/en-US/docs/Apps" title="Apps">应用接口（Apps API）</a>{{NonStandardBadge}}</dt> + <dd>开放网络应用接口提供对安装和管理网络应用的支持。也允许网络应用查询付款信息。</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>浏览器接口（Browser API）</strong></a>{{NonStandardBadge}}</dt> + <dd>提供完全使用Web技术构建Web浏览器的支持。实质就是，浏览器中的浏览器。</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">闲置接口（Idle API）</a></dt> + <dd>允许应用在用户未使用设备的时候接收通知。</dd> + <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">授权接口（Permissions API）</a>{{NonStandardBadge}}</dt> + <dd>集中管理应用授权，用于“设置”应用。</dd> + <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">单纯推送接口（Simple Push API）</a></dt> + <dd>允许平台发送提醒信息到特定应用。</dd> + <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">时间／时钟接口（Time/Clock API）</a>{{NonStandardBadge}}</dt> + <dd>允许设置当前时间。另外，需要使用<a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>来设置时区。</dd> + <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">网络活动（Web Activities）</a>{{NonStandardBadge}}</dt> + <dd>允许应用将一项任务委托给另外的应用。比如一个应用可以请求另外的应用来选择或创建照片。通常情况下，应当允许用户选择被委托的应用。</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI社区</h2> + +<p>如果在这些接口的使用上需要帮助，这里有几种联系其他开发者的方式：</p> + +<ul> + <li>在论坛资讯：{{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>访问WebAPI IRC频道：<a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">注意网络礼仪...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关主题</h2> + +<ul> + <li><a href="/en-US/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">文档对象模型（DOM）</a>是将HTML文档描述为一棵树</li> + <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>：WebAPI主题及文档状态的列表</li> +</ul> +</div> +</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport/index.html b/files/zh-cn/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..5932c8d574 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport/index.html @@ -0,0 +1,81 @@ +--- +title: height +slug: conflicting/Web/CSS/@viewport +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +original_slug: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<div><code><strong>height</strong></code><strong> </strong>CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。</div> + +<p>如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: css notranslate">/* One value */ +height: auto; +height: 320px; +height: 15em; + +/* Two values */ +height: 320px 200px; +</pre> + +<h3 id="合法值">合法值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>真实生效的高度值将根据其他 CSS 属性计算得出。</dd> + <dt><code><length></code></dt> + <dd>一个非负的绝对或相对值。</dd> + <dt><code><percentage></code></dt> + <dd>一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。</dd> +</dl> + +<h2 id="正式定义">正式定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="正式语法">正式语法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="设置最小和最大高度">设置最小和最大高度</h3> + +<pre class="brush: css notranslate">@viewport { + height: 500px; +}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("css.at-rules.viewport.height")}}</p> + +<h2 id="同时查看">同时查看</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html new file mode 100644 index 0000000000..eac64dabdb --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html @@ -0,0 +1,111 @@ +--- +title: orientation +slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a +tags: + - CSS + - CSS Description +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/orientation +original_slug: Web/CSS/@viewport/orientation +--- +<div>{{CSSRef}}</div> + +<h2 id="摘要">摘要</h2> + +<p>此 <strong><code>orientation</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 描述符控制由{{cssxref("@viewport")}}定义文档的方向。</p> + +<p><span style="line-height: 1.5;">通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}</span></p> + +<h2 id="语法">语法</h2> + +<pre class="brush:css">/* Keyword values */ +orientation: auto; +orientation: portrait;/*锁定为纵向*/ +orientation: landscape;/* 锁定为横向*/ +</pre> + +<h3 id="取值">取值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。</dd> + <dt><code>portrait</code></dt> + <dd>文档被锁定为纵向。</dd> + <dt><code>landscape</code></dt> + <dd>文档被锁定为横向。</dd> +</dl> + +<h3 id="标准语法">标准语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">标准</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8 {{property_prefix("-o")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..8798295f4b --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,68 @@ +--- +title: viewport-fit +slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +original_slug: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}} {{Draft}} {{SeeCompatTable}}</div> + +<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: css; no-line-numbers">/* 关键值*/ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="属性值">属性值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>此值不影响初始布局视图端口，并且整个web页面都是可查看的。</dd> + <dt><code>contain</code></dt> + <dd>视图端口按比例缩放，以适合显示内嵌的最大矩形。</dd> + <dt><code>cover</code></dt> + <dd>视图端口被缩放以填充设备显示。强烈建议使用 <a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>，以确保重要内容不会出现在显示之外。</dd> +</dl> + +<h3 id="形式语法">形式语法</h3> + +<pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, <strong>viewport-fit=cover</strong>"</span><span style="color: #0000ff;">></span></pre> + +<h2 id="注意">注意</h2> + +<p>在使用 <code>viewport-fit</code> 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用<a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">兼容性表是由结构化数据生成的。如果您要为数据做出贡献，请点击连接 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 向我们发送请求。</div> + +<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> + +<h2 id="另请参见">另请参见</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..709a42b3d1 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,134 @@ +--- +title: width +slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +original_slug: Web/CSS/@viewport/width +--- +<div>{{CSSRef}}</div> + +<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p> + +<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css">/* An example with one viewport value: */ +@viewport { + width: 320px; +} + +/* An example with two viewport values: */ +@viewport { + width: 320px, 120px; +} + +</pre> + + + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>The used value is calculated from the other CSS descriptors' values.</dd> + <dt><code><length></code></dt> + <dd>A non-negative absolute or relative length.</dd> + <dt><code><percentage></code></dt> + <dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title=""><percentage></a></pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 93px; width: 950px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>29 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 93px; width: 948px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>4.4</td> + </tr> + </tbody> + </table> + </td> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>29</td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..0e9cc815ec --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,70 @@ +--- +title: zoom +slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 +tags: + - CSS + - CSS Descriptor +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +original_slug: Web/CSS/@viewport/zoom +--- +<div>{{ CSSRef }}</div> + +<p><strong><code>zoom</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。</p> + +<p>当设置<code>1.0</code> 或 <code>100%</code>时表示不缩放。更大的值放大，更小的值缩小。</p> + +<p>{{cssinfo}}</p> + +<h2 id="语法">语法</h2> + +<pre class="brush:css">/* Keyword value */ +zoom: auto; + +/* <number> values */ +zoom: 0.8; +zoom: 2.0; + +/* <percentage> values */ +zoom: 150%; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>根据`viewport`来既定当前标签的缩放。</dd> + <dt><code><number></code></dt> + <dd>必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。</dd> + <dt><code><percentage></code></dt> + <dd>必须是一个非负的百分比。以100%为基础进行缩放。</dd> +</dl> + +<h3 id="形式语法">形式语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/zh-cn/conflicting/web/css/_colon_is/index.html b/files/zh-cn/conflicting/web/css/_colon_is/index.html new file mode 100644 index 0000000000..4665363416 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/_colon_is/index.html @@ -0,0 +1,191 @@ +--- +title: ':any' +slug: conflicting/Web/CSS/:is +tags: + - CSS + - 伪类选择器 + - 实验性 +translation_of: Web/CSS/:is +translation_of_original: Web/CSS/:any +original_slug: Web/CSS/:any +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>The <code>:any()</code> <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-class</a> lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.</p> + +<p>译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。</p> + +<div class="note"><strong>Note : </strong>This pseudo-class is in progress to be standardized in <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> under the name <code>:matches()</code>. It is likely that the syntax and name of <code>:-<em>vendor</em>-any()</code> will be changed to reflect it in the near future.</div> + +<div class="note">注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Values" name="Values">值</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>选择器。这可以是由 <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 简单选择器</a> 组成的简单选择器或多重选择器，并且可以包含后代组合器。</dd> +</dl> + +<div class="note"><strong>注意：</strong>选择器可以<strong>不</strong>包含伪元素，并且仅允许的组合器是后代组合器。</div> + +<h2 id="Examples" name="Examples">例子</h2> + +<p>举个例子，如以下 CSS：</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p>可以写成这样：</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>但是，不能写成这样（详见<a href="#Issues_with_performance_and_specificity">the section on performance</a>）：</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>译文： 这个伪类选择器会在处理 HTML5 的 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections and headings</a> 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用 <code>:any()</code> ，为了去匹配这些标签来给予样式会变得困难。</p> + +<p>举个例子，当不使用 <code>:any()</code> ，给予不同的 DOM 结点层次深度下的所有的 {{HTMLElement("h1")}} 的元素样式时，将会变得特别的复杂。</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Level 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Level 3 */ +/* ... don't even think about it*/ +</pre> + +<p>然而，通过使用 <code>:any()</code> ，这将变得很简单：</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +/* Level 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} +/* Level 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">性能与特异性问题</h3> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> 追踪了一个关于 Gecko 作为内核的浏览器在使用 <code>:-moz-any()</code> 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 <code>:-moz-any()</code> 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。</p> + +<p>例如:</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p>会比下面的表达式慢</p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p>而下面的表达式将会是最快的</p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> + <td>12.0 (534.30){{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..af8a706fa9 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,68 @@ +--- +title: ':-moz-placeholder' +slug: conflicting/Web/CSS/:placeholder-shown +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: Web/CSS/:placeholder-shown +translation_of_original: Web/CSS/:-moz-placeholder +original_slug: Web/CSS/:-moz-placeholder +--- +<p> </p> + +<div class="note"><strong>提示:</strong> <code><em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div> + +<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> + +<p>{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}</p> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p><code> :-moz-placeholder</code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>控制元素所显示的文字占位符<a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">文字占位符</a>. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> + +<h2 id="示例">示例</h2> + +<p>这个示例将文字占位符改变为了绿色.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</pre> + +<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p> + +<h2 id="溢出">溢出</h2> + +<p>在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS <code>text-overflow: ellipsis;</code> 来省略一中间部分文字.</p> + +<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } +::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ +input:-moz-placeholder { text-overflow: ellipsis; } +</pre> + +<p>It was David Walsh, the man on fire who introduced this to a lot of designers. <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</a>.</p> + +<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> + +<p>{{ Bug(457801) }}</p> + +<h2 id="SeeAlso" name="SeeAlso">See also</h2> + +<ul> + <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("textarea") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..b66dc3a6ef --- /dev/null +++ b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,100 @@ +--- +title: '::-moz-placeholder' +slug: conflicting/Web/CSS/::placeholder +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: Web/CSS/::placeholder +translation_of_original: Web/CSS/::-moz-placeholder +original_slug: Web/CSS/::-moz-placeholder +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<div class="note"><strong>提示:</strong> {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 <code>:-moz-placeholder </code>伪类.</div> + +<div>{{gecko_minversion_header("19.0")}}</div> + +<h2 id="摘要">摘要</h2> + +<p> <code>::-moz-placeholder</code> 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html"><input id="test" placeholder="Placeholder text!"></pre> + +<h3 id="CSS_内容">CSS 内容</h3> + +<pre class="brush: css">input::-moz-placeholder { + color: green; +}</pre> + +<p>{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}</p> + +<p> </p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] Firefox 对placeholder文本默认应用<code>{{cssxref("opacity")}}:0.54。详见</code>{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。</p> + +<p>Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li>{{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML">Forms in HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..8fe764c269 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,156 @@ +--- +title: CSS Background and Borders +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +original_slug: Web/CSS/CSS_Background_and_Borders +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS 背景与边框</strong> 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。</p> + +<h2 id="参考">参考</h2> + +<h3 id="CSS_属性">CSS 属性</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> +</div> + +<h2 id="导航">导航</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">应用CSS多重背景</a></dt> + <dd>阐述设置元素背景方法以及背景、元素之间的交互方式</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">缩放背景图片</a></dt> + <dd>阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..8d64addd68 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,115 @@ +--- +title: 缩放背景图像 +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +tags: + - Advanced + - CSS + - CSS Background + - Graphics + - Guide + - Web + - 背景图片 +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +original_slug: Web/Guide/CSS/Scaling_background_images +--- +<div>{{cssref}}</div> + +<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2> + +<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p> + +<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> + +<p>用下面的 CSS 可以实现这种效果：</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(fxlogo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} </pre> + +<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div> + +<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2> + +<p>你可以同时指定图片纵向和横向的大小，如下：</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>结果会是这样的：<br> + <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2> + +<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p> + +<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值: "contain" 和 "cover"</h2> + +<p>除了{{cssxref("<length>")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p> + +<pre class="brush:html"><div class="bgSizeContain"> + <p>Try resizing this window.<code>Right-click->This Frame->Open Frame in New Tab</code></p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeContain { + height: 200px; + background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); + background-size: contain; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +}</pre> + +<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p> + +<pre class="brush:html"><div class="bgSizeCover"> + <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeCover { + height: 200px; + background-image: url('/files/2917/fxlogo.png'); + background-size: cover; + border: 2px solid darkgray; + color: #000; + text-shadow: 1px 1px 0 #fff; +}</pre> + +<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p> + +<h2 id="See_also" name="See_also">另请参阅</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..b1d5ee045e --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,61 @@ +--- +title: 使用CSS的多背景 +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">通过使用 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>，你可以向元素应用<strong>多个背景</strong>。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。</span> 仅最后一个背景允许拥有背景色。</p> + +<p>指定多个背景很简单：</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., backgroundN; +} +</pre> + +<p>你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。</p> + +<h2 id="示例">示例</h2> + +<p>该例中，三个背景进行堆叠：火狐标志,一个<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">线性渐变</a>， 和一张带有花的图片：</p> + +<pre class="brush: css">.multi_bg_example { + background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), + linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), + url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); + background-repeat: no-repeat, no-repeat, repeat; + background-position: bottom right, left, right; +} +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">结果</td> + </tr> + <tr> + <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> + </tr> + </tbody> +</table> + +<p>如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。</p> + +<h2 id="其它">其它</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用CSS渐变</a></li> +</ul> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> diff --git a/files/zh-cn/conflicting/web/css/css_color/index.html b/files/zh-cn/conflicting/web/css/css_color/index.html new file mode 100644 index 0000000000..65153a61df --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_color/index.html @@ -0,0 +1,121 @@ +--- +title: CSS Colors +slug: conflicting/Web/CSS/CSS_Color +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +original_slug: Web/CSS/CSS_Colors +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Colors</strong> 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。</p> + +<h2 id="参考_(Reference)">参考 (Reference)</h2> + +<h3 id="属性">属性</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="CSS_数据类型">CSS 数据类型</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="指南_(Guides)">指南 (Guides)</h2> + +<p><em>None.</em></p> + +<h2 id="规范_(Specifications)">规范 (Specifications)</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性_(Browser_compatibility)">浏览器兼容性 (Browser compatibility)</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另请阅读">另请阅读</h2> + +<ul> + <li>在 CSS 中， gradient 渐变色并非颜色，其实质是 <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..64120aad99 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,409 @@ +--- +title: 使用弹性盒子进行高级布局 +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +tags: + - CSS3布局模型 + - Flexible_Box + - Flexible_Box_Layout + - Layout + - 弹性盒子 + - 弹性盒子模型 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +<p>使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。</p> + +<h3 id="浮动布局的问题">浮动布局的问题</h3> + +<ul> + <li><strong>难以控制。</strong>如果站点上存在一些不可预知的内容，那么布局将变的难以维护。</li> + <li><strong>源码顺序依赖</strong>。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。</li> + <li><strong>列等高问题</strong>。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。</li> + <li><strong>内容居中</strong>。使用浮动布局难以将内容水平且垂直居中。</li> +</ul> + +<h3 id="弹性盒子如何处理">弹性盒子如何处理</h3> + +<ul> + <li>通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。</li> + <li>给予弹性元素成比例的尺寸。</li> + <li>弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。</li> +</ul> + +<h3 id="弹性盒子属性">弹性盒子属性</h3> + +<p><img alt="placeholder" src="http://saki007ster.github.io/public/images/flex-container.png" title="Flexbox properties"></p> + +<ul> + <li><strong>主轴(main axis)，主轴区域(main dimension)</strong>。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。</li> + <li><strong>主轴起点(main-Start)，主轴终点(main-end)</strong>。弹性元素被放置于容器中从主轴起点到主轴终点放置。</li> + <li><strong>主轴尺寸(main size)，主轴尺寸属性(main size property)</strong>。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。</li> + <li><strong>侧轴(cross axis)，侧轴区域(cross dimension)</strong>。侧轴垂直于主轴。它在侧轴区域中延伸。</li> + <li><strong>侧轴起点(cross-Start)，侧轴终点(cross-end)</strong>。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。</li> + <li><strong>侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)</strong>。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性</li> +</ul> + +<h4 id="弹性容器属性">弹性容器属性</h4> + +<ul> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-direction">flex-direction</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-wrap">flex-wrap</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-flow">flex-flow</a></li> + <li><a href="https://css-tricks.com/almanac/properties/j/justify-content/">justify-content</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a></li> +</ul> + +<h4 id="弹性元素属性">弹性元素属性</h4> + +<ul> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-order">order</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-grow">flex-grow</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink">flex-shrink</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-basis">flex-basis</a></li> +</ul> + +<h2 id="弹性盒子混合">弹性盒子混合</h2> + +<p>对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：<a href="http://caniuse.com/flexbox" style="line-height: 1.5;">http://caniuse.com/flexbox</a></p> + +<p>将会使用：</p> + +<ul> + <li>后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)</li> + <li>最终标准的语法（FF、Safari、Chrome、IE11、Opera）</li> +</ul> + +<p>启发于：</p> + +<ul> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> +</ul> + +<p>可以从这些地方获取帮助：</p> + +<ul> + <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> + <li><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> + <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> + <li><a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes">https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes</a></li> +</ul> + +<h3 id="弹性容器">弹性容器</h3> + +<p>“flex”值会引起一个元素生成一个盒级的弹性盒子。</p> + +<p>“inline-flex”会生成一个行内弹性盒子。</p> + +<p>display: flex | inline-flex <a href="http://w3.org/tr/css3-flexbox/#flex-containers">http://w3.org/tr/css3-flexbox/#flex-containers</a></p> + +<div> +<pre>@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +// 使用这样的混合模式 +%flexbox { @include flexbox; }</pre> +</div> + +<div> +<pre>@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; }</pre> +</div> + +<h3 id="弹性盒子方向">弹性盒子方向</h3> + +<p>“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。</p> + +<p>值：row | row-reverse | column | column-reverse</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-direction-property">http://w3.org/tr/css3-flexbox/#flex-direction-property</a></p> + +<div> +<pre>@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +// 简短版本： +@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> +</div> + +<h3 id="弹性盒子换行">弹性盒子换行</h3> + +<p>“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。</p> + +<p>值：nowrap | wrap | wrap-reverse</p> + +<p>默认：nowrap</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-wrap-property">http://w3.org/tr/css3-flexbox/#flex-wrap-property</a></p> + +<div> +<pre>@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +}</pre> +</div> + +<h3 id="弹性盒子流（简写）">弹性盒子流（简写）</h3> + +<p>“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。</p> + +<p>默认值：row nowrap</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-flow-property">http://w3.org/tr/css3-flexbox/#flex-flow-property</a></p> + +<div> +<pre>@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +}</pre> +</div> + +<h3 id="弹性盒子顺序">弹性盒子顺序</h3> + +<p>“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。</p> + +<p>默认值：0</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#order-property">http://w3.org/tr/css3-flexbox/#order-property</a></p> + +<div> +<pre>@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +}</pre> +</div> + +<h3 id="弹性盒子增长">弹性盒子增长</h3> + +<p>“flex-grow”属性设置增长因数，不接受负值。</p> + +<p>默认值：0</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-grow-property">http://w3.org/tr/css3-flexbox/#flex-grow-property</a></p> + +<div> +<pre>@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +}</pre> +</div> + +<h3 id="弹性盒子收缩">弹性盒子收缩</h3> + +<p>“flex-shrink”属性设置了收缩因数，不接受负值。</p> + +<p>默认值：1</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-shrink-property">http://w3.org/tr/css3-flexbox/#flex-shrink-property</a></p> + +<div> +<pre>@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +}</pre> +</div> + +<h3 id="弹性盒子伸缩">弹性盒子伸缩</h3> + +<p id="“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。"><span style="font-size: 14px; line-height: 1.5;">“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。</span></p> + +<p>值：类似“width”，默认值：<code>auto</code></p> + +<p><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">http://www.w3.org/TR/css3-flexbox/#flex-basis-property</a></p> + +<div> +<pre>@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +}</pre> +</div> + +<h3 id="弹性盒子“Flex”属性（简写）">弹性盒子“Flex”属性（简写）</h3> + +<p>“<code>flex</code>”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“<code>flex</code>”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。</p> + +<p>值：<code>none</code> | ||</p> + +<p>默认值：见独立属性（1 1 0）</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-property">http://w3.org/tr/css3-flexbox/#flex-property</a></p> + +<div> +<pre>@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so lets grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +}</pre> +</div> + +<h3 id="弹性盒子对齐方式">弹性盒子对齐方式</h3> + +<p>“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。</p> + +<p>提示：以前版本的语法不支持“space-*”值。</p> + +<p>值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#justify-content-property">http://w3.org/tr/css3-flexbox/#justify-content-property</a></p> + +<div> +<pre>@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); }</pre> +</div> + +<h3 id="弹性元素对齐">弹性元素对齐</h3> + +<p>可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）</p> + +<p>值：flex-start | flex-end | center | baseline | stretch 默认值：stretch</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#align-items-property">http://w3.org/tr/css3-flexbox/#align-items-property</a></p> + +<div> +<pre>@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +}</pre> +</div> + +<h3 id="弹性元素自对齐">弹性元素自对齐</h3> + +<p>用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。</p> + +<p>值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto</p> + +<div> +<pre>@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +}</pre> +</div> + +<h3 id="弹性元素内容对齐">弹性元素内容对齐</h3> + +<p>“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。</p> + +<p>值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#align-content-property">http://w3.org/tr/css3-flexbox/#align-content-property</a></p> + +<div> +<pre>@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +}</pre> +</div> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..5a26114225 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,409 @@ +--- +title: 使用 CSS 弹性盒子 +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +tags: + - CSS + - CSS Flexible Boxes + - Flex + - Web + - flexbox + - 弹性 + - 弹性容器 + - 弹性盒子 + - 弹性项目 + - 指南 + - 盒子模型 + - 范例 + - 进阶 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +--- +<div>{{CSSRef}}</div> + +<p><span>CSS3 <strong>弹性盒子</strong>(<strong>Flexible Box</strong> 或 <strong>Flexbox</strong>)，是一种</span>用于在页面上布置元素的<span><a href="/zh-CN/docs/Web/CSS/Layout_mode">布局模式</a>，</span>使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，<span>弹性</span>盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。</p> + +<p>许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。</p> + +<div class="note"><strong>注意：</strong> 虽然 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 弹性盒子布局规范</a> 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见<a href="http://dev.w3.org/csswg/css-flexbox/">最新编辑草案</a>），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的<a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">兼容性表格</a>获取。</div> + +<h2 id="弹性盒布局概念">弹性盒布局概念</h2> + +<p>在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。</p> + +<p>块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。</p> + +<h2 id="弹性盒布局相关词汇">弹性盒布局相关词汇</h2> + +<p>关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 <code>flex-direction</code> 属性为 <code>row</code>的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。</p> + +<p><img alt="弹性布局相关名词" src="https://mdn.mozillademos.org/files/12998/flexbox.png" style="height: 333px; width: 563px;"></p> + +<dl> + <dt>弹性容器(Flex container)</dt> + <dd>包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 <code>flex</code> 或 <code>inline-flex</code> 来定义弹性容器。</dd> + <dt>弹性项目(Flex item)</dt> + <dd> + <p>弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。</p> + </dd> + <dt>轴(Axis)</dt> + <dd> + <p>每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为<strong>主轴(main axis)</strong>。垂直于<strong>主轴</strong>的那根轴称为<strong>侧轴(cross axis)</strong>。</p> + + <ul> + <li><code><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></code> 确立主轴。</li> + <li><a href="/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a> 定义了在当前行上，弹性项目沿主轴如何排布。</li> + <li><a href="/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 定义了在当前行上，弹性项目沿侧轴默认如何排布。</li> + <li><a href="/zh-CN/docs/Web/CSS/align-self"><code>align-self</code></a> 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 <code>align-items</code> 所确立的默认值。</li> + </ul> + </dd> + <dt>方向(Direction)</dt> + <dd> + <p>弹性容器的<strong>主轴起点(main start)</strong>/<strong>主轴终点(main end)</strong>和<strong>侧轴起点(cross start)</strong>/<strong>侧轴终点(cross end)</strong>描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 <code>writing-mode</code> 确立的方向（从左到右、从右到左，等等）。</p> + + <ul> + <li><a href="/zh-CN/docs/Web/CSS/order"><code>order</code></a> 属性将元素与序号关联起来，以此决定哪些元素先出现。</li> + <li><a href="/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性的简写，决定弹性项目如何排布。</li> + </ul> + </dd> + <dt>行(Line)</dt> + <dd> + <p>根据 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。</p> + </dd> + <dt>尺寸(Dimension)</dt> + <dd> + <p>根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为<strong>主轴尺寸(main size)</strong> ，对应侧轴的称为 <strong>侧轴尺寸(cross size)</strong>。</p> + + <ul> + <li><code><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></code> 与 <code><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></code> 属性初始值将为 0。</li> + <li><a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>、<a href="/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性的简写，描述弹性项目的整体的伸缩性。</li> + </ul> + </dd> +</dl> + +<h2 id="定义一个弹性盒子">定义一个弹性盒子</h2> + +<p>为要使用此样式的元素指派 CSS，需按以下方式设置 <a href="/zh-CN/docs/Web/CSS/display">display</a> 属性：</p> + +<pre class="brush: css">display : flex</pre> + +<p>或者</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 <code>flex</code> 使弹性容器成为块级元素。值 <code>inline-flex</code> 使弹性容器成为单个不可分的行内级元素。</p> + +<div class="note"><strong>注意：</strong>厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：<code>display : -webkit-flex</code>。</div> + +<h2 id="弹性项目须知">弹性项目须知</h2> + +<p>弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 <code>display: none</code>。</p> + +<p>对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。</p> + +<p>相邻的弹性元素其外边距不会互相合并。使用 <code>auto</code> 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>。</p> + +<p>不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 <code>align-</code> 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 <code>justify-</code> 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 <code>justify-content</code>，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 <code>justify-content</code> 属性了。</p> + +<p>再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。</p> + +<h2 id="弹性盒子相关属性">弹性盒子相关属性</h2> + +<h3 id="不影响弹性盒子的属性">不影响弹性盒子的属性</h3> + +<p>由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：</p> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/Using_CSS_multi-column_layouts">多栏布局模块</a>的 <code>column-*</code> 属性对弹性项目无效。</li> + <li>{{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 <code>float</code> 将使元素的 <code>display</code> 属性计为<code>block</code>。</li> + <li>{{cssxref("vertical-align")}} 对弹性项目的对齐无效。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="基本的弹性布局示例">基本的弹性布局示例</h3> + +<p>这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> + + <span class="selector token"><span class="class token">.flex</span> + </span><span class="punctuation token">{</span> + <span class="comment token">/* 基本样式 */</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">350</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#555</span><span class="punctuation token">;</span> + <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">14</span>px Arial<span class="punctuation token">;</span> + + <span class="comment token">/* 建立弹性框 */</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="class token">.flex</span> > div + </span><span class="punctuation token">{</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> + + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span>px<span class="punctuation token">;</span> <span class="comment token">/* 让过渡表现良好。（从/到"width:auto"的过渡 + 至少在 Gecko 和 Webkit 上是有 bug 的。 + 更多信息参见 http://bugzil.la/731886 ） */</span> + + <span class="property token">-webkit-transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> + <span class="property token">transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* colors */</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(1)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#009246</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(2)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#F1F2F1</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(3)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#CE2B37</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:hover</span> + </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Flexbox nuovo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>uno<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>due<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>tre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="圣杯布局示例">圣杯布局示例</h3> + +<p>此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> + + <span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">24</span>px Helvetica<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#999999</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> </span><span class="punctuation token">{</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="property token">flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > article </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#cccc33</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#dddd88</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > nav </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">header, footer </span><span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#eebb55</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ffeebb</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* 窄到已不足以支持三栏 */</span> + <span class="atrule token"><span class="rule token">@media</span> all and <span class="punctuation token">(</span><span class="property token">max-width</span><span class="punctuation token">:</span> 640px<span class="punctuation token">)</span></span> <span class="punctuation token">{</span> + + <span class="selector token"><span class="id token">#main</span>, <span class="id token">#page</span> </span><span class="punctuation token">{</span> + <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > article, <span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> + <span class="comment token">/* 恢复到文档内的自然顺序 */</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside, header, footer </span><span class="punctuation token">{</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>header</span><span class="punctuation token">></span></span>header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>header</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>main<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>article</span><span class="punctuation token">></span></span>article<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>article</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>nav</span><span class="punctuation token">></span></span>nav<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>nav</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>aside</span><span class="punctuation token">></span></span>aside<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>aside</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>footer</span><span class="punctuation token">></span></span>footer<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>footer</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="试验场地">试验场地</h2> + +<p>有几个在线弹性盒子试验场地可供进行各种实验：</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> + <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> +</ul> + +<h2 id="务必牢记">务必牢记</h2> + +<p>描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。</p> + +<p>弹性盒子的排布与<a href="https://developer.mozilla.org/zh-CN/docs/CSS/writing-mode">书写模式</a>是一致的，这意味着排布的<strong>主轴起点</strong>和<strong>主轴终点</strong>根据的是<strong>开始</strong>与<strong>结束</strong>的位置。</p> + +<p><strong>侧轴起点</strong>与<strong>侧轴终点</strong>依赖于<strong>开始</strong>或<strong>前面（before）</strong>的位置定义，而这个“<strong>前面”</strong>依赖于 <a href="/zh-CN/docs/Web/CSS/direction"><code>direction</code></a> 的值。</p> + +<p>只要 <code>break-</code> 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 <code>break-after</code>、<code>break-before</code> 和 <code>break-inside</code>，以及 CSS 2.1 中的 <code>page-break-before</code>、<code>page-break-after</code> 和 <code>page-break-inside</code> 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持（单行弹性框）</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>多行弹性框</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10<sup>[5]</sup><br> + 15 {{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持（单行弹性框）</td> + <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td> + <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> + 1.1</p> + </td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>多行弹性框</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>1.3</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。</p> + +<p>[2] 直到 Firefox 22 为止，用户必须修改 <code>about:config</code> 设置，将 <code>layout.css.flexbox.enabled</code> 改为 <code>true</code> 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 <code>true</code>，而 Firefox 28 中取消了此设置项。</p> + +<p>[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 <a href="http://msdn.microsoft.com/zh-CN/library/ie/dn265027%28v=vs.85%29.aspx"> 已更新为 </a> 支持最终版本。</p> + +<p>[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。</p> + +<p>[5] 在 Opera 12.10 的<code>弹性盒子</code>初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。</p> + +<p>[6] 直到 Firefox 29 为止，在弹性项目上指定 <code>visibility: collapse</code> 将使其被视为 <code>display: none</code> 处理，而预期的行为是被视为 <code>visibility: hidden</code>。建议的处理方式是在弹性项目上使用 <code>visibility:hidden</code>，这样其行为应当与指派了 <code>visibility:collapse</code> 一致。更多信息，参考 {{bug(783470)}}.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>各浏览器对弹性盒子的实现中的 bug 的信息，请参考 <a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a>。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..416b96e007 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,188 @@ +--- +title: 使用flexbox来布局web应用 +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +tags: + - CSS + - 弹性盒子 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<p>{{CSSRef}}</p> + +<p>使用 <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、<a href="/en-US/docs/Web/CSS/position#Absolute_positioning">绝对定位</a> 和一些JavaScript hacks, 使用仅仅几行 <a href="/en-US/docs/Web/CSS">CSS</a> 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：</p> + +<ul> + <li>你想要将一个元素放在页面的中间</li> + <li>你想要一组在垂直方向可以一个紧挨一个的布局容器</li> + <li>你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠</li> +</ul> + +<p>这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 <em>flexbox</em> 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">the more general guide to using CSS flexible boxes</a>.</p> + +<h2 id="基础">基础</h2> + +<p>如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} <font face="Consolas, Liberation Mono, Courier, monospace">属性</font>, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。</p> + +<p>接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：</p> + +<ul> + <li>如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 <code>flex: none</code>，none 将会被解释为 <code>0 0 auto</code>.</li> + <li>如果想要一个固定大小的元素，则设置 <code>flex: 0 0 <em>size。</em></code>如：<code>flex 0 0 60px。</code></li> + <li>如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 <code>flex: auto，它代表</code> <code>1 1 auto</code>.</li> +</ul> + +<p>有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。</p> + +<h2 id="示例_1_在页面中把一个元素居中">示例 1: 在页面中把一个元素居中</h2> + +<p>在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。</p> + +<h3 id="CSS_内容">CSS 内容</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}</p> + +<h2 id="示例2_垂直放置一系列的容器">示例2: 垂直放置一系列的容器</h2> + +<p>假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。</p> + +<h3 id="CSS_内容_2">CSS 内容</h3> + +<pre class="brush: css;highlight:[8,14,18]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_内容_2">HTML 内容</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Javascript_内容">Javascript 内容</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="结果_2">结果</h3> + +<p>{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}</p> + +<p>这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。</p> + +<h2 id="示例3_创建一个水平折叠的容器">示例3: 创建一个水平折叠的容器</h2> + +<p>在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。</p> + +<h3 id="CSS_内容_3">CSS 内容</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_内容_3">HTML 内容</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Javascript_内容_2">Javascript 内容</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="结果_3">结果</h3> + +<p>{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html new file mode 100644 index 0000000000..1e53f47c6d --- /dev/null +++ b/files/zh-cn/conflicting/web/css/easing-function/index.html @@ -0,0 +1,267 @@ +--- +title: <timing-function> +slug: conflicting/Web/CSS/easing-function +tags: + - CSS + - timing-function +translation_of: Web/CSS/easing-function +translation_of_original: Web/CSS/timing-function +original_slug: Web/CSS/timing-function +--- +<p>{{ CSSRef() }}</p> + +<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong><timing-function></strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p> + +<p>这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p> + +<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p> + +<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p> + +<h2 class="cleared" id="定时函数">定时函数</h2> + +<div style="width: 100%;"> +<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p> + +<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3> + +<table class="withoutBorder"> + <tbody> + <tr> + <td> + <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p> + </td> + <td> + <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p> + + <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p> + + <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p> + + <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p> + + <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h4 id="语法">语法</h4> + +<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code> +</pre> + +<p>其中，</p> + +<dl> + <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt> + <dd style="margin-left: 40px;">Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd> +</dl> + +<h4 id="示例">示例</h4> + +<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p> + +<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1) </code>The canonical Bézier curve with four <number> in the [0,1] range. +cubic-bezier(0, 0, 1, 1) Using <integer> is valid as any <integer> is also a <number>. +cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects. +cubic-bezier(0.1, 4, 0.6, 2.45) Values > 1.0 for ordinates are also valid.</pre> + +<p>像这些贝塞尔曲线的定义是无效的：</p> + +<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios. +cubic-bezier(-0.2, 0.6, -0.1, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. +cubic-bezier(0.3, 2.1) The two points must be defined, there is no default value. +cubic-bezier(1.1, 0, 4, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. +</pre> + +<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3> + +<table class="withoutBorder"> + <tbody> + <tr> + <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td> + <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"> + <table class="withoutBorder"> + <tbody> + <tr> + <td></td> + <td rowspan="2"> + <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p> + </td> + </tr> + </tbody> + </table> + </td> + <td rowspan="2"></td> + </tr> + <tr style="text-align: center;"> + <td style="white-space: nowrap;"><code>steps(2, start)</code></td> + <td><code>steps(4, end)</code></td> + </tr> + </tbody> +</table> + +<h4 id="Syntax">Syntax</h4> + +<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code> +</pre> + +<p>where :</p> + +<dl> + <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt> + <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.</dd> + <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt> + <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>: + <ul> + <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li> + <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li> + </ul> + </dd> +</dl> + +<h4 id="Examples">Examples</h4> + +<p>These timing functions are valid :</p> + +<pre>steps(5, end) There is 5 treads, the last one happens right before the end of the animation. +steps(2, start) A two-step staircase, the first one happening at the start of the animation. +</pre> + +<p>These timing function are invalid :</p> + +<pre>steps(2.0, end) The first parameter must be an <a title="integer"><integer></a> and cannot be a real value, even if it is equal to one. +steps(-3, start) The amount of steps must be non-negative. +steps(0, end) There must be at least one step. +steps(2) The second parameter is not optional. +steps(start, 3) Though of different types, the order of parameter is important. +step(1, end) Even if there is one step, the function name is steps, with the plural 's' +steps(3 end) The two parameters must be separated with a comma; one or several spaces is not enough. +</pre> + +<h3 id="常用定时函数关键字">常用定时函数关键字</h3> + +<h4 id="linear"><code>linear</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease"><code>ease</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td> + <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td> + </tr> + </tbody> +</table> + +<h4 id="ease-in"><code>ease-in</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease-in-out"><code>ease-in-out</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td> + <td> + <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease-out"><code>ease-out</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="step-start"><code>step-start</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr> + <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td> + <td></td> + </tr> + </tbody> +</table> + +<h4 id="step-end"><code>step-end</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td> + <td> + <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defined anonymously</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Defined anonymously, says to see definition in the CSS Transitions Module</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("css.types.timing-function", 2)}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> + <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/guide/html/html5/index.html b/files/zh-cn/conflicting/web/guide/html/html5/index.html new file mode 100644 index 0000000000..ec94a52452 --- /dev/null +++ b/files/zh-cn/conflicting/web/guide/html/html5/index.html @@ -0,0 +1,170 @@ +--- +title: HTML5 & friends thematic classification +slug: conflicting/Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +translation_of_original: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +original_slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +--- +<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p> +<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2> +<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3> +<div class="ace-line"> + Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div> +<div class="ace-line"> + </div> +<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3> +<p><Canvas>是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p> +<p>参考：</p> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li> + <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li> +</ul> +<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3> +<div class="ace-line"> + webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.</div> +<div class="ace-line" id="magicdomid483"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div> +<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3> +<div class="ace-line"> + HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div> +<div class="ace-line" id="magicdomid543"> + <span class="author-g-101xw018h73xu61x">Reference: </span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li> + <li><a href="/en/MathML" title="en/MathML">MathML</a></li> +</ul> +<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3> +<div class="ace-line" id="magicdomid407"> + Link relations complement the <a> tag and specify why you're pointing to another page.</div> +<div class="ace-line"> + Reference:</div> +<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3> +<div class="ace-line"> + Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.</div> +<div class="ace-line" id="magicdomid169"> + <span class="author-g-101xw018h73xu61x">Reference:</span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li> +</ul> +<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3> +<div class="ace-line" id="magicdomid448"> + Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.</div> +<div class="ace-line"> + Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div> +<div class="ace-line"> + See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div> +<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3> +<div class="ace-line"> + The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div> +<div class="ace-line"> + Reference:</div> +<ul> + <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li> + <li>{{ HTMLElement("article") }}</li> + <li>{{ HTMLElement("aside") }}</li> + <li>{{ HTMLElement("figcaption") }}</li> + <li>{{ HTMLElement("figure") }}</li> + <li>{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("header") }}</li> + <li>{{ HTMLElement("mark") }}</li> + <li>{{ HTMLElement("nav") }}</li> + <li>{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("time") }}</li> +</ul> +<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2> +<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3> +<div class="ace-line"> + Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div> +<div class="ace-line"> + Reference:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li> +</ul> +<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3> +<div class="ace-line" id="magicdomid361"> + <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</div> +<div class="ace-line"> + Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div> +<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3> +<div class="ace-line"> + Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.</div> +<div class="ace-line" id="magicdomid143"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div> +<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3> +<div class="ace-line"> + In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</div> +<div class="ace-line" id="magicdomid161"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div> +<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3> +<div class="ace-line"> + Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</div> +<div class="ace-line"> + Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div> +<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3> +<div class="ace-line"> + <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p> + <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p> + <h3 id="Geolocation">Geolocation</h3> +</div> +<div class="ace-line"> + The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked to confirm permission to report location information.</div> +<div class="ace-line" id="magicdomid294"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div> +<div class="ace-line"> + <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div> +<div class="ace-line"> + <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3> + <div class="ace-line"> + The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div> + <div class="ace-line" id="magicdomid231"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div> + <span class="author-g-101xw018h73xu61x"> </span></div> +<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2> +<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3> +<div class="ace-line"> + The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div> +<div class="ace-line" id="magicdomid759"> + <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div> +<h3 id="Typography">Typography</h3> +<p>The following pages show some of the typography attributes introduced by CSS3.</p> +<div class="ace-line"> + Text wrap:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li> + <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li> +</ul> +<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3> +<div class="ace-line" id="magicdomid656"> + <span class="author-g-101xw018h73xu61x">Columns:</span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li> + <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li> +</ul> +<h3 id="Visual">Visual</h3> +<div class="ace-line"> + The following pages show some of the visual attributes introduced by CSS3.</div> +<ul> + <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li> + <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Shadows:</span> + <ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li> + </ul> + </li> + <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li> +</ul> +<h3 id="Dynamic_effects">Dynamic effects</h3> +<div class="ace-line"> + CSS also introduces dynamic effects:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li> + <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li> +</ul> +<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/guide/index.html b/files/zh-cn/conflicting/web/guide/index.html new file mode 100644 index 0000000000..48ed6873e3 --- /dev/null +++ b/files/zh-cn/conflicting/web/guide/index.html @@ -0,0 +1,97 @@ +--- +title: Web 开发 +slug: conflicting/Web/Guide +translation_of: Web/Guide +translation_of_original: Web_Development +original_slug: Web_Development +--- +<p><strong>Web 开发</strong> 包括开发网站和Web应用程序的方方面面。</p> +<p>在本文中，您将学到创建从简单到复杂的Web站点、使用最新Web技术的高度互动的网站。</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="文档主题">文档主题</h2> + <h3 id="技术">技术</h3> + <dl> + <dt> + <a class="internal" href="/zh-CN/docs/Web_Development/Introduction_to_Web_development" title="zh-CN/docs/Web Development/Introduction to Web development">Web 开发介绍</a></dt> + <dd> + 一份介绍怎样开发进行Web开发的指南。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/HTML" rel="internal">HTML</a></dt> + <dd> + 超文本标记语言是创建网页和其他显示在浏览器的文档的基础语言。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/CSS" rel="internal">CSS</a></dt> + <dd> + 层叠样式表的强大功能能使您在 Web 上安排布局和页面设计。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd> + JavaScript 是最常用的 Web 应用程序开发的脚本语言；它也用于开发基于 Mozilla 的软件。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/DOM" rel="internal">DOM</a></dt> + <dd> + 文档对象模型是一个 HTML 和 XML 文档的 API，其提供了一个结构化的文档表示以供修改它的可见表示。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/AJAX" rel="internal">AJAX</a></dt> + <dd> + AJAX（异步的 JavaScript 与 XML 技术）并非一种技术，而是这两种技术的组合应用；通过 JavaScript 和其他时髦的 Web 技术共同创建动态 Web 应用程序。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a></dt> + <dd> + 可扩展的超文本标记语言是一个基于 XML 的类 HTML 语言，同 HTML 相比其语法更加严格。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/SVG" rel="internal">SVG</a></dt> + <dd> + 可缩放矢量图形是一个描述二维矢量图形的 XML 标记语言。</dd> + </dl> + <h3 id="策略">策略</h3> + <dl> + <dt> + <a class="internal" href="/zh-CN/docs/Web_Standards" title="en-US/docs/Web Standards">Web 标准</a></dt> + <dd> + 了解如何使你的网站或者应用程序通过开放 Web 标准，兼容最大多数用户的访问。</dd> + <dt> + <a href="/zh-CN/docs/Web_Development/Responsive_Web_design" title="zh-CN/docs/Web development/Responsive Web design">响应性 Web 设计</a></dt> + <dd> + 使用 CSS 在所有硬件平台上呈现相同内容，从手机到宽屏、高分辨率的桌面显示器。</dd> + <dt> + <a href="/zh-CN/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">编写向前兼容的网站</a></dt> + <dd> + 建立即使浏览器更新也不会出现问题的网站的最佳实践。</dd> + <dt> + <a href="/zh-CN/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">移动 Web 开发</a></dt> + <dd> + 通过一些与面向桌面浏览器开发完全不同的独特方法，来开发面向移动设备的网站。</dd> + <dt> + <a class="internal" href="/zh-CN/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web 开发者常见问题解答</a></dt> + <dd> + Web开发者经常提的一些问题。当然还有答案喽！</dd> + </dl> + <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development" title="zh-CN/docs/tag/Web_Development">查看更多...</a></span></p> + </td> + <td> + <h2 class="Community" id="社区">社区</h2> + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks 博客（英文）</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT 工作组</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse（英文）</a></li> + </ul> + <h2 class="Tools" id="工具">工具</h2> + <ul> + <li><a href="/zh-CN/docs/Tools" title="zh-CN/docs/Tools">主要工具</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/1843">Firebug 扩展</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/60">Web Developer 扩展</a></li> + <li><a href="/zh-CN/docs/Venkman" rel="internal">Venkman</a>，一款 JavaScript 调试器</li> + <li><a href="/zh-CN/docs/DOM_Inspector" rel="internal" title="zh-CN/docs/DOM Inspector">DOM 查看器</a></li> + <li><a href="/zh-CN/docs/Tools/Scratchpad" title="zh-CN/docs/Tools/Scratchpad">暂存器</a></li> + </ul> + <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development:Tools" title="zh-CN/docs/tag/Web_Development:Tools">查看更多...</a></span></p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<p>{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development","es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/guide/mobile/index.html b/files/zh-cn/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..47137e29a0 --- /dev/null +++ b/files/zh-cn/conflicting/web/guide/mobile/index.html @@ -0,0 +1,19 @@ +--- +title: 移动 Web 开发 +slug: conflicting/Web/Guide/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +original_slug: Web_Development/Mobile +--- +<p>开发能在移动设备上浏览的网站需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。以下的文章介绍了部分方法：</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">什么是 mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">响应式设计</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/html/element/index.html b/files/zh-cn/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..4deec7c2ee --- /dev/null +++ b/files/zh-cn/conflicting/web/html/element/index.html @@ -0,0 +1,592 @@ +--- +title: HTML5 标签列表 +slug: conflicting/Web/HTML/Element +tags: + - HTML + - HTML5 + - Web + - 初学者 + - 指南 +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +original_slug: Web/Guide/HTML/HTML5/HTML5_element_list +--- +<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p> + +<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p> + +<h2 id="根元素">根元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td> + </tr> + </tbody> +</table> + +<h2 id="文档元数据">文档元数据</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>定义页面上相对 URL 的基准 URL。</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>用于链接外部资源到该文档。</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>定义其他 HTML 元素无法描述的元数据。</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>用于内联 CSS。</td> + </tr> + </tbody> +</table> + +<h2 id="脚本">脚本</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>定义当浏览器不支持脚本时显示的替代文字。</td> + </tr> + <tr> + <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>通过 JavaScript 在运行时实例化内容的容器。</td> + </tr> + </tbody> +</table> + +<h2 id="章节">章节</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>代表 HTML 文档的内容。在文档中只能有一个 <code><body></code> 元素。</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义只包含导航链接的章节。</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义可以独立于内容其余部分的完整独立内容块。</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>标题元素实现了六层文档标题，<code><h1></code> 是最大的标题，<code><h6></code> 是最小的标题。标题元素简要地描述章节的主题。</td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>定义包含联系信息的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中主要或重要的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="组织内容">组织内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>定义一个段落。</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>代表章节、文章或其他长内容中段落之间的分隔符。</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>代表其内容已经预先排版过，格式应当保留 。</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td>代表引用自其他来源的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>定义一个有序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>定义一个无序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>定义列表中的一个列表项。</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>定义一个定义列表（一系列术语和其定义）。</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>代表一个由下一个 <code><dd></code> 定义的术语。</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>代表出现在它之前术语的定义。</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个和文档有关的图例。</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个图例的说明。</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>代表一个通用的容器，没有特殊含义。</td> + </tr> + </tbody> +</table> + +<h2 id="文字形式">文字形式</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>代表一个链接到其他资源的<em>超链接</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>代表<em>强调</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td>代表<em>特别重要</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>代表<em>不准确或不相关</em> 的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td>代表<em>作品标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>代表内联的<em>引用</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>代表<em>计算机代码</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>代表<em>代码中的变量</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>代表程序或电脑的<em>输出</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>分别代表<em>下标</em> 和<em>上标</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>代表一段<em>需要被关注</em> 的文字。</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段需要被高亮的<em>引用</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>ruby 注释</em> ，如中文拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>代表<em>换行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td> + </tr> + </tbody> +</table> + +<h2 id="编辑">编辑</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>定义<em>增加</em> 到文档的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>定义从文档<em>移除</em> 的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="嵌入内容">嵌入内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>代表一张<em>图片</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>代表一个<em>内联的框架</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>代表 <code><object></code> 元素所指定的插件的<em>参数</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>媒体源</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>与 <code><area></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>与 <code><map></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一个嵌入式<em>矢量图</em> 。</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一段<em>数学公式</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表格">表格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>定义<em>多维数据</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>代表<em>表格的标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>代表表格中一组<em>单列或多列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>代表表格中的<em>列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>代表表格中一块<em>具体数据</em> （表格主体）。</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>代表表格中一块<em>列标签</em> （表头）。</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>代表表格中一块<em>列摘要</em> （表尾）。</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>代表表格中的<em>行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>代表表格中的<em>单元格</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>代表表格中的<em>头部单元格</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表单">表单</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>代表一个<em>表单</em> ，由控件组成。</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>代表<em>控件组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td>代表 <code><fieldset></code> 控件组的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>代表表单控件的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>代表<em>按钮</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>代表<em>下拉框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>代表一个<em>选项分组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>代表一个 <code><select></code> 元素或 <code><datalist></code> 元素中的一个<em>选项</em></td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>代表<em>多行文本框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>密钥对生成器</em> 控件。</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>计算值</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>进度条</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>滑动条</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="交互元素">交互元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 <code><details></code> 元素的<em>综述</em> 或<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以点击的菜单项。</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表菜单。</td> + </tr> + </tbody> +</table> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li> + <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..b18bccd87b --- /dev/null +++ b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,27 @@ +--- +title: Quirks Mode and Standards Mode +slug: conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode +original_slug: Quirks_Mode_and_Standards_Mode +--- +<p>在web产生初期, <span class="long_text short_text" id="result_box" lang="zh-CN"><span>网页</span><span>通常被</span><span>写</span><span>成</span><span>两个版本</span></span>: 其中一个是为网景公司的 Netscape Navigator浏览器而写, 另外一个是为微软公司的 Internet Explorer浏览器而写. 随后,当W3C组织制定了web标准,各浏览器并不能立即的严格按标准执行,因为这样做会让一些已经存在的不符合新标准的网页无法正常显示.为此<span class="long_text short_text" id="result_box" lang="zh-CN"><span>,</span><span>浏览器</span><span>推出</span><span>了</span><span>两种</span><span>模式来</span><span>分别对待</span><span>新</span><span>的</span><span>符合标准的</span><span>网也与</span><span>旧的标准指定之前遗留的</span><span>网页</span><span>.</span></span></p> +<p>如今,浏览器的渲染引擎已发展成为拥有三种渲染模式:quirks mode, almost standards mode, 和full standards mode. 在<strong>quirks mode(</strong>混杂模式<strong>)</strong>中,渲染引擎会模拟Navigator 4 和 Internet Explorer 5这些古老浏览器的不标准的渲染行为来渲染网页,以防止现代浏览器不能正常渲染已经存在的一些古老网页.在<strong>full standards mode(标准规范模式)</strong>中,渲染引擎会尽量使用HTML 和 CSS 规范规定的行为来渲染网页.在<strong>almost standards mode(接近标准模式)</strong>中,渲染引擎有极少数行为不遵循标准.</p> +<h3 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">浏览器如何决定使用何种模式?</h3> +<p>对于HTML文档,浏览器使用该文档开头定义的DOCTYPE来决定是否使用quirks mode还是standards mode来渲染. 为了让你的网页完全按照full standards mode被渲染, 请确保页面开始处包含如下例子中的DOCTYPE:</p> +<pre><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html> +</pre> +<p>例子中的DOCTYPE是这样定义的:<code><!DOCTYPE html></code>,这是有史以来最简洁的DOCTYPE了,而且也是HTML5规范所推荐的写法.早起版本的HTML标准还推荐了其他的一些DOCTYPE写法,不过.<code>只有在<!DOCTYPE html>这样的</code>DOCTYPE定义下,才可以很好的保证所有浏览器都会按照full standards mode去渲染网页,即使是老掉牙的Internet Explorer 6也会如此.再没有什么理由去使用更复杂的DOCTYPE了,因为使用它们可能让你的网页触发一些浏览器的almost standards mode 或者 quirks mode.</p> +<p>确保你已经将DOCTYPE 放在HTML文档的最开始处,如果DOCTYPE前面放置了注释或XML声明等其他元素,Internet Explorer 9或更低版本将会按照quirks mode渲染该网页.</p> +<p>在HTML5中，使用DOCTYPE的唯一目的就是要激活full standards mode.旧版本的HTML标准给DOCTYPE添加了额外的意义，但是除了在quirks mode 和 standards mode之间切换,没有浏览器使用DOCTYPE做过其他的任何事情.</p> +<h4 id="XHTML">XHTML</h4> +<p>如果你将自己的网页 <code>Content-Type</code> HTTP头的值设定为 <code>application/xhtml+xml</code> MIME类型,你不需要在网页文档内部定义任何DOCTYPE就可以开启standards mode渲染网页.这是由于<code>Content-Type</code> HTTP头的优先级是最高的.但是这样的设置会导致Internet Explorer 8及其以下版本因不认识如上的MIME类型而显示下载文件的窗口,Internet Explorer 9及其以上版本解决了这个问题.</p> +<p>如果你将自己的XHML网页的<code>Content-Type</code> HTTP头设定为<code>text/html的</code>MIME类型,浏览器将会按照HTML文件去读取它,如果想使用standards mode,你必须指定DOCTYPE.</p><h3 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">不同模式之间的差别</h3> +<p>查看 <a href="/en/Mozilla_Quirks_Mode_Behavior" title="en/Mozilla_Quirks_Mode_Behavior">list of quirks</a> 和 <a href="/en/Gecko's_"Almost_Standards"_Mode" title="en/Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a> 了解不同模式之间的差别.</p> +<p>{{ languages( { "en": "en/Quirks_Mode_and_Standards_Mode" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/http/cors/index.html b/files/zh-cn/conflicting/web/http/cors/index.html new file mode 100644 index 0000000000..eb37a40e1d --- /dev/null +++ b/files/zh-cn/conflicting/web/http/cors/index.html @@ -0,0 +1,250 @@ +--- +title: Server-Side Access Control +slug: conflicting/Web/HTTP/CORS +tags: + - AJAX + - CORS + - HTTP + - PHP +translation_of: Web/HTTP/CORS +translation_of_original: Web/HTTP/Server-Side_Access_Control +original_slug: Web/HTTP/Server-Side_Access_Control +--- +<p>{{HTTPSidebar}}</p> + +<p>浏览器会针对从 {{domxref("XMLHttpRequest")}} 或<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>中发起的跨网站请求发送特定的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP标头</a>。它还希望看到使用跨站点响应发送回的特定HTTP标头。这些标头的概述，包括启动请求和处理来自服务器的响应的示例JavaScript代码, 以及每个头的讨论，可以在HTTP访问控制（<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>）文章中找到，应该作为本文的配套文章阅读。</p> + +<p>HTTP访问控制文章是很好的使用指南。本文介绍利用PHP处理访问控制请求和制定访问控制响应。本文的目标读者是服务器程序员或管理员。虽然在PHP代码示例所示,类似的概念适用于ASP.net,Perl、Python、Java等;一般来说,这些概念可以应用于任何服务器端编程环境处理HTTP请求和动态制定的HTTP响应。</p> + +<h3 id="讨论HTTP标头"><strong>讨论HTTP标头</strong></h3> + +<p>了解HTTP 头部信息, 建议先阅读这篇文章 <a href="https://developer.mozilla.org/En/HTTP_access_control">covering the HTTP headers used by both clients (such as Firefox 3.5 and beyond) and servers</a></p> + +<div> </div> + +<h3 id="工作代码示例"><strong>工作代码示例</strong></h3> + +<p>随后的章节中PHP代码（和JavaScript调用服务器）可查看<a href="http://arunranga.com/examples/access-control/">相关代码</a>，这些代码在实现了XMLHttpRequest的浏览器上都可运行，像Firefox 3.5及以上。</p> + +<div> </div> + +<h3 id="简单的跨站请求"><strong>简单的跨站请求</strong></h3> + +<p><a class="internal" href="/En/HTTP_access_control#Simple_requests" title="En/HTTP access control#Simple requests">简单的访问控制请求</a> 在下列情况下会被发起：</p> + +<ul> + <li>请求方式为 HTTP/1.1 <code style="font-style: normal;">GET </code>或者<code style="font-style: normal;"> POST</code>，如果是<code style="font-style: normal;">POST</code>，则请求的Content-Type为以下之一： <code style="font-style: normal;">application/x-www-form-urlencoded</code>, <code style="font-style: normal;">multipart/form-data</code>, 或<code style="font-style: normal;">text/plain</code></li> + <li>在请求中，不会发送自定义的头部（如X-Modified）</li> +</ul> + +<p>以下情况，请求会返回相关响应信息</p> + +<ul> + <li>如果资源是允许公开访问的(就像任何允许GET访问的 HTTP资源),返回Access-Control-Allow-Origin:*头信息就足够了,除非是一些需要Cookies和HTTP身份验证信息的请求。</li> + <li> + <div class="tran-result">如果资源访问被限制基于相同的域名,或者如果要访问的资源需要凭证(或设置凭证),那么就有必要对请求头信息中的ORIGIN进行过滤,或者至少响应请求的来源(例如Access-Control-Allow-Origin:http://arunranga.com)。另外,将发送Access-Control-Allow-Credentials:TRUE头信息，这在后续部分将进行讨论。</div> + </li> +</ul> + +<p> <a class="internal" href="/En/HTTP_access_control#Simple_requests" title="En/HTTP access control#Simple requests">简单的访问控制请求</a> 介绍了在客户端和服务端进行信息交换的HEADER. 下面是一段用来处理简单请求的PHP代码。</p> + +<pre class="brush: php"><?php + +// 我们将只授予 arunranga.com 域的访问权限，因为我们认为它通过 application/xml 方式来访问这些资源是安全的。 + +if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") +{ + + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-type: application/xml'); + readfile('arunerDotNetResource.xml'); +} +else +{ +header('Content-Type: text/html'); +echo "<html>"; +echo "<head>"; +echo " <title>Another Resource</title>"; +echo "</head>"; +echo "<body>", + "<p>This resource behaves two-fold:"; +echo "<ul>", + "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; +echo " <li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; +echo "you get this HTML document</li>", + "</ul>", +"</body>", +"</html>"; +} +?> +</pre> + +<p>上面的代码通过检查浏览器发送的 <code>ORIGIN</code> 头部信息（通过<code> $_SERVER['HTTP_ORIGIN']</code> ) 是否匹配 '<a class="external" href="http://arunranga.com" rel="freelink" style="font-size: 14px; line-height: 1.5;">http://arunranga.com</a>' 得知，如果是，返回 Access-Control-Allow-Origin: <a class="external" href="http://arunranga.com" rel="freelink" style='font-size: 14px; line-height: 1.5; font-family: "Courier New","Andale Mono",monospace;'>http://arunranga.com</a> 。如果你的浏览器支持访问控制<span style="font-size: 14px; line-height: 1.5;">，你可以访问 <a class="external" href="http://arunranga.com/examples/access-control/" style="font-size: 14px; line-height: 1.5;" title="http://arunranga.com/examples/access-control/">这里 .</a></span></p> + +<h3 id="预请求"><strong>预请求</strong></h3> + +<p><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">预请求</a> 发生在下列情况中：</p> + +<ul> + <li>使用GET或POST以外的方法；利用POST发送<code style="font-style: normal;">application/x-www-form-urlencoded</code>, <code style="font-style: normal;">multipart/form-data</code>, or <code style="font-style: normal;">text/plain</code>之外的Content-Type；例如，post body的Content-type为<code style="font-style: normal;">application/xml</code></li> + <li>发送自定义的头信息，如x-pingaruner</li> +</ul> + +<p><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">预请求访问控制</a> 这篇文章介绍了在客户端和服务器间进行交换的<span style="font-size: 14px; line-height: 1.5;">头信息，响应preflight requests请求的服务器资源会有这些动作：</span></p> + +<ul> + <li> 基于 <code>ORIGIN </code>进行过滤</li> + <li> preflight请求的响应内容，包括必要的 <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> (保证系统正常运行)，如果需要凭据的话，也会包括 <code>Access-Control-Allow-Credentials </code>头信息</li> + <li>响应实际请求，包括处理 POST数据等。</li> +</ul> + +<p>下面是相关的PHP内容， <a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">preflighted request</a>:</p> + +<pre class="brush: php"><?php +if($_SERVER['REQUEST_METHOD'] == "GET") +{ + header('Content-Type: text/plain'); + echo "This HTTP resource is designed to handle POSTed XML input from arunranga.com and not be retrieved with GET"; + +} +elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") +{ + // 告诉客户端我们支持来自 arunranga.com 的请求并且预请求有效期将仅有20天 + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") + { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); + header('Access-Control-Allow-Headers: X-PINGARUNER'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + //exit(0); + } + else + { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + + } +} +elseif($_SERVER['REQUEST_METHOD'] == "POST") +{ + /* 通过首先获得XML传送过来的blob来处理POST请求，然后做一些处理, 最后将结果返回客户端 + */ + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") + { + $postData = file_get_contents('php://input'); + $document = simplexml_load_string($postData); + + // 对POST过来的数据进行一些处理 + + $ping = $_SERVER['HTTP_X_PINGARUNER']; + + + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-Type: text/plain'); + echo // 处理之后的一些响应 + } + else + die("POSTing Only Allowed from arunranga.com"); +} +else + die("No Other Methods Allowed"); + +?> +</pre> + +<p>可以看到，就像POST一样，针对OPTIONS preflight请求，同样返回对应的头信息。这样 以来，处理preflight就像处理普通的request请求一样，在针对OPTIONS请求的响应信息中，服务器通过客户端，实际的请求可以用POST的形式发送，同时可附加X-PINGARUNERP这样的头信息。如果浏览器支持的话，可访问<a class="external" href="http://arunranga.com/examples/access-control/" style="line-height: 1.5;" title="http://arunranga.com/examples/access-control/"> 这里</a></p> + +<h3 id="凭证请求"><strong>凭证请求</strong></h3> + +<p>带凭据的请求，将Cookies和HTTP认证信息一起发送出去的跨域请求，根据请求方式，可以是<span style="line-height: 1.5;"> </span><a class="internal" href="/En/HTTP_access_control#Simple_requests" style="line-height: 1.5;" title="En/HTTP access control#Simple requests">Simple</a><span style="line-height: 1.5;"> 或 </span><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" style="line-height: 1.5;" title="En/HTTP access control#Preflighted requests">Preflighted</a><span style="line-height: 1.5;">,</span></p> + +<p>发送 <a class="internal" href="/En/HTTP_access_control#Simple%20requests" title="En/HTTP access control#Simple requests">简单请求</a> 时, Firefox 3.5 (或以上)会发送带Cookies信息的请求， (如果<code>withCredentials</code> 设以true). 如果服务器响应真的是可信任的, 客户端接受并进行输出。 在 <a class="internal" href="/En/HTTP_access_control#Preflighted%20requests" title="En/HTTP access control#Preflighted requests">预请求</a> 中,服务器可以<span style="line-height: 1.5;">针对</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">OPTIONS</code><span style="line-height: 1.5;"> 请求，返回</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">Access-Control-Allow-Credentials: true</code><span style="line-height: 1.5;"> 信息</span></p> + +<p>下面是处理请求的PHP内容:</p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") +{ + + // First See if There Is a Cookie + //$pageAccess = $_COOKIE['pageAccess']; + if (!isset($_COOKIE["pageAccess"])) { + + setcookie("pageAccess", 1, time()+2592000); + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Cache-Control: no-cache'); + header('Pragma: no-cache'); + header('Access-Control-Allow-Credentials: true'); + header('Content-Type: text/plain'); + echo 'I do not know you or anyone like you so I am going to mark you with a Cookie :-)'; + + } + else + { + + $accesses = $_COOKIE['pageAccess']; + setcookie('pageAccess', ++$accesses, time()+2592000); + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Credentials: true'); + header('Cache-Control: no-cache'); + header('Pragma: no-cache'); + header('Content-Type: text/plain'); + echo 'Hello -- I know you or something a lot like you! You have been to ', $_SERVER['SERVER_NAME'], ' at least ', $accesses-1, ' time(s) before!'; + } + +} +elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") +{ + // Tell the Client this preflight holds good for only 20 days + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") + { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: GET, OPTIONS'); + header('Access-Control-Allow-Credentials: true'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + //exit(0); + } + else + { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + + } +} +else + die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); + + + +?> +</pre> + +<p>需要注意的是，在带凭据请求中， <code>Access-Control-Allow-Origin:</code> 头不能是通配符 "*"，必须是一个有效的域名。 可参考这里 <a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">running here</a></p> + +<h3 id="Apache示例"><strong>Apache示例</strong></h3> + +<h4 id="限制对某些URI的访问"><strong>限制对某些URI的访问</strong></h4> + +<p>最有效的方法之一，利用Apache rewrite, 环境变量，还有headers使<code style="font-style: normal; line-height: 1.5;">Access-Control-Allow-*</code><span style="line-height: 1.5;"> 对某些特定的URI生效，比如，以无认证信息形式利用GET跨域请求api(.*).json。</span></p> + +<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] +Header set Access-Control-Allow-Origin "*" env=CORS +Header set Access-Control-Allow-Methods "GET" env=CORS +Header set Access-Control-Allow-Credentials "false" env=CORS +</pre> + +<h3 id="参见"><strong>参见</strong></h3> + +<ul> + <li><a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li> + <li><a class="internal" href="/En/HTTP_access_control" title="En/HTTP Access Control">HTTP Access Control covering the HTTP Headers</a></li> + <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a class="external" href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">Web Fonts</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/http/csp/index.html b/files/zh-cn/conflicting/web/http/csp/index.html new file mode 100644 index 0000000000..c9e88056a9 --- /dev/null +++ b/files/zh-cn/conflicting/web/http/csp/index.html @@ -0,0 +1,37 @@ +--- +title: 内容安全策略 (CSP) +slug: conflicting/Web/HTTP/CSP +translation_of: Web/HTTP/CSP +translation_of_original: Web/Security/CSP +original_slug: Web/Security/CSP +--- +<div>{{gecko_minversion_header("2.0")}}</div> + +<p><b>内容安全策略</b> (CSP, Content Security Policy) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。</p> + +<p>尽管内容安全策略在 Firefox 4 中已经包含，使用 <code>X-Content-Security-Policy</code> 头部来实现，但它使用的是过时的 CSP 标准。Firefox 23 包含了更新的 CSP 实现，使用的是 W3C CSP 1.0 标准中描述的没有前缀的 <code>Content-Security-Policy</code> 头部和指令。</p> + +<h2 id="内容安全策略主题">内容安全策略主题</h2> + +<dl> + <dt><a href="/zh-CN/docs/Security/CSP/Introducing_Content_Security_Policy">介绍内容安全策略</a></dt> + <dd>概述什么是 CSP，以及它如何让你的网站变得更安全。</dd> + <dt><a href="/zh-CN/docs/Security/CSP/CSP_policy_directives">CSP 策略指令</a></dt> + <dd>CSP 策略指令参考。</dd> + <dt><a href="/zh-CN/docs/Security/CSP/Using_Content_Security_Policy">使用内容安全策略</a></dt> + <dd>你可以通过配置策略集调整 CSP 的行为。这让你可以按需对个别类型的资源使用宽松或严格的安全策略。这篇文章讲述了如何建立 CSP 和如何激活你网站的 CSP。</dd> + <dt><a href="/zh-CN/docs/Security/CSP/Using_CSP_violation_reports">使用 CSP 违规报告</a></dt> + <dd>如何使用 CSP 违规报告来监视攻击你网站的尝试和攻击者。</dd> + <dt><a href="/zh-CN/docs/Security/CSP/Default_CSP_restrictions">默认 CSP 限制 </a>{{obsolete_inline("15.0")}}</dt> + <dd>CSP 强制实施的默认限制的细节</dd> +</dl> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/Security">Security</a></li> + <li><a href="/zh-CN/docs/HTTP_access_control">HTTP access control</a></li> + <li><a class="link-https" href="http://www.w3.org/TR/CSP/">CSP 1.0 specification</a></li> + <li><a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html">CSP 1.1 specification</a></li> + <li><a href="/docs/Apps/CSP">CSP restrictions for Open Web Apps</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html b/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html new file mode 100644 index 0000000000..aad26533cd --- /dev/null +++ b/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html @@ -0,0 +1,98 @@ +--- +title: Using CSP violation reports +slug: conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 +translation_of: Web/HTTP/CSP +translation_of_original: Web/Security/CSP/Using_CSP_violation_reports +original_slug: Web/Security/CSP/Using_CSP_violation_reports +--- +<p>{{ gecko_minversion_header("2.0") }}{{ draft() }}</p> + +<p>CSP其中的一个强大的特性是它为web站点管理员提供了生成和报告详细的站点攻击的描述信息。这些报告通过HTTP的POST请求发送到预先你指定的一个或多个服务器上，这些服务器可以通过 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 策略来制定。发送的报告是JSON格式的，对于非ASCII字符，其使用了默认的JSON UTF-8编码。本文将向你展示如何在你的站点上配置报告，以及报告的格式。</p> + +<p>对于支持CSP的浏览器，只要你制定了合法的 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" style="text-decoration: underline;" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 指令，任何违背该策略的攻击操作都会被浏览器所报告。</p> + +<h2 id="开启报告">开启报告</h2> + +<p>默认情况下，攻击是不会被报告的。要开启报告模式，你要指定 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 指令，这个指令包含了至少一个用于接收报告的URI:</p> + +<pre>Content-Security-Policy: default-src self; report-uri http://reportcollector.example.com/collector.cgi +</pre> + +<p>然后，你要搭建接受报告的服务器；它可以对报告进行存储和并进行适时的处理。</p> + +<p>注意：Firefox 23以前的版本所使用的报告头为 X-Content-Security-Policy。这个头在将来将被废弃。</p> + +<h2 id="攻击报告的语法">攻击报告的语法</h2> + +<p>报告的JSON对象包含了以下的数据:</p> + +<dl> + <dt><code>document-uri</code></dt> + <dd>当前攻击所发生的文档的URI。</dd> + <dt><code>referrer</code></dt> + <dd>当前攻击所发生的文档的来源页面的URI。</dd> + <dt><code>blocked-uri</code></dt> + <dd>被CSP策略所拦截的资源的URI。如果被拦截资源的URI属于与当前文档不同的来源，则所拦截的资源URI会被削减至只剩scheme,host和port三部分。</dd> + <dt><code>violated-directive</code></dt> + <dd>攻击所针对的策略部分的名称</dd> + <dt><code>original-policy</code></dt> + <dd>由X-Content-Security-Policy头指定的原始策略。</dd> +</dl> + +<h2 id="Sample_violation_report">Sample violation report</h2> + +<h2 id="攻击报告的样例">攻击报告的样例</h2> + +<div>在CSP规范中，已经有一个样例展示攻击报告。这里我们来看另一个例子。</div> + +<div> </div> + +<div>假设有一个页面叫做<a class="external" href="http://example.com/signup.html" rel="freelink" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">http://example.com/signup.html</a>. 它使用了一下的策略，它禁止从除cdn.example.com以外的域加载样式表。</div> + +<div> +<pre>Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports +</pre> +</div> + +<div>signup.html的HTML则像下面这样：</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sign Up</title> + <link rel="stylesheet" href="css/style.css"> + </head> + <body> + ... Content ... + </body> +</html> +</pre> + +<div><span style="line-height: 22.0080013275147px;">看到问题了么？在策略中指明样式表只能从cdn.example.com加载，而这个页面则试图从它本域（http://example.com）下载样式表. 浏览器基于强制CSP的开启，在这个页面被访问时，将以下的报告通过POST请求发送到 </span><a href="http://example.com/_/csp-reports" rel="freelink" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">http://example.com/_/csp-reports</a><span style="line-height: 22.0080013275147px;"> 下</span></div> + +<pre>{ + "csp-report": { + "document-uri": "http://example.com/signup.html", + "referrer": "", + "blocked-uri": "http://example.com/css/style.css", + "violated-directive": "style-src cdn.example.com", + "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports" + } +} +</pre> + +<p><span style="line-height: 22.0080013275147px;">我们可以看到，这个报告在blocked-uri中包含了错误资源的整个路径。而这并非总是这样。例如，当signup.html试图从</span><a href="http://anothercdn.example.com/stylesheet.css" style="text-decoration: underline;"><code>http://anothercdn.example.com/stylesheet.css</code></a><span style="line-height: 22.0080013275147px;">加载css的时候，浏览器只会记录来源(http://anothercdn.example.com)而不会记录完整的路径。CSP规范中对这一行为进行了</span><a href="http://www.w3.org/TR/CSP/#violation-reports">解释</a>。总结一下<span style="line-height: 22.0080013275147px;">，CSP的作用是放置跨域信息的泄露。值得注意的是，规范中的</span> <a href="http://www.w3.org/TR/CSP/#sample-violation-report">攻击报告范例</a> 有一处错误(其中blocked-uri应该是"http://evil.example.com")。</p> + +<h2 id="更多参考">更多参考</h2> + +<ul> + <li><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Introducing Content Security Policy</a></li> + <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> + <li><a href="/en/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">CSP policy directives</a></li> +</ul> + +<div class="noinclude"> +<p>{{ languages( { "ja": "ja/Security/CSP/Using_CSP_violation_reports" } ) }}</p> +</div> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html new file mode 100644 index 0000000000..8b035b39df --- /dev/null +++ b/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html @@ -0,0 +1,57 @@ +--- +title: 内容安全策略介绍 +slug: conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 +tags: + - 介绍 + - 内容安全策略 + - 安全 +translation_of: Web/HTTP/CSP +translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy +original_slug: Web/Security/CSP/Introducing_Content_Security_Policy +--- +<p>{{ gecko_minversion_header("2") }}</p> + +<p><strong>内容安全策略</strong> (CSP) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。</p> + +<p>CSP被设计成向后兼容；不支持的浏览器依然可以运行使用了它的服务器页面，反之亦然。不支持CSP的浏览器会忽略它，像平常一样运行，默认对网页内容使用标准的同源策略。如果网站不提供CSP头部，浏览器同样会使用标准的<a href="/zh-CN/docs/Same_origin_policy_for_JavaScript">同源策略</a>。</p> + +<p>开启CSP就如配置您的页面服务来返回<code>Content-Security-Policy</code> HTTP 头部一样简单. (Firefox 23之前的版本使用的是<code>X-Content-Security-Policy</code> ). 查看 <a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a> 获取如何配置和开启CSP的细节</p> + +<div class="note"><strong>提示：</strong> 内容安全策略<a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element">标准特点</a> 是一种能被 {{ HTMLElement("meta") }}元素来配置的一种协议，但这种做法仍未被Firefox支持， 支持这种做法是被添加在<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=663570" title="https://bugzilla.mozilla.org/show_bug.cgi?id=663570">bug 663570</a>.</div> + +<h2 id="减少跨域脚本">减少跨域脚本</h2> + +<p>CSP的主要目标是减少和报告XSS攻击. XSS攻击利用浏览器对从服务器接受的内容的信任。恶意的脚本在受害的浏览器被执行, 因为浏览器相信内容源，甚至当内容源并不是从它应该来的地方过来的。</p> + +<p>CSP使服务器管理员能够通过制定浏览器能够执行的可信赖脚本的域名来减少或者消除由XSS可能出现的矢量。 一个兼容CSP的浏览器将只会执行加载与白名单域名的源文件的脚本，忽略那些其他的脚本（包括内联脚本和事件操控HTML属性）</p> + +<p>作为一种最终的保护，想要禁止脚本的站点可以选择全局禁止脚本执行</p> + +<h2 id="减少数据包监听攻击">减少数据包监听攻击</h2> + +<p>为了重新约束内容被下载的域名, 服务端能够制定那种协议能够被使用；例如（理论上，从安全的立足点来看），一个服务制定所有的内容都通过HTTPS协议来加载</p> + +<div class="note"><strong>提示：</strong>一个完整地数据传输安全策略不单单包括通HTTPS加强数据的传输，还可以使所有cookie带上安全标志并且提供从HTTP页面到对应HTTPS页面的自动重定向。</div> + +<div class="note"><strong>提示：</strong>站点可能也会使用 <a href="/en/Security/HTTP_Strict_Transport_Security" title="/en/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> HTTP头部来确保浏览器只通过一个加密渠道来连接他们</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> + <li><a href="/en/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">CSP policy directives</a></li> + <li><a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a></li> +</ul> + +<h2 id="Specification">Specification</h2> + +<ul> + <li>{{ spec("https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/latest.html", "Content Security Policy 1.1 (Editor's Draft)") }}</li> + <li>{{ spec("http://www.w3.org/TR/CSP/", "Content Security Policy 1.0 (Candidate Recommendation)") }}</li> +</ul> + +<div class="noinclude"> +<p>{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}</p> +</div> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/http/status/index.html b/files/zh-cn/conflicting/web/http/status/index.html new file mode 100644 index 0000000000..cb0c385f77 --- /dev/null +++ b/files/zh-cn/conflicting/web/http/status/index.html @@ -0,0 +1,14 @@ +--- +title: HTTP response codes +slug: conflicting/Web/HTTP/Status +translation_of: Web/HTTP/Status +translation_of_original: Web/HTTP/HTTP_response_codes +original_slug: Web/HTTP/HTTP_response_codes +--- +<p>HTTP状态码(响应码)用来表明这个<a href="/zh-cn/HTTP" title="zh-cn/HTTP">HTTP</a> 请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误.</p> +<p> </p> +<p><span class="long_text short_text" id="result_box" lang="zh-CN"><span>下表列出了</span><span>所有HTTP</span></span><span class="long_text short_text" lang="zh-CN"><span>状态码</span><span>,以及他们</span><span>各自所代表的含义</span><span>:</span></span></p> +<table class="standard-table" style="width: 100%;"> <thead> <tr> <th scope="col">状态码 </th> <th scope="col">原因短语</th> <th scope="col">代表含义</th> <th scope="col">HTTP 版本 </th> </tr> </thead> <tbody> <tr> <th colspan="4">消息响应</th> </tr> <tr> <td id="100">100 </td> <td>Continue<br> (继续)</td> <td>客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在请求完成后向客户端发送一个最终响应.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="101">101</td> <td>Switching Protocol<br> (切换协议)</td> <td>服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到 在Upgrade消息头中定义的那些协议。: 只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特 性的资源。</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">成功响应</th> </tr> <tr> <td id="200">200</td> <td>OK<br> (成功)</td> <td>请求成功.成功的意义根据请求所使用的方法不同而不同. <ul> <li>GET: 资源已被提取,并作为响应体传回客户端.</li> <li>HEAD: <span class="long_text short_text" id="result_box" lang="zh-CN"><span>实体</span><span>头</span><span>已作为响应头传回客户端</span></span></li> <li>POST: 经过服务器处理客户端传来的数据,适合的资源作为响应体传回客户端.</li> <li>TRACE: <span class="long_text short_text" id="result_box" lang="zh-CN"><span>服务器</span><span>收到</span><span>请求消息</span></span>作为响应体传回客户端.</li> </ul> PUT, DELETE, 和 OPTIONS 方法永远不会返回 200 状态码.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="201">201</td> <td>Created<br> (已创建)</td> <td>请求成功，而且有一个新的资源已经依据请求的需要而建立，通常这是 PUT 方法得到的响应码.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="202">202</td> <td>Accepted<br> (已创建)</td> <td>服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行。在异步操作的场合下，没有比发送这个状态码更方便的做法了。:返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），而不必让客户端一直保持与服务器的连接直到批处理操作全部完成。在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息，以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="203">203</td> <td>Non-Authoritative Information<br> (未授权信息)</td> <td> <p>服务器已成功处理了请求,但返回的实体头部元信息不是在原始服务器上有效的确定集合，而是来自本地或者第三方的拷贝,如果不是上述情况,使用200状态码才是最合适的.</p> </td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="204">204</td> <td>No Content<br> (无内容)</td> <td>该响应没有响应内容,只有响应头,响应头也可能是有用的.用户代理可以根据新的响应头来更新对应资源的缓存信息.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="205">205</td> <td>Reset Content<br> (重置内容)</td> <td>告诉用户代理去重置发送该请求的窗口的文档视图.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="206">206</td> <td>Partial Content<br> (部分内容)</td> <td>当客户端通过使用range头字段进行文件分段下载时使用该状态码</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">重定向</th> </tr> <tr> <td id="300">300</td> <td>Multiple Choice<br> (多种选择)</td> <td>该请求有多种可能的响应,用户代理或者用户必须选择它们其中的一个.服务器没有任何标准可以遵循去代替用户来进行选择.</td> <td>HTTP/1.0 and later</td> </tr> <tr> <td id="301">301</td> <td>Moved Permanently<br> (永久移动)</td> <td>该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的<code>Location</code>:头字段里找到.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="302">302</td> <td>Found<br> (临时移动)</td> <td>该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的<code>Location:</code>头字段里找到.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="303">303</td> <td>See Other<br> (查看其他位置)</td> <td>服务器发送该响应用来引导客户端使用GET方法访问另外一个URI.</td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="304">304</td> <td>Not Modified<br> (未修改)</td> <td>告诉客户端,所请求的内容距离上次访问并没有变化. 客户端可以直接从浏览器缓存里获取该资源.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="305">305</td> <td>Use Proxy<br> (使用代理)</td> <td>所请求的资源必须统过代理才能访问到.由于安全原因,该状态码并未受到广泛支持.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="306">306</td> <td><em>unused</em><br> (未使用)</td> <td><span class="long_text short_text" id="result_box" lang="zh-CN"><span>这个</span><span>状态码</span><span>已经不再被使用</span><span>,</span><span>当初它被用</span><span>在</span><span>HTTP 1.1规范</span><span>的</span><span>旧版本</span><span>中.</span></span></td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="307">307</td> <td>Temporary Redirect<br> (临时重定向)</td> <td> <p>服务器发送该响应用来引导客户端使用相同的方法访问另外一个URI来获取想要获取的资源.新的URL会在响应的<code>Location:</code>头字段里找到.与302状态码有相同的语义,且前后两次访问必须使用相同的方法(GET POST).</p> </td> <td>HTTP/1.1 可用</td> </tr> <tr> <td>308</td> <td>Permanent Redirect<br> (永久重定向)</td> <td> <p>所请求的资源将永久的位于另外一个URI上.新的URL会在响应的<code>Location:</code>头字段里找到.与301状态码有相同的语义,且前后两次访问必须使用相同的方法(GET POST).</p> <div class="note"><strong>注意:</strong> 这是个试验性的状态码,这里是<a class="external" href="http://greenbytes.de/tech/webdav/#draft-reschke-http-status-308" title="http://greenbytes.de/tech/webdav/#draft-reschke-http-status-308">规范草案</a>. <a href="/en/Firefox_14_for_developers" title="en/Firefox_14_for_developers">Firefox14</a>已经实现对该状态码的支持.</div> </td> <td> <p>HTTPbis <a class="external" href="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-05.html" title="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-05.html"></a><br> (试验草案)</p> </td> </tr> <tr> <th colspan="4">客户端错误</th> </tr> <tr> <td id="400">400</td> <td>Bad Request<br> (错误请求)</td> <td>因发送的请求语法错误,服务器无法正常读取.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="401">401</td> <td>Unauthorized<br> (未授权)</td> <td>需要身份验证后才能获取所请求的内容,类似于403错误.不同点是.401错误后,只要正确输入帐号密码,验证即可通过.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="402">402</td> <td>Payment Required<br> (需要付款)</td> <td><span class="long_text" id="result_box" lang="zh-CN"><span>该状态</span><span>码</span><span>被保留以</span><span>供将来使用.</span><span>创建此代码</span><span>最初的目的是</span><span>为</span><span>数字</span><span>支付系统而用</span><span>,</span><span>然而,到现在也没投入使用</span><span>.</span></span></td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="403">403</td> <td>Forbidden<br> (禁止访问)</td> <td>客户端没有权利访问所请求内容,服务器拒绝本次请求.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="404">404</td> <td>Not Found<br> (未找到)</td> <td>服务器找不到所请求的资源.由于经常发生此种情况,所以该状态码在上网时是非常常见的.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="405">405</td> <td>Method Not Allowed<br> (不允许使用该方法)</td> <td>该请求使用的方法被服务器端禁止使用,RFC2616中规定, <code>GET</code> 和 <code>HEAD</code> 方法不能被禁止.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="406">406</td> <td>Not Acceptable<br> (无法接受)</td> <td>在进行<a href="/zh-cn/HTTP/Content_negotiation#Server-driven_negotiation" title="https://developer.mozilla.org/zh-cn/HTTP/Content_negotiation#Server-driven_negotiation"><span class="st">服务器驱动内容协商</span></a>后,没有发现合适的内容传回给客户端.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="407">407</td> <td>Proxy Authentication Required<br> (要求代理身份验证)</td> <td> <p>类似于状态码 401,不过需要通过代理才能进行验证.</p> </td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="408">408</td> <td>Request Timeout<br> (请求超时)</td> <td>客户端没有在服务器预备等待的时间内完成一个请求的发送.这意味着服务器将会切断和客户端的连接. 在其他浏览器中,这种响应更常见一些, 例如Chrome 和 IE9, 目的是为了使用 <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP 预连机制</a> <span class="long_text short_text" id="result_box" lang="zh-CN"><span>加快浏览速度</span></span> (查看{{ bug("634278") }}, Firefox在未来版本中会实现这种机制). 同时注意,一些服务器不发送此种响应就直接切断连接.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="409">409</td> <td>Conflict<br> (冲突)</td> <td>该请求与服务器的当前状态所冲突.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="410">410</td> <td>Gone<br> (已失效)</td> <td>所请求的资源已经被删除.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="411">411</td> <td>Length Required<br> (需要内容长度头)</td> <td>因服务器在本次请求中需要 <code>Content-Length</code> 头字段,而客户端没有发送.所以,服务器拒绝了该请求.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="412">412</td> <td>Precondition Failed<br> (预处理失败)</td> <td>服务器没能满足客户端在获取资源时在请求头字段中设置的先决条件.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="413">413</td> <td>Request Entity Too Large<br> (请求实体过长)</td> <td>请求实体大小超过服务器的设置的最大限制,服务器可能会关闭HTTP链接并返回<code>Retry-After</code> 头字段.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="414">414</td> <td>Request-URI Too Long<br> (请求网址过长)</td> <td>客户端请求所包含的URI地址太长,以至于服务器无法处理.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="415">415</td> <td>Unsupported Media Type<br> (媒体类型不支持)</td> <td>服务器不支持客户端所请求的媒体类型,因此拒绝该请求.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="416">416</td> <td>Requested Range Not Satisfiable<br> (请求范围不合要求)</td> <td>请求中包含的<code>Range</code>头字段无法被满足,通常是因为<code>Range</code>中的数字范围超出所请求资源的大小.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="417">417</td> <td>Expectation Failed<br> (预期结果失败)</td> <td>在请求头<code> Expect</code> 中指定的预期内容无法被服务器满足.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">服务器端错误</th> </tr> <tr> <td id="500">500</td> <td>Internal Server Error<br> (内部服务器错误)</td> <td>服务器遇到未知的无法解决的问题.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="501">501</td> <td>Implemented<br> (未实现)</td> <td>服务器不支持该请求中使用的方法,比如<code>POST</code> 和 <code>PUT.只有</code><code>GET</code> 和 <code>HEAD</code> 是RFC2616规范中规定服务器必须实现的方法.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="502">502</td> <td>Bad Gateway<br> (网关错误)</td> <td>服务器作为网关且从上游<span class="st">服务器获取到了一个无效的HTTP响应</span>.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="503">503</td> <td>Service Unavailable<br> (服务不可用)</td> <td>由于临时的服务器维护或者过载,服务器当前无法处理请求.这个状况是临时的,并且将在一段时间以后恢复.如果能够预计延迟时间,那么响应中可以包含一个<code>Retry-After:</code>头用以标明这个延迟时间.如果没有给出这个<code>Retry-After:</code>信息，那么客户端应当以处理500响应的方式处理它.同时,这种情况下,一个友好的用于解释服务器出现问题的页面应当被返回,并且,缓存相关的HTTP头信息也应该包含,因为通常这种错误提示网页不应当被客户端缓存.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="504">504</td> <td>Gateway Timeout <br> (网关超时)</td> <td>服务器作为网关且不能从上游<span class="st">服务器</span>及时的得到响应返回给客户端.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="505">505</td> <td>HTTP Version Not Supported<br> (HTTP版本不受支持)</td> <td>服务器不支持客户端发送的HTTP请求中所使用的HTTP协议版本.</td> <td>HTTP/1.1 可用 </td> </tr> </tbody> +</table> +<p> </p> +<p>{{ languages( { "en": "en/HTTP/HTTP_response_codes"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..cfe969feee --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html @@ -0,0 +1,137 @@ +--- +title: 关于本指南 +slug: conflicting/Web/JavaScript/Guide/Introduction +tags: + - JavaScript + - 初学者 + - 指南 +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/About +original_slug: Web/JavaScript/Guide/About +--- +<p>JavaScript 是一种跨平台的，基于对象的脚本语言。本指南介绍了所有您使用 JavaScript 所需要了解的事情。</p> + +<h2 id="JavaScript_各版本中的新特性">JavaScript 各版本中的新特性</h2> + + +<p></p><ul> +<li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8">New in JavaScript 1.8</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5 的新特性</a></li> +</ul><p></p> + +<h2 id="您应该已经了解的事情">您应该已经了解的事情</h2> + +<p>本指南假设您具有以下背景：</p> + +<ul> + <li>对互联网和万维网（WWW）有基本的理解。</li> + <li>对于超文本标记语言（HTML）的较好认知。</li> + <li>一些编程经验。如果你刚开始接触编程，请学习<a href="https://developer.mozilla.org/zh-CN/docs/JavaScript">JavaScript</a>页面所链接的教程</li> +</ul> + +<h2 id="JavaScript_版本">JavaScript 版本</h2> + +<table class="standard-table"> + <caption>表格 1 JavaScript 和 Navigator 版本对照</caption> + <thead> + <tr> + <th scope="col">JavaScript 版本</th> + <th scope="col">Navigator 版本</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla （开源浏览器）</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>，及其它基于 Mozilla 1.8 的产品</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>，及其它基于 Mozilla 1.8.1 的产品</td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>，及其它基于 Gecko 1.9 的产品</td> + </tr> + </tbody> +</table> + +<h2 id="哪里可以找到_JavaScript_的信息">哪里可以找到 JavaScript 的信息</h2> + +<p>JavaScript 文档包括以下书目：</p> + +<ul> + <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript 指南</a> （即本指南）提供了关于 JavaScript 语言及其对象的有关信息。</li> + <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript 参考</a> 提供 有关JavaScript 语言的参考资料。</li> +</ul> + +<p>如果您刚刚开始接触 JavaScript，可以从<a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"> JavaScript 指南</a> 开始。一旦掌握了基础知识，您可以从 <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript 参考</a> 中获得更多关于特定的对象和语句的细节。</p> + +<h2 id="学习_JavaScript_的窍门">学习 JavaScript 的窍门</h2> + +<p>开始学习 JavaScript 很容易：您只需要一个流行的 Web 浏览器即可。这本指南中包含了一些仅在 Firefox（以及其它基于 Gecko 的浏览器）的近期版本中才有的特性，因此，建议您使用最新的 Firefox 浏览器。</p> + +<p>在Firefox中内嵌了两个用于测验JavaScript非常有效的工具： Web终端和Scratchpad。</p> + +<h3 id="Web终端">Web终端</h3> + +<p><a href="/en-US/docs/Tools/Web_Console">web终端</a>会显示有关当前装载网页的信息，并且还包含<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#The_command_line_interpreter">命令行</a>，您可以用它在当前的网页中执行 JavaScript 语句。</p> + +<p>要打开 web 终端，请在 Firefox 中的“工具”菜单中选择 “Web Developer“ 中的 "Web Console"。它显示在浏览器窗口的底部。在终端的底部是一个命令行，你可以输入 JavaScript, 而在上面的面板中可以看到输出。</p> + +<p><img alt="Image:ErrorConsole.png" class="internal" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="height: 589px; width: 878px;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>Web Console 在执行 JavaScript 的单个命令行时是非常好的，但是在执行多行命令时就没那么方便了，而且你也不可能在 Web Console 中保存你的代码。因此对于更复杂的例子， <a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a> 是一个更好的工具。</p> + +<p> </p> + +<p>要打开 Scratchpad, 可以在 "Web Developer" 菜单下选择 "Scratchpad" , 它在 Firefox 中也位于 "Tools" 菜单下。它是一个单独的窗口以及编辑器，你可以使用它来写和执行浏览器中的代码。你也同样可以将脚本保存在硬盘，并且从硬盘装载。</p> + +<p>如果你选择了 "Inspect", pad 中的代码会在浏览器中执行，其结果也会以 comment 的形式插入到 pad 中： </p> + +<p><img src="https://mdn.mozillademos.org/files/7365/scratchpad.png"></p> + +<h2 id="文档约定">文档约定</h2> + +<p>JavaScript 应用可以运行在许多操作系统之上；本书中所给出的信息适用于所有这些系统。文件和目录的路径将以 Windows 的形式给出（反斜线用于分隔目录名）。对于 Unix 系统，目录的路径是相同的，只是将反斜线换成斜线即可。</p> + +<p>本指南使用如下形式的统一资源定位符（URL）：</p> + +<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> + +<p>在这些 URL 中，<em>server</em> 表示您的应用所运行的服务器的名称，比如 <code>research1</code> 或者 <code>www</code>；<em>domain</em> 表示您的互联网域名，比如 <code>netscape.com</code> 或者 <code>uiuc.edu</code>； <em>path</em> 表示在服务器中的目录结构；而 <em>file</em><code>.html</code> 则表示特定的文件名。一般来讲，URL 中的斜体部分为占位符，而其中的等宽字体则为原文。如果您的服务器启用了安全套接字层（SSL），则需要将 URL 中的 <code>http</code> 换成 <code>https。</code></p> + +<p>本指南使用如下字体约定：</p> + +<ul> + <li>等宽字体用于示例代码，代码罗列，API 以及语言元素（比如方法名或者属性名），文件名，路径名，目录名，HTML 标签，以及其它任何必需键入到屏幕中的文本。（等宽斜体字用于代码中的占位符）</li> + <li><em>斜体字</em> 用于本书的标题，强调，变量和占位符以及其它直接字面上的词汇。</li> + <li><strong>粗体</strong> 用于词汇表。</li> +</ul> + +<div>{{ PreviousNext("JavaScript/Guide", "JavaScript/Guide/JavaScript_Overview") }}</div> diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html new file mode 100644 index 0000000000..31077692d4 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html @@ -0,0 +1,137 @@ +--- +title: JavaScript 概述 +slug: conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b +tags: + - ECMAScript +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/JavaScript_Overview +original_slug: Web/JavaScript/Guide/JavaScript_Overview +--- +<p>本节将介绍并讨论 JavaScript 的基本概念。</p> + +<h2 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">什么是 JavaScript？</h2> + +<p>JavaScript 是一种跨平台，面向对象的脚本语言。作为一种小巧且轻量级的语言，JavaScript 无意于独立运行，而是被设计为可以轻易嵌入到其它的产品和应用中，比如 Web 浏览器。在宿主环境中，JavaScript 可以被连接到环境中的对象之上，以提供对其的编程控制。</p> + +<p>核心的 JavaScript 中包含有一组核心的对象，包括 <code>Array，</code><code>Date</code> 和 <code>Math</code>，以及一组核心的语言要素，包括操作符，控制结构和语句。出于多种目的，可以通过为其增补附加的对象，对核心 JavaScript 加以扩展；例如：</p> + +<ul> + <li><em>客户端 JavaScript</em> 提供了用于控制浏览器（Navigator 或者其它浏览器）以及其中的文档对象模型（DOM）的对象，从而扩展了核心 JavaScript。例如，客户端扩展允许应用程序在 HTML 的表单中加入元素，以便响应用户事件，比如鼠标点击，表单输入和页面导航。</li> + <li><em>服务器端 JavaScript</em> 提供了服务于在服务器上运行 JavaScript 的对象，从而扩展了核心 JavaScript。例如，服务器端扩展可以允许应用程序访问关系型数据库，在应用程序的不同调用间提供信息的连续性，甚至于处理服务器之上的文件。</li> +</ul> + +<p>借由 JavaScript 的 LiveConnect 功能，您可以让 Java 和 JavaScript 间实现通讯。从 JavaScript 中，您可以创建 Java 对象并访问它们的公共方法和域。从 Java 中，也可以访问 JavaScript 的对象，属性和方法。</p> + +<p>Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。</p> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 和 Java</h2> + +<p>JavaScript 和 Java 虽然在某些方面相似，但在另外一些方面确有着本质的不同。JavaScript 语言类似于 Java 语言，但是没有 Java 的类型静态化和强类型检查。JavaScript 大部分的表达式语法，命名规范以及基本的控制流构成都和 Java 相同。正是由于这个原因，JavaScript 才从 LiveScript 改名得来。</p> + +<p>不同于 Java 的通过声明而形成的编译时的类系统，JavaScript 支持基于少量数据类型的运行时系统，这些数据类型用以表示数值、布尔值和字符串。JavaScript 使用基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的对象模型提供了动态的继承能力，实际上，究竟什么得到继承，对于每个对象都可能不同。JavaScript 还支持无需任何特殊的声明要求的函数。函数可以作为对象的属性，当成松散类型方法（loosely typed method）来执行。</p> + +<p>相比 Java 而言，JavaScript 是一种格式相当自由的语言。无需声明所有的变量，类和方法。无需关心方法是公共的，私有的或者是保护的，也无需实现接口。变量，参数，以及返回值都无需显式的类型声明。</p> + +<p>Java 是基于类的编程语言，目标在于快速的执行和类型安全。这里的类型安全，可以是比如，你不能将 Java 的整数强制转换为对象引用，或者通过篡改 Java 字节码来达到访问私有内存区域的目的。Java 基于类的模型意味着程序完全由类及其方法构成。这些类的继承以及强类型通常需要紧密耦合的对象层级结构。这些需求使得 Java 编程远比 JavaScript 编程要复杂。</p> + +<p>相比之下，JavaScript 的设计理念源于一系列更小巧的动态类型语言，比如 HyperTalk 和 dBASE。这些脚本语言以其更为简单的语法，更专业化的内建功能，以及最小化的对象创建需求，提供了更为大众化的编程工具。</p> + +<table class="standard-table"> + <caption>表 1.1 JavaScript 与 Java 的对比</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>面向对象的。对象的类型间没有区别。继承是基于原型机制实现的，且属性和方法可以动态地添加到任何对象之上。</td> + <td>基于类的。对象被划分为类和实例，且所有的继承是通过类的层级结构实现的。类或者实例不能动态地添加属性或方法。</td> + </tr> + <tr> + <td>变量的数据类型无需声明（动态化类型）。</td> + <td>变量的数据类型必需声明（静态化类型）。</td> + </tr> + <tr> + <td>不能自动地写入硬盘</td> + <td>不能自动地写入硬盘</td> + </tr> + </tbody> +</table> + +<p>有关 JavaScript 和 Java 之间区别的更多信息，参见 <a href="/zh-CN/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">对象模型的细节</a>。</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 和 ECMAScript 规范</h2> + +<p>Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。不过， Netscape 正在与 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — 欧洲信息和通讯标准化协会（ECMA 曾是 European Computer Manufacturers Association，既欧洲计算机制造商协会的缩写）一道致力于交付一个基于核心 JavaScript 的，标准化的，国际化的编程语言，既 ECMAScript。ECMAScript 在所有支持该标准的应用程序中具有相同的特性。其它公司可以使用开放的标准语言来开发它们的 JavaScript 实现。ECMAScript 标准在 ECMA-262 规范中加以记述。</p> + +<p>ECMA-262 标准由 <a class="external" href="http://www.iso.ch/">ISO</a>（International Organization for Standardization，既国际化标准化组织）批准为 ISO-16262。在 Mozilla 网站上可以找到 <a class="external" href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">PDF 版本的 ECMA-262</a> （过时的版本）。在 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International 的网站</a> 上也可以找到该规范。ECMAScript 规范没有描述文档对象模型（DOM）。该模型由 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 完成标准化。DOM 定义了 HTML 文档对象呈现在脚本中的方式。</p> + +<h3 id="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions" name="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions">JavaScript 版本和 ECMAScript 版本之间的关系</h3> + +<p>Netscape 与 Ecma International 的紧密合作形成了 ECMAScript 规范（ECMA-262）。下面的表格描述了 JavaScript 版本和 ECMAScript 版本之间的关系。</p> + +<table class="standard-table"> + <caption>表 1.2 JavaScript 版本和 ECMAScript 版本</caption> + <thead> + <tr> + <th scope="row">JavaScript 版本</th> + <th scope="col">与 ECMAScript 版本的关系</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.1</td> + <td>ECMA-262，第 1 版 基于 JavaScript 1.1.</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>ECMA-262 在 JavaScript 1.2 发布时尚未完成。由于以下原因，JavaScript 1.2 并不与 ECMA-262，第 1 版完全兼容： + <ul> + <li>Netscape 在 JavaScript 1.2 开发了一些新的特性尚未被 ECMA-262 采纳。</li> + <li>ECMA-262 添加了两项新特性：基于 Unicode 的国际化，以及跨平台的一致行为。而 JavaScript 1.2 的某些特性，例如 <code>Date</code> 对象，是依赖于平台的，且具有特定于平台的行为。</li> + </ul> + </td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>JavaScript 1.3 完全兼容于 ECMA-262，第 1 版。<br> + JavaScript 1.3 解决了 JavaScript 1.2 与 ECMA-262 之间的不一致性，同时保留了 JavaScript 1.2 中的附加特性，除了 <code>==</code> 和 <code>!= 被修改以便顺应于</code> ECMA-262 之外。</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td>JavaScript 1.4 完全兼容于 ECMA-262，第 1 版。<br> + ECMAScript 规范的第三版在 JavaScript 1.4 发布时尚未最终完成。</td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>JavaScript 1.5 完全兼容于 ECMA-262，第 3 版。</td> + </tr> + </tbody> +</table> + +<div class="note"><strong>注：</strong>ECMA-262，第 2 版仅包含对第 1 版规范的细微的编辑性的改动和错误修正。由 Ecma International 的 TC39 工作组发布的最新版本为 ECMAScript 版本 5.1</div> + +<p><a href="/en-US/docs/JavaScript/Reference" title="JavaScript/Reference">JavaScript 参考</a> 中标明了语言中的哪些特性兼容于 ECMAScript。</p> + +<p>JavaScript 将总会包含某些 ECMAScript 规范中所没有的特性；JavaScript 兼容于 ECMAScript，同时提供附加特性。</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 文档相较于 ECMAScript 规范</h3> + +<p>ECMAScript 规范了实现 ECMAScript 的一组需求；它有助于您确定某项 JavaScript 特性是否也为其它 ECMAScript 的实现所支持。如果您想编写仅仅使用 ECMAScript 所支持的特性的代码，那么您可能需要参考 ECMAScript 规范。</p> + +<p>ECMAScript 文档的目的不在于帮助脚本程序员；关于脚本编写的信息，请参考 JavaScript 文档。</p> + +<h3 id="JavaScript_and_ECMAScript_Terminology" name="JavaScript_and_ECMAScript_Terminology">JavaScript 和 ECMAScript 术语</h3> + +<p>ECMAScript 规范使用的术语和语法对于 JavaScript 程序员而言，可能会有点陌生。尽管对语言的描述方式在 ECMAScript 中可能不尽相同，但是语言本身还是相同的。JavaScript 支持 ECMAScript 规范中所勾勒出的全部功能。</p> + +<p>JavaScript 文档描述了语言中适合于 JavaScript 程序员的方面。例如：</p> + +<ul> + <li>JavaScript 文档中没有描述全局对象，因为不会直接用到它。全局对象的属性和方法在 JavaScript 文档中被称为顶层函数和属性。</li> + <li>JavaScript 文档中没有讨论 <code>Number</code> 和 <code>String</code> 对象的无参（零个参数）构造器，因为几乎不会用到其生成的对象。无参的 <code>Number</code> 构造器返回 +0，而无参的 <code>String</code> 构造器返回 "" （空的字符串）。</li> +</ul> + +<div>{{ PreviousNext("JavaScript/Guide/About", "JavaScript/Guide/Values,_variables,_and_literals") }}</div> diff --git a/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html b/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html new file mode 100644 index 0000000000..107bb6888f --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html @@ -0,0 +1,8 @@ +--- +title: Boundaries +slug: conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries +original_slug: Web/JavaScript/Guide/Regular_Expressions/Boundaries +--- +<p>重定向至 <a class="redirect" href="/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">断言</a></p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..494ec5dcf7 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,65 @@ +--- +title: ArrayBuffer.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +tags: + - ArrayBuffer +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>ArrayBuffer.prototype</code></strong><code>属性表示</code>{{jsxref("ArrayBuffer")}}对象的原型。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<div> </div> + +<h2 id="描述">描述</h2> + +<p>ArrayBuffer 实例继承自<code>ArrayBuffer.prototype。对所有的构造函数来说，你可以通过改变构造函数的原型对象来改变所有的ArrayBuffer实例。</code></p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>ArrayBuffer.prototype.constructor</dt> + <dd>指定函数，它创建一个对象的原型。其初始值是标准ArrayBuffer内置构造函数。</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>数组的字节大小。在数组创建时确定，并且不可变更。<strong>只读</strong>。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>返回一个新的 <code>ArrayBuffer</code> ，它的内容是这个 <code>ArrayBuffer</code> 的字节副本，从begin（包括），到end（不包括）。如果begin或end是负数，则指的是从数组末尾开始的索引，而不是从头开始。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..eb537d7bc5 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,77 @@ +--- +title: Boolean.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean +tags: + - Boolean + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +<p>{{JSRef}}</p> + +<p><strong><code>Boolean.prototype</code></strong> 属性表示{{jsxref("Boolean")}} 构造函数的原型。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description" style="margin-bottom: 20px; line-height: 30px;">描述</h2> + +<p>{{jsxref("Boolean")}}实例继承自<code>Boolean.prototype</code>。你可以使用构造函数的原型对象向所有{{jsxref("Boolean")}}实例添加属性或方法。</p> + +<h2 id="属性" style="margin-bottom: 20px; line-height: 30px;">属性</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>返回创建了实例原型的函数。默认为{{jsxref("Boolean")}}函数。</dd> +</dl> + +<h2 id="方法" style="margin-bottom: 20px; line-height: 30px;">方法</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>返回包含{{jsxref("Boolean")}}对象源码的字符串；你可以使用这个字符串来创建一个等价的对象。覆盖了{{jsxref("Object.prototype.toSource()")}} 方法。</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>根据对象的值来返回一个字符串：<code>"true"</code> 或 <code>"false"</code>。覆盖了 {{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>返回{{jsxref("Boolean")}}对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> +</dl> + +<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..30e15c989e --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,104 @@ +--- +title: DataView.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/DataView +tags: + - DataView属性 +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>DataView</strong></code><strong><code>.prototype</code></strong> 表示{{jsxref("DataView")}}的原型</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p><code>DataView</code> 的实例从<font face="Consolas, Liberation Mono, Courier, monospace">DataView.prototype</font>继承。就像所有的构造器，你可以修改原型来改变生成的<code>DataView</code>实例。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{jsxref("DataView.prototype.constructor")}}</dt> + <dd>指定用来生成原型的构造函数.初始化值是标准内置DataView构造器.</dd> + <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>被视图引入的{{jsxref("ArrayBuffer")}}.创建实例的时候已固化因此是只读的.</dd> + <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>从 {{jsxref("ArrayBuffer")}}中读取的字节长度. 创建实例的时候已固化因此是只读的.</dd> + <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>从 {{jsxref("ArrayBuffer")}}读取时的偏移字节长度. 创建实例的时候已固化因此是只读的.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<h3 id="读">读</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(一个字节).</dd> + <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(无符号字节).</dd> + <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(短整型).</dd> + <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(无符号短整型).</dd> + <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(长整型).</dd> + <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(无符号长整型).</dd> + <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(浮点型).</dd> + <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个64-bit数(双精度浮点型).</dd> +</dl> + +<h3 id="写">写</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(一个字节).</dd> + <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(无符号字节).</dd> + <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(短整型).</dd> + <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(无符号短整型).</dd> + <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(长整型).</dd> + <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(无符号长整型).</dd> + <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(浮点型).</dd> + <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> + <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个64-bit数(双精度浮点型).</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + + + +<p>{{Compat("javascript.builtins.DataView.prototype")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..4e113936d2 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,182 @@ +--- +title: Date.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.prototype</code></strong> 属性表示{{jsxref("Date")}}构造函数的原型。</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description" name="Description">描述</h2> + +<p>{{jsxref("Date")}}实例继承自<code>Date.prototype</code>。可以通过修改构造函数的原型对象来影响 {{jsxref("Date")}}实例继承的属性和方法。</p> + +<p>为了兼容千禧年计算（也即考虑到 2000 年），应该总是指定完整的年份，例如，使用 1998，而不是 98。为了方便以完整的格式指定年份， JavaScript 包含了相应的方法{{jsxref("Global_Objects/Date/getFullYear", "getFullYear()")}}，{{jsxref("Global_Objects/Date/setFullYear", "setFullYear()")}}， {{jsxref("Global_Objects/Date/getUTCFullYear", "getUTCFullYear()")}} 和{{jsxref("Global_Objects/Date/setUTCFullYear", "setUTCFullYear()")}}。</p> + +<p>从 ECMAScript 6 开始，<code>Date.prototype</code>本身就是一个普通的对象。不是{{jsxref("Date")}}的实例。</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt><code>Date.prototype.constructor</code></dt> + <dd>返回创建该实例的函数。默认是<code>Date</code>构造函数。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<h3 id="Getter">Getter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>根据本地时间返回指定日期对象的月份中的第几天（1-31）。</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>根据本地时间返回指定日期对象的星期中的第几天（0-6）。</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）。</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>根据本地时间返回指定日期对象的小时（0-23）。</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>根据本地时间返回指定日期对象的毫秒（0-999）。</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>根据本地时间返回指定日期对象的分钟（0-59）。</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>根据本地时间返回指定日期对象的月份（0-11）。</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>根据本地时间返回指定日期对象的秒数（0-59）。</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>返回从1970-1-1 00:00:00 UTC（协调世界时）到该日期经过的毫秒数，对于1970-1-1 00:00:00 UTC之前的时间返回负值。</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>返回当前时区的时区偏移。</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>根据世界时返回特定日期对象一个月的第几天（1-31）.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>根据世界时返回特定日期对象一个星期的第几天（0-6）.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>根据世界时返回特定日期对象所在的年份（4位数）.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>根据世界时返回特定日期对象当前的小时（0-23）.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>根据世界时返回特定日期对象的毫秒数（0-999）.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>根据世界时返回特定日期对象的分钟数（0-59）.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>根据世界时返回特定日期对象的月份（0-11）.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>根据世界时返回特定日期对象的秒数（0-59）.</dd> + <dt>{{jsxref("Date.prototype.getYear()")}}{{deprecated_inline}}</dt> + <dd>根据特定日期返回年份 (通常 2-3 位数). 使用 {{jsxref("Global_Objects/Date/getFullYear", "getFullYear()")}} .</dd> +</dl> + +<h3 id="Setter">Setter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>根据本地时间为指定的日期对象设置月份中的第几天。</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>根据本地时间为指定日期对象设置完整年份（四位数年份是四个数字）。</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>根据本地时间为指定日期对象设置小时数。</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>根据本地时间为指定日期对象设置毫秒数。</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>根据本地时间为指定日期对象设置分钟数。</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>根据本地时间为指定日期对象设置月份。</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>根据本地时间为指定日期对象设置秒数。</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间，对于早于 1970-1-1 00:00:00 UTC的时间可使用负值。</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>根据世界时设置 Date 对象中的年份（四位数字）。</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>根据世界时设置 Date 对象中的小时 (0 ~ 23)。</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>根据世界时设置 Date 对象中的分钟 (0 ~ 59)。</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>根据世界时设置 Date 对象中的月份 (0 ~ 11)。</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> + <dd>setYear() 方法用于设置年份。请使用 {{jsxref("Global_Objects/Date/setFullYear", "setFullYear()")}} 方法代替。</dd> +</dl> + +<h3 id="Conversion_getter">Conversion getter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>以人类易读（human-readable）的形式返回该日期对象日期部分的字符串。</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>把一个日期转换为符合 ISO 8601 扩展格式的字符串。</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>使用 {{jsxref("Global_Objects/Date/toISOString", "toISOString()")}} 返回一个表示该日期的字符串。为了在 {{jsxref("JSON.stringify()")}} 方法中使用。</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> + <dd>返回一个基于 GMT (UT) 时区的字符串来表示该日期。请使用 {{jsxref("Global_Objects/Date/toUTCString", "toUTCString()")}} 方法代替。</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>返回一个表示该日期对象日期部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）。</dd> + <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> + <dd>使用格式字符串将日期转换为字符串。</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>返回一个表示该日期对象的字符串，该字符串与系统设置的地区关联（locality sensitive）。覆盖了 {{jsxref("Global_Objects/Object/toLocaleString", "Object.prototype.toLocaleString()")}} 方法。</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>返回一个表示该日期对象时间部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）。</dd> + <dt>{{jsxref("Date.prototype.toSource()")}}{{non-standard_inline}}</dt> + <dd>返回一个与{{jsxref("Date")}}等价的原始字符串对象，你可以使用这个值去生成一个新的对象。重写了 {{jsxref("Object.prototype.toSource()")}} 这个方法。</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>返回一个表示该日期对象的字符串。覆盖了{{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>以人类易读格式返回日期对象时间部分的字符串。</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>把一个日期对象转换为一个以UTC时区计时的字符串。</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>返回一个日期对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..86c93dcc85 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,163 @@ +--- +title: Error.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - Property + - 参考 + - 属性 +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +<div> +<p>{{JSRef}}</p> + +<p><code><strong>Error.prototype</strong></code> 属性代表 {{jsxref("Error")}} 的构造器。</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> +</div> + +<h2 id="Description" name="Description">描述</h2> + +<p>所有 {{jsxref("Global_Objects/Error", "Error")}} 与 {{jsxref("Global_Objects/Error", "非标准Error", "#Error_types", 1)}} 的实例都继承自 <code>Error.prototype。同所有构造器函数一样，你可以在构造器的 </code>prototype 上添加属性或者方法，使其在所有该构造器的实例上生效。</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<h3 id="Standard_properties" name="Standard_properties">标准属性</h3> + +<dl> + <dt><code>Error.prototype.constructor</code></dt> + <dd>实例原型的构造函数。</dd> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>错误信息。</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>错误名。</dd> +</dl> + +<h3 id="Vendor-specific_extensions" name="Vendor-specific_extensions">厂商特定扩展属性</h3> + +<div>{{non-standard_header}}</div> + +<h4 id="Microsoft" name="Microsoft">Microsoft</h4> + +<dl> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>错误描述，与 {{jsxref("Error.prototype.message", "message")}} 相似。</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>错误码。</dd> +</dl> + +<h4 id="Mozilla" name="Mozilla">Mozilla</h4> + +<dl> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>产生该错误的文件名。</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>产生该错误的行号。</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>产生该错误的列号。</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>错误堆栈。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>返回一个包含特定 {{jsxref("Error")}} 对象的源代码字符串，你可以用该值新建一个新的对象，重写自 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>返回一个表示该对象的字符串，重写自 {{jsxref("Object.prototype.toString()")}} 方法。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范版本</th> + <th scope="col">状态</th> + <th scope="col">注解</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..7fe73a4749 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,86 @@ +--- +title: EvalError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>EvalError.prototype</strong></code> 属性是 {{jsxref("EvalError")}} 原型构造函数.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>{{jsxref("EvalError")}} 全部实例都继承自<code>EvalError.prototype</code>. 你可以通过prototype去添加方法和属性.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>EvalError.prototype.constructor</code></dt> + <dd>指定创建实例原型的函数.</dd> + <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> + <dd>错误信息. 从 ECMA-262 开始 {{jsxref("EvalError")}} 提供 <code>message</code> （继承自{{jsxref("Error.prototype.message")}}）属性, 详见 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</dd> + <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> + <dd>错误名称.继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> + <dd>引发错误的文件路径. 继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> + <dd>引发错误所在行.继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> + <dd>引发错误所在的列. 继承自{{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> + <dd>堆栈.继承自 {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>虽然 {{jsxref("EvalError")}} 自己的属性方法较少, 但是通过原型链继承了很多有用的方法.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>初代.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>定义为<code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>定义为<code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>定义为<code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.EvalError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..b2d20b8cbd --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,140 @@ +--- +title: Function.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function +tags: + - JavaScript + - 函数 + - 原型 + - 原型属性 +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Function.prototype</strong></code> 属性存储了 {{jsxref("Function")}} 的原型对象。</p> + +<h2 id="Description" name="Description">描述</h2> + +<p>{{jsxref("Function")}}<code>对象继承自 Function.prototype 属性</code><code>。因此，Function.prototype</code> 不能被修改。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline()}}</dt> + <dd>以数组形式获取传入函数的所有参数。此属性已被{{jsxref("Functions_and_function_scope/arguments", "arguments")}}替代。</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline() }}</s></dt> + <dd><s class="obsoleteElement">用于指定的函数的参数的个数，但已被删除。使用{{jsxref("Function.length","length")}}属性代替。</s></dd> + <dt>{{jsxref("Function.caller")}} {{ Non-standard_inline() }}</dt> + <dd>获取调用函数的具体对象。</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>获取函数的接收参数个数。</dd> + <dt>{{jsxref("Function.name")}} {{ Non-standard_inline() }}</dt> + <dd>获取函数的名称。</dd> + <dt>{{jsxref("Function.displayName")}} {{ Non-standard_inline() }}</dt> + <dd>获取函数的display name。</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>声明函数的原型构造方法，详细请参考 {{jsxref("Object.constructor")}} 。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">bind()</span>方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 <span style="font-family: courier new,andale mono,monospace;">bind()</span>方法的第一个参数作为 <span style="font-family: courier new,andale mono,monospace;">this</span>,传入 <span style="font-family: courier new,andale mono,monospace;">bind()</span>方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>在一个对象的上下文中应用另一个对象的方法；参数能够以列表形式传入。</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{ Non-standard_inline() }}</dt> + <dd><code>若函数对象为</code><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>，返回true，反之返回 <code>false</code>。</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>获取函数的实现源码的字符串。 覆盖了 {{jsxref("Object.prototype.toSource")}} 方法。</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>获取函数的实现源码的字符串。覆盖了 {{jsxref("Object.prototype.toString")}} 方法。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..b7f4c019f3 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,66 @@ +--- +title: GeneratorFunction.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction +tags: + - ECMAScript 2015 + - GeneratorFunction + - Iterator + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>GeneratorFunction.prototype</strong></code>属性是{{jsxref("GeneratorFunction")}}的原型对象。</p> + +<h2 id="Description" name="Description">描述</h2> + +<p>{{jsxref("GeneratorFunction")}} 的实例对象都继承于 <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> 不能被修改。</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> + <dd>初始值是 {{jsxref("GeneratorFunction")}}.</dd> + <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> + <dd>值是 <code>%GeneratorPrototype%</code>.</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..9608a00425 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,121 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.DateTimeFormat.prototype</code></strong>表示 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}构造函数的原型对象。</p> + +<p>{{js_property_attributes(0, 0, 0)}} </p> + +<h2 id="描述">描述</h2> + +<p>参见 {{jsxref("DateTimeFormat")}}来看<code>Intl.DateTimeFormat实例的一个描述。</code></p> + +<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 实例继承自<code>Intl.DateTimeFormat.prototype</code>. 对原型对象的修改都继承自{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}实例。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> + <dd>请参考 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</dd> + <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt> + <dd>Getter; 返回一个{{jsxref("DateTimeFormat", "DateTimeFormat")}}对象的根据locale和格式化参数格式化日期的函数。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> + <dd>Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.</dd> + <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>返回一个新的属性对象，反射出在对象初始化过程中计算出的locale和options的各个值。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范版本</th> + <th scope="col">规范状态</th> + <th scope="col">注解</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("24")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("26")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..c05822ebf3 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,132 @@ +--- +title: Map.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> 属性表示 {{jsxref("Map")}}构造函数的原型对象。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p>{{jsxref("Map")}} 实例继承自{{jsxref("Map.prototype")}}。你可以使用这个构造函数的原型对象来给所有的Map实例添加属性或者方法。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>返回一个函数，它创建了实例的原型。默认是{{jsxref("Map")}}函数。</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd>返回Map对象的键/值对的数量。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>移除Map对象的所有键/值对 。</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> + <dd>如果 <code>Map</code> 对象中存在该元素，则移除它并返回<em> <code>true</code></em>；否则如果该元素不存在则返回 <code><em>false</em></code>。随后调用 <code>Map.prototype.has(key)</code> 将返回 <code>false</code> 。</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>返回一个新的 <code>Iterator</code> 对象，它按插入顺序包含了Map对象中每个元素的 <strong><code>[key, value]</code></strong> <code><strong>数组</strong></code>。</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>按插入顺序，为 <code>Map</code>对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> + <dd>返回键对应的值，如果不存在，则返回undefined。</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd>返回一个布尔值，表示Map实例是否包含键对应的值。</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd>返回一个新的 <code>Iterator</code>对象， 它按插入顺序包含了Map对象中每个元素的<strong>键 </strong>。</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd>设置Map对象中键的值。返回该Map对象。</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd>返回一个新的<code>Iterator</code>对象，它按插入顺序包含了Map对象中每个元素的<strong>值</strong> 。</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>返回一个新的<code>Iterator</code>对象，它按插入顺序包含了Map对象中每个元素的 <strong><code>[key, value]</code></strong> <code><strong>数组</strong></code>。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> + <p>8</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..883a45707c --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,133 @@ +--- +title: Number.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +<div> + {{JSRef("Global_Objects", "Number")}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><strong><code>Number.prototype</code></strong> 属性表示 {{jsxref("Global_Objects/Number", "Number")}} 构造函数的原型。</p> +<div> + {{js_property_attributes(0,0,0)}}</div> +<h2 id="Description" name="Description">描述</h2> +<p>所有 <code>Number</code> 实例都继承自 <code>Number.prototype</code>。修改 {{jsxref("Global_Objects/Number", "Number")}} 构造函数的原型对象会影响到所有 <code>Number</code> 实例。.</p> +<h2 id="属性">属性</h2> +<dl> + <dt> + constructor</dt> + <dd> + 返回创建该实例对象的构造函数。默认为 {{jsxref("Global_Objects/Number", "Number")}} 对象。</dd> +</dl> +<div> + {{ jsOverrides("Object", "properties", "constructor") }}</div> +<h2 id="方法">方法</h2> +<dl> + <dt> + {{jsxref("Number.prototype.toExponential()")}}</dt> + <dd> + 返回一个使用指数表示法表示的该数值的字符串表示。</dd> + <dt> + {{jsxref("Number.prototype.toFixed()")}}</dt> + <dd> + 返回一个使用定点表示法表示的该数值的字符串表示。</dd> + <dt> + {{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd> + 返回一个与语言相关的该数值对象的字符串表示。覆盖了{{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> + <dt> + {{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd> + 使用定点表示法或指数表示法来表示的指定显示位数的该数值对象的字符串表示。</dd> + <dt> + {{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd> + Returns an object literal representing the specified Number object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt> + {{jsxref("Number.prototype.toString()")}}</dt> + <dd> + 返回一个表示该数值对象的字符串。覆盖了 {{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt> + {{jsxref("Number.prototype.valueOf()")}}</dt> + <dd> + 返回该数值对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> +</dl> +<div> + {{ jsOverrides("Object", "methods", "toExponential", "toFixed", "toLocaleString", "toPrecision", "toSource", "toString", "valueOf") }}</div> +<div> + </div> +<h2 id="规范">规范</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范版本</th> + <th scope="col">规范状态</th> + <th scope="col">注解</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..3d5f00217e --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,196 @@ +--- +title: Object.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object +tags: + - JavaScript + - Object + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.prototype</strong></code> 属性表示 {{jsxref("Object")}} 的原型对象。</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description" name="Description">描述</h2> + +<p>几乎所有的 JavaScript 对象都是 {{jsxref("Object")}} 的实例；一个典型的对象继承了<code>Object.prototype</code>的属性（包括方法），尽管这些属性可能被遮蔽（亦称为覆盖）。但是有时候可能故意创建不具有典型原型链继承的对象，比如通过{{jsxref("Object.create", "Object.create(null)")}}创建的对象，或者通过{{jsxref("Object.setPrototypeOf")}}方法改变原型链。</p> + +<p>改变<code>Object</code>原型，会通过原型链改变<strong>所有</strong>对象；除非在原型链中进一步覆盖受这些变化影响的属性和方法。这提供了一个非常强大的、但有潜在危险的机制来覆盖或扩展对象行为。</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>特定的函数，用于创建一个对象的原型。</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>指向当对象被实例化的时候，用作原型的对象。</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>当未定义的对象成员被调用作方法的时候，允许定义并执行的函数。</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">用于直接返回用户定义的对象中可数的属性的数量。已被废除。</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">用于指向对象的内容。已被废除。</s></dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>关联一个函数到一个属性。访问该函数时，执行该函数并返回其返回值。</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>关联一个函数到一个属性。设置该函数时，执行该修改属性的函数。</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>返回使用 {{jsxref("Object.defineGetter", "__defineGetter__")}} 定义的方法函数 。</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>返回使用 {{jsxref("Object.defineSetter", "__defineSetter__")}} 定义的方法函数。</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>返回一个布尔值 ，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>返回一个布尔值，表示指定的对象是否在本对象的原型链中。</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>判断指定属性是否可枚举，内部属性设置参见 <a href="/zh-CN/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a> 。</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>返回字符串表示此对象的源代码形式，可以使用此字符串生成一个新的相同的对象。</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>直接调用 {{jsxref("Object.toString", "toString()")}}方法。</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>返回对象的字符串表示。</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>移除对象某个属性的监听。</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>返回指定对象的原始值。</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>给对象的某个属性增加监听。</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">在指定对象为上下文情况下执行javascript字符串代码，已经废弃。</s></dd> +</dl> + +<h2 id="Examples" name="Examples">示例</h2> + +<p>当改变现有的 Object.prototype method(方法)的行为时，考虑在现有逻辑之前或之后通过封装你的扩展来注入代码。例如,此(未测试的)代码将在内置逻辑或其他人的扩展执行之前 pre-conditionally（预条件地）执行自定义逻辑。</p> + +<p>当一个函数被调用时,调用的参数被保留在类似数组 "变量" 的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">参数</a>中。例如, 在调用 "myFn (a、b、c)"时, 在myFn 的主体内的参数将包含 3个类似数组的元素对应于 (a、b、c)。 使用钩子修改原型时,只需通过调用该函数的 apply ()，将 this 与参数 (调用状态) 传递给当前行为。这种模式可以用于任何原型，如 Node.prototype、 Function.prototype 等.</p> + +<pre class="brush: js">var current = Object.prototype.valueOf; + +// 由于我的属性 "-prop-value"是交叉性的, 并不总是 +// 在同一个原型链上，我想要修改 Object.prototype: +Object.prototype.valueOf = function() { + if (this.hasOwnProperty('-prop-value')) { + return this['-prop-value']; + } else { + // <code>它看起来不像我的对象之一，因此，让我们退回到</code> + // <code>默认行为，通过尽可能地复制当前行为来实现.</code> + // <code>此apply的行为类似于其他语言中的"super"</code>. + // <code>即使 valueOf() 不带参数, 其他的钩子可能会带有.</code> + return current.apply(this, arguments); + } +}</pre> + +<p>由于 JavaScript 并不完全具有子类对象, 所以原型是一种有用的变通方法, 可以使用某些函数的 "基类" 对象来充当对象。例如:</p> + +<pre class="brush: js">var Person = function(name) { + this.name = name; + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this, name); + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this, name); +}; + +Customer.prototype = Object.create(Person.prototype); + +var Mime = function(name) { + Person.call(this, name); + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet(); +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Object.prototype")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..034a88bd0c --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,117 @@ +--- +title: Promise.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +<div>{{JSRef("Global_Objects", "Promise")}}</div> + +<h2 id="Summary" name="Summary">总结</h2> + +<p><code><strong>Promise</strong></code><strong><code>.prototype</code></strong> 属性表示 {{jsxref("Promise")}} 构造器的原型.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">描述</h2> + +<p>{{jsxref("Promise")}} 实例继承自 {{jsxref("Promise.prototype")}}. 你可以在构造器的原型对象添加属性或方法到所有 <code>Promise</code> 实例上.</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>返回被创建的实例函数. 默认为 {{jsxref("Promise")}} 函数.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> + <dd>添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的完成结果作为新promise的完成结果.</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> + <dd>添加解决(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise, 将以回调的返回值来resolve.</dd> + <dt>{{jsxref("Promise.finally", "Promise.prototype.finally(onFinally)")}}</dt> + <dd>添加一个事件处理回调于当前promise对象，并且在原promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected)</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>32</td> + <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> + {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoDesktop(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> + {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoMobile(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html new file mode 100644 index 0000000000..ccc2299f1e --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -0,0 +1,78 @@ +--- +title: Proxy handler +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +tags: + - ECMAScript 2015 + - JavaScript + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +--- +<div>{{JSRef}}</div> + +<div>Proxy 的 handler 对象是一个占位符对象，它包含了用于 {{jsxref("Proxy")}} 的陷阱（Trap）函数。</div> + +<div>此处可以理解为由Proxy所暴露出的钩子函数，handler作为挂载钩子函数的对象存在，不同的操作会触发不同的钩子函数</div> + +<div>，handler提供了覆写钩子函数的方法。</div> + +<h2 id="方法">方法</h2> + +<p>所有的陷阱是可选的。如果某个陷阱没有定义，那么就会保留默认行为。</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>在读取代理对象的原型时触发该操作，比如在执行 <code>{{jsxref("Object.getPrototypeOf")}}(proxy)</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>在设置代理对象的原型时触发该操作，比如在执行 <code>{{jsxref("Object.setPrototypeOf")}}(proxy, null)</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> + <dd>在判断一个代理对象是否是可扩展时触发该操作，比如在执行 <code>{{jsxref("Object.isExtensible")}}(proxy)</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>在让一个代理对象不可扩展时触发该操作，比如在执行 <code>{{jsxref("Object.preventExtensions")}}(proxy)</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>在获取代理对象某个属性的属性描述时触发该操作，比如在执行 <code>{{jsxref("Object.getOwnPropertyDescriptor")}}(proxy, "foo")</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> + <dd>在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 <code>{{jsxref("Object.defineProperty")}}(proxy, "foo", {})</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> + <dd>在判断代理对象是否拥有某个属性时触发该操作，比如在执行 <code>"foo" {{jsxref("Operators/in", "in")}} proxy</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> + <dd>在读取代理对象的某个属性时触发该操作，比如在执行 <code>proxy.foo</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> + <dd>在给代理对象的某个属性赋值时触发该操作，比如在执行 <code>proxy.foo = 1</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>在删除代理对象的某个属性时触发该操作，即使用 {{jsxref("Operators/delete", "delete")}} 运算符，比如在执行 <code>delete proxy.foo</code> 时。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> + <dd>{{jsxref("Object.getOwnPropertyNames")}} 和{{jsxref("Object.getOwnPropertySymbols")}} 的陷阱。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> + <dd>函数调用操作的陷阱。</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> + <dd>{{jsxref("Operators/new", "new")}} 运算符的陷阱。</dd> +</dl> + +<p>一些不标准的陷阱已经<a href="/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">废弃并且被移除了</a></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{JSxRef("Proxy")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..efe5781a05 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,90 @@ +--- +title: RangeError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +--- +<div>{{JSRef}}</div> + +<div> </div> + +<div><code><strong>RangeError.prototype</strong></code> 属性表示 {{jsxref("RangeError")}} 构造函数的原型。</div> + +<div> </div> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="描述">描述</h2> + +<p>所有 {{jsxref("RangeError")}} 的实例都继承自 <code>RangeError.prototype</code> ，所以你可以使用这个属性来为所有的实例添加属性或方法。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>RangeError.prototype.constructor</code></dt> + <dd>指定了创建实例原型的函数</dd> + <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> + <dd>错误信息。尽管 ECMA-262 规定了 {{jsxref("RangeError")}} 应该拥有一个 <code>message</code> 属性，但在 <a href="/zh-CN/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}。</dd> + <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> + <dd>错误名字，继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> + <dd>引起该错误的文件路径，继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> + <dd>引起该错误的行号，继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> + <dd>引起该错误的列号，继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> + <dd>堆栈跟踪记录，继承自 {{jsxref("Error")}}。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>尽管 {{jsxref("RangeError")}} 原型对象自身没有包含任何方法，但是 {{jsxref("RangeError")}} 实例却通过原型链继承到了一些方法。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RangeError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..09306f2862 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,94 @@ +--- +title: ReferenceError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError +tags: + - Error + - JavaScript + - Property + - Prototype + - ReferenceError +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>ReferenceError.prototype</strong></code> 表示 {{jsxref("ReferenceError")}} 的原型构造器。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="描述">描述</h2> + +<p>所有{{jsxref("ReferenceError")}} 实例都继承自 <code>ReferenceError.prototype</code>. 你可以使用原型来为所有实例添加属性和方法。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>ReferenceError.prototype.constructor</code></dt> + <dd>创建一个实例原型的函数。</dd> + <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> + <dd>错误信息。尽管ECMA-262 曾表示 {{jsxref("ReferenceError")}} 应该提供自己的 <code>message</code> 属性, 在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中, 它继承自{{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> + <dd>错误名称. 继承自{{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> + <dd>出现这个错误的路径. 继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> + <dd>出现这个错误的行号. 继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> + <dd>出现这个错误的列号. 继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> + <dd>堆栈追踪. 继承自 {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>尽管 {{jsxref("ReferenceError")}} 原型对象自身没有包括任何方法, {{jsxref("ReferenceError")}} 实例确实从原型链中继承了一些方法。</p> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格版本</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Defined as <code><em>NativeError</em>.prototype</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("javascript.builtins.ReferenceError")}}</p> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..740b32604b --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,154 @@ +--- +title: RegExp.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RegExp +tags: + - JavaScript + - Property + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +--- +<p>{{JSRef("Global_Objects", "RegExp")}}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p><font face="Courier New, Andale Mono, monospace">RegExp.prototype 属性表示 </font><span style="line-height: 1.5;">{{jsxref("Global_Objects/RegExp", "RegExp")}} </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">构造函数的原型对象。</span></p> +<h2 id="Description" name="Description">描述</h2> +<p>查看<font face="Courier New, Andale Mono, monospace"> </font><span style="line-height: 1.5;">{{jsxref("Global_Objects/RegExp", "RegExp")}} </span><span style="line-height: 1.5;">了解更多关于 </span><code style="font-style: normal; line-height: 1.5;">RegExp</code> <code style="font-style: normal; line-height: 1.5;">实例的说明。</code></p> +<p><code>RegExp</code> 实例继承 <code>RegExp.prototype</code>。修改该原型对象上的属性或方法会影响到所有的 <code>RegExp</code> <code>实例。</code></p> +<h2 id="Properties" name="Properties">属性</h2> +<p>查看<a href="/zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Properties" title="zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Properties">已废弃的RegExp属性</a></p> +<p>注意，<code>RegExp</code> 对象的几个属性既有完整的长属性名，也有对应的类 Perl 的短属性名。两个属性都有着同样的值。JavaScript 的正则语法就是基于 Perl 的。</p> +<dl> + <dt> + <code style="font-style: normal; font-weight: bold;">RegExp.prototype.</code><code style="font-style: normal; font-weight: bold;">constructor</code></dt> + <dd> + 创建该正则对象的构造函数。</dd> + <dt> + {{jsxref("RegExp.prototype.global")}}</dt> + <dd> + 是否开启全局匹配，也就是匹配目标字符串中所有可能的匹配项，而不是只进行第一次匹配。</dd> + <dt> + {{jsxref("RegExp.prototype.ignoreCase")}}</dt> + <dd> + 在匹配字符串时是否要忽略字符的大小写。</dd> + <dt> + {{jsxref("RegExp.prototype.lastIndex")}}</dt> + <dd> + 下次匹配开始的字符串索引位置。</dd> + <dt> + {{jsxref("RegExp.prototype.multiline")}}</dt> + <dd> + 是否开启多行模式匹配（影响 ^ 和 $ 的行为）。</dd> + <dt> + {{jsxref("RegExp.prototype.source")}}</dt> + <dd> + 正则对象的源模式文本。</dd> + <dt> + {{jsxref("RegExp.prototype.sticky")}} {{experimental_inline}}</dt> + <dd> + 是否开启粘滞匹配。</dd> +</dl> +<div> + {{ jsOverrides("Object", "properties", "constructor", "global", "ignoreCase", "lastIndex", "multiline", "source", "sticky") }}</div> +<h2 id="Methods" name="Methods">方法</h2> +<p>查看<a href="/zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Methods" title="zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Methods">已废弃的RegExp方法</a></p> +<dl> + <dt> + {{jsxref("RegExp.prototype.exec()")}}</dt> + <dd> + 在目标字符串中执行一次正则匹配操作。</dd> + <dt> + {{jsxref("RegExp.prototype.test()")}}</dt> + <dd> + 测试当前正则是否能匹配目标字符串。</dd> + <dt> + {{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd> + 返回一个字符串，其值为该正则对象的字面量形式。覆盖了<code>Object.prototype.toSource</code> 方法.</dd> + <dt> + {{jsxref("RegExp.prototype.toString()")}}</dt> + <dd> + 返回一个字符串，其值为该正则对象的字面量形式。覆盖了{{jsxref("Object.prototype.toString()")}} 方法。</dd> +</dl> +<div> + {{ jsOverrides("Object", "Methods", "exec", "test", "toSource", "toString") }}</div> +<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容性</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2> +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> +<p> </p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..41da127b42 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,64 @@ +--- +title: SharedArrayBuffer.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +tags: + - Prototype + - SharedArrayBuffer +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>SharedArrayBuffer.prototype</code></strong> 属性表示 {{jsxref("SharedArrayBuffer")}} 对象的原型。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p><code>SharedArrayBuffer</code>实例继承自<code>SharedArrayBuffer.prototype</code>。 与所有构造函数一样，您可以更改构造函数的原型对象以对所有<code>SharedArrayBuffer</code>实例进行更改。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>SharedArrayBuffer.prototype.constructor</dt> + <dd>指定创建对象原型的函数。 初始值为标准的内置<code>SharedArrayBuffer</code>构造函数。</dd> + <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>数组的大小（以字节为单位）。 这是在数组初始化时建立的，并且无法被更改。<strong> 只读</strong>。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt> + <dd>返回一个新的<code>SharedArrayBuffer</code>，其内容是此<code>SharedArrayBuffer</code>字节从<code>beigin</code>开始（包括<code>begin</code>）到<code>end</code>结束（不包括<code>end</code>）的副本。 如果<code>begin</code>或<code>end</code>为负，则它是指数组末尾的索引，而不是开头的索引。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..567c248d41 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,188 @@ +--- +title: String.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String +tags: + - JavaScript + - 原型 + - 参考 + - 字符串 + - 属性 +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +<div>{{JSRef}}</div> + +<p> <code><strong>String.prototype</strong></code> 属性表示 {{jsxref("String")}}原型对象。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">描述</h2> + +<p>所有 {{jsxref("String")}} 的实例都继承自 <code>String.prototype</code>. 任何String.prototype上的改变都会影响到所有的 {{jsxref("String")}} <code>实例。</code></p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>用于创造对象的原型对象的特定的函数。</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>返回了字符串的长度。</dd> + <dt><em>N</em></dt> + <dd>用于访问第N个位置的字符，其中N是小于 {{jsxref("String.length", "length")}} 和 0之间的正整数。这些属性都是“只读”性质，不能编辑。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">跟HTML无关的方法</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>返回特定位置的字符。</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>返回表示给定索引的字符的Unicode的值。</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> + <dd>返回使用UTF-16编码的给定位置的值的非负整数。</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>连接两个字符串文本，并返回一个新的字符串。</dd> + <dt>{{jsxref("String.prototype.includes()")}}</dt> + <dd>判断一个字符串里是否包含其他字符串。</dd> + <dt>{{jsxref("String.prototype.endsWith()")}}</dt> + <dd>判断一个字符串的是否以给定字符串结尾，结果返回布尔值。</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>从字符串对象中返回首个被发现的给定值的索引值，如果没有找到则返回-1。</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>从字符串对象中返回最后一个被发现的给定值的索引值，如果没有找到则返回-1。</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>返回一个数字表示是否引用字符串在排序中位于比较字符串的前面，后面，或者二者相同。</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>使用正则表达式与字符串相比较。</dd> + <dt>{{jsxref("String.prototype.normalize()")}}</dt> + <dd>返回调用字符串值的Unicode标准化形式。</dd> + <dt>{{jsxref("String.prototype.padEnd()")}}</dt> + <dd>在当前字符串尾部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串。</dd> + <dt>{{jsxref("String.prototype.padStart()")}}</dt> + <dd> + <p>在当前字符串头部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串。</p> + </dd> + <dt>{{jsxref("String.prototype.quote()")}} {{ obsolete_inline }}</dt> + <dd>设置嵌入引用的引号类型。</dd> + <dt>{{jsxref("String.prototype.repeat()")}}</dt> + <dd>返回指定重复次数的由元素组成的字符串对象。</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>被用来在正则表达式和字符串直接比较，然后用新的子串来替换被匹配的子串。</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>对正则表达式和指定字符串进行匹配搜索，返回第一个出现的匹配项的下标。</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>摘取一个字符串区域，返回一个新的字符串。</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>通过分离字符串成字串，将字符串对象分割成字符串数组。</dd> + <dt>{{jsxref("String.prototype.startsWith()")}}</dt> + <dd>判断字符串的起始位置是否匹配其他字符串中的字符。</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>通过指定字符数返回在指定位置开始的字符串中的字符。</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>返回在字符串中指定两个下标之间的字符。</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>根据当前区域设置，将符串中的字符转换成小写。对于大多数语言来说，{{jsxref("String.toLowerCase", "toLowerCase")}}的返回值是一致的。</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>根据当前区域设置，将字符串中的字符转换成大写，对于大多数语言来说，{{jsxref("String.toUpperCase", "toUpperCase")}}的返回值是一致的。</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>将字符串转换成小写并返回。</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>返回一个对象文字代表着特定的对象。你可以使用这个返回值来创建新的对象。重写 {{jsxref("Object.prototype.toSource")}} 方法。</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>返回用字符串表示的特定对象。重写 {{jsxref("Object.prototype.toString")}} 方法。</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>将字符串转换成大写并返回。</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>从字符串的开始和结尾去除空格。参照部分 ECMAScript 5 标准。</dd> + <dt>{{jsxref("String.prototype.trimStart()")}}</dt> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{ Non-standard_inline() }}</dt> + <dd>从字符串的左侧去除空格。</dd> + <dt>{{jsxref("String.prototype.trimEnd()")}}</dt> + <dt>{{jsxref("String.prototype.trimRight()")}} {{ Non-standard_inline() }}</dt> + <dd>从字符串的右侧去除空格。</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>返回特定对象的原始值。重写 {{jsxref("Object.prototype.valueOf")}} 方法。</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> + <dd>返回一个新的迭代器对象，该对象遍历字符串值的索引位置，将每个索引值作为字符串值返回。</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">HTML wrapper methods</h3> + +<p>下面的方法被限制使用，因为只对可用的HTML标签和属性提供部分支持。</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd><code><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-name"><a name="name"></a></code> (hypertext target)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/font#attr-color"><code><font color="<em>color</em>"></code></a></dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/font#attr-size"><code><font size="<em>size</em>"></code></a></dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd><a class="external" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-href"><code><a href="<em>url</em>"></code></a> (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.prototype")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..b9ec4f2381 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,68 @@ +--- +title: Symbol.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> 表示 {{jsxref("Symbol")}} 构造函数的原型。.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}</div> + +<h2 id="Description">Description</h2> + +<p>{{jsxref("Symbol")}} 继承自 {{jsxref("Symbol.prototype")}}. 你可以使用构造函数的原型对象来给所有Symbol实例添加属性或者方法。</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Symbol.prototype.constructor</code></dt> + <dd>返回创建实例原型的函数. 默认为 {{jsxref("Symbol")}} 函数。</dd> + <dt>{{jsxref("Symbol.prototype.description")}}</dt> + <dd>一个包含symbol描述的只读字符串。</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt> + <dd>返回包含{{jsxref("Global_Objects/Symbol", "Symbol")}} 对象源码的字符串。覆盖{{jsxref("Object.prototype.toSource()")}} 方法。</dd> + <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> + <dd>返回包含Symbol描述符的字符串。 覆盖{{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> + <dd>返回 {{jsxref("Symbol")}} 对象的初始值.。覆盖 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> + <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt> + <dd> 返回{{jsxref("Symbol")}}对象的初始值。</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("javascript.builtins.Symbol.prototype")}}</p> + +<div id="compat-mobile"></div> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..9b7eb11a66 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,134 @@ +--- +title: SyntaxError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError +tags: + - Error + - JavaScript + - Property + - Prototype + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>SyntaxError.prototype</strong></code> 属性表示{{jsxref("SyntaxError")}} 构造器的原型.</p> + +<h2 id="Description" name="Description">描述</h2> + +<p>所有 {{jsxref("SyntaxError")}} 实例继承自 <code>SyntaxError.prototype</code>. 你可以使用该原型给所有实例添加属性和方法.</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>创建实例的构造函数.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>错误信息. 尽管 ECMA-262 指出, {{jsxref("SyntaxError")}} 应该提供其子什么的信息属性,但在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中, 仍是继承自{{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd><span style="line-height: 19.0909080505371px;">错误的名称.继承自</span> {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>抛出该异常的文件路径.继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd><span style="line-height: 19.0909080505371px;">抛出该异常的文件的行号</span>. 继承自 {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd><span style="line-height: 19.0909080505371px;">抛出该异常的文件的列数</span>. <span style="line-height: 19.0909080505371px;">继承自</span> {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>栈追踪信息. <span style="line-height: 19.0909080505371px;">继承自</span> {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>尽管 {{jsxref("SyntaxError")}} 原型对象自身不包含任何方法,但 {{jsxref("SyntaxError")}} 实例从原型链中继承了一些方法.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..61824a9cfe --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,173 @@ +--- +title: TypedArray.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong>属性表示{{jsxref("TypedArray")}}构造器的原型.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p>{{jsxref("TypedArray")}} 实例继承自 {{jsxref("TypedArray.prototype")}}. 你可以通过该原型对象为所有的类型化数组(<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a>)实例添加属性和方法.</p> + +<p>关于继承的更多的信息请参见关于<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description"><em>TypedArray</em></a> 的描述.</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>TypedArray.prototype.constructor</code></dt> + <dd>返回创建实例原型的构造函数.这是相应的<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array type</a>的默认的构造函数.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>返回被格式化数组引用的{{jsxref("ArrayBuffer")}}. 创建时已被固化,因此是只读的.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>返回从{{jsxref("ArrayBuffer")}}读取的字节长度. 创建时已被固化,因此是只读的.</dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>返回从{{jsxref("ArrayBuffer")}}读取时的字节偏移量<strong>.</strong>创建时已被固化,因此是只读的.</dd> + <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> + <dd>返回在类型化数组中的元素的数量<strong>.</strong>创建时已被固化,因此是只读的.</dd> +</dl> + +<h2 id="methods">methods</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> + <dd>浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组. 参见 {{jsxref("Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> + <dd>返回一个 <code><strong>Array Iterator</strong></code> 对象，该对象包含数组中每一个索引的键值对.参见 {{jsxref("Array.prototype.entries()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> + <dd>测试数组的所有元素是否都通过了指定函数的测试. 参见{{jsxref("Array.prototype.every()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> + <dd>将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值. 参见 {{jsxref("Array.prototype.fill()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> + <dd>使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组. 参见 {{jsxref("Array.prototype.filter()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> + <dd>返回一个满足提供的函数的测试的元素,若是没有满足的元素则返回<code>undefined</code> . 参见 {{jsxref("Array.prototype.find()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> + <dd>查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1. 参见 {{jsxref("Array.prototype.findIndex()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> + <dd>对数组的每个元素执行一次提供的函数(回调函数). 参见 {{jsxref("Array.prototype.forEach()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>确定一个类型化数组是否包括了某个元素,包含就返回true,不包含就返回false.参见 {{jsxref("Array.prototype.includes()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> + <dd>返回数组中第一个等于指定值得元素的索引,如果找不到则返回-1. 参见 {{jsxref("Array.prototype.indexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> + <dd>将数组中的所有元素连接成一个字符串. 参见 {{jsxref("Array.prototype.join()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> + <dd>返回一个新的包含数组索引的数组迭代器. 参见 {{jsxref("Array.prototype.keys()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> + <dd>返回数组中最后一个等于指定值得元素的索引,如果找不到则返回-1.参见 {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> + <dd>创建一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组.参见 {{jsxref("Array.prototype.map()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>以前的不标准版本的 {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> + <dd>接收一个函数作为累加器（accumulator),数组中的每个值（从左到右）开始合并，最终为一个值. 参见{{jsxref("Array.prototype.reduce()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> + <dd>接受一个函数作为累加器（accumulator）,让每个值（从右到左，亦即从尾到头）缩减为一个值.（与 <code>reduce()</code> 的执行方向相反）. 参见{{jsxref("Array.prototype.reduceRight()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> + <dd>颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个. 参见 {{jsxref("Array.prototype.reverse()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> + <dd>读取一个指定数组中的元素保存到格式化数组中.</dd> + <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> + <dd>浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组. 参见 {{jsxref("Array.prototype.slice()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> + <dd>数组中只要有一个元素满足提供的测试函数的测试就返回true,否则返回false. 参见 {{jsxref("Array.prototype.some()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> + <dd>对数组进行排序,并返回原数组(是改变原数组). 参见 {{jsxref("Array.prototype.sort()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> + <dd>返回给定的起始和结束索引之间的元素组成的新的类型化数组.</dd> + <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> + <dd>返回有数组中的元素组成的新的数组迭代对象. 参见 {{jsxref("Array.prototype.values()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> + <dd>返回一个将数组中的每个元素本地化后组成的字符串. 参见 {{jsxref("Array.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> + <dd>返回一个由数组中的每个元素字符串化后组成的字符串. 参见 {{jsxref("Array.prototype.toString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> + <dd>返回一个包含数组中每个元素的新的数组迭代对象.</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..d6daea2244 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,95 @@ +--- +title: TypeError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError +tags: + - Error + - JavaScript + - TypeError + - 原型 + - 错误 +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypeError.prototype</strong></code> 属性表示 {{jsxref("TypeError")}}构造函数的原型。</p> + +<p> </p> + +<h2 id="描述">描述</h2> + +<p>所有{{jsxref("TypeError")}}实例都继承自TypeError.prototype。您可以使用原型向所有实例添加属性或方法</p> + +<p> </p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>TypeError.prototype.constructor</code></dt> + <dd>声明创建实例原型 (prototype) 的方法。</dd> + <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> + <dd>错误信息。虽然 ECMA-262 规范指出 {{jsxref("TypeError")}} 应该实现其自身的 <code>message</code> 属性，但是在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}。</dd> + <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> + <dd>错误名称。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> + <dd>引起该错误的代码所在文件的路径。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> + <dd>引起错误的代码所在行的行号。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> + <dd>引起错误的代码所在列的列号。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> + <dd>堆栈跟踪记录。 继承自 {{jsxref("Error")}}。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>尽管 {{jsxref("TypeError")}} 不包含任何自己的方法, 但{{jsxref("TypeError")}}的实例通过原型链继承了一些方法。</p> + +<p> </p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> 初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> + +<p> </p> +</div> + +<p>{{Compat("javascript.builtins.TypeError")}}</p> + +<div id="compat-desktop"> </div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..a3d35fa68c --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,84 @@ +--- +title: URIError.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/URIError +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype +--- +<div>{{JSRef}}</div> + +<div><code><strong>URIError.prototype</strong></code> 属性表示 {{jsxref("URIError")}} 构造器的原型。</div> + +<h2 id="描述">描述</h2> + +<p>所有的 {{jsxref("URIError")}} 实例都继承自 <code>URIError.prototype</code>。 可以通过原型(prototype) 给所有的实例添加属性或者方法。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>URIError.prototype.constructor</code></dt> + <dd>声明创建实例原型 (prototype) 的方法。</dd> + <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> + <dd>错误信息。虽然 ECMA-262 规范指出 {{jsxref("URIError")}} 应该提供其自己专属的 <code><strong>message</strong></code><strong> </strong>属性，但是在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}</dd> + <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> + <dd>错误名称。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> + <dd>产生该错误的代码所在文件的路径。 继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> + <dd>产生该错误的代码所在行的行号。继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> + <dd>产生该错误的代码所在列的列号。 继承自 {{jsxref("Error")}}。</dd> + <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> + <dd>堆栈记录。继承自 {{jsxref("Error")}}。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>虽然 {{jsxref("URIError")}} 的原型对象自身不包含任何方法，但是 {{jsxref("URIError")}} 的实例通过原型链(prototype chain)继承了一些方法。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> 初始定义</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.15);"> 定义为</span></font><code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.25);"> 定义为</span></font><code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("javascript.builtins.URIError")}}</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..4e5be33f06 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,139 @@ +--- +title: WeakMap.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong>属性表现为 {{jsxref("WeakMap")}}的构造器。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p>{{jsxref("WeakMap")}} 实例从 {{jsxref("WeakMap.prototype")}}继承了所有属性。你可以在<code>WeakMap构造器中添加属性和方法，从而使得所有</code>实例中都有效。</p> + +<p><code>WeakMap.prototype</code> 本身只是一个普通的对象：</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>返回创建WeakMap实例的原型函数。 {{jsxref("WeakMap")}}函数是默认的。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> + <dd>移除key的关联对象。执行后 <code>WeakMap.prototype.has(key)返回</code><code>false。</code></dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> + <dd>返回<code>key关联对象</code>, 或者 <code>undefined</code>(没有key关联对象时)。</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> + <dd>根据是否有key关联对象返回一个Boolean值。</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> + <dd>在WeakMap中设置一组key关联对象，返回这个 <code>WeakMap</code>对象。</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">从<code>WeakMap中移除所有的</code> key/value 。 注意，该方法已弃用,但可以通过创建一个空的WeakMap并替换原对象来实现 (参看 {{jsxref("WeakMap")}}的后半部分)</s></dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>23</td> + <td>7.1</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..d06fca34dc --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,116 @@ +--- +title: WeakSet.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +<div>{{JSRef("Global_Objects", "WeakSet")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>The <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> property represents the prototype for the {{jsxref("WeakSet")}} constructor.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">Description</h2> + +<p>{{jsxref("WeakSet")}} instances inherit from {{jsxref("WeakSet.prototype")}}. You can use the constructor's prototype object to add properties or methods to all <code>WeakSet</code> instances.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>WeakSet.prototype.constructor</code></dt> + <dd>返回构造函数即 {{jsxref("WeakSet")}} 本身.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> + <dd> 在<span style="line-height: 1.5;">该 </span><code style="font-size: 14px;">WeakSet</code><span style="line-height: 1.5;"> 对象中添加一个新元素 <code>value</code>.</span></dd> + <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> + <dd>从<span style="line-height: 1.5;">该 </span><code style="font-size: 14px;">WeakSet</code><span style="line-height: 1.5;"> 对象中删除</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">value </code><span style="line-height: 1.5;">这个元素, 之后 </span><code style="font-size: 14px;">WeakSet.prototype.has(value)</code><span style="line-height: 1.5;"> 方法便会返回 </span><code style="font-size: 14px;">false</code><span style="line-height: 1.5;">.</span></dd> + <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> + <dd>返回一个布尔值, 表示给定的值 <code>value</code> 是否存在于这个 <code>WeakSet</code> 中.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }} {{bug(792439)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} {{bug(792439)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Chrome-specific_notes">Chrome-specific notes</h3> + +<ul> + <li>This feature is available behind a preference. In <code style="font-size: 14px;">chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> + <li>{{jsxref("WeakMap.prototype")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..e3cd47f9ab --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,83 @@ +--- +title: Reserved Words +slug: conflicting/Web/JavaScript/Reference/Lexical_grammar +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +original_slug: Web/JavaScript/Reference/Reserved_words +--- +<p> </p> + +<p>以下这些是ECMAScript规范已经规定的关键字，不能用作变量、函数名、过程、和对象名：</p> + +<ul> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/break">break</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">case</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">catch</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/continue">continue</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">default</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/do...while">do</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/if...else">else</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">finally</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/for">for</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/function">function</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/for...in">in</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/return">return</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">switch</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/throw">throw</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">try</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/typeof_Operator">typeof</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/var">var</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/void_Operator">void</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/while">while</a></li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/with">with</a></li> +</ul> + +<p>以下是ECMAScript规定的保留字：</p> + +<ul> + <li>abstract</li> + <li>boolean</li> + <li>byte</li> + <li>char</li> + <li>class</li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/const">const</a></li> + <li>debugger</li> + <li>double</li> + <li>enum</li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/export">export</a></li> + <li>extends</li> + <li>final</li> + <li>float</li> + <li>goto</li> + <li>implements</li> + <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/import">import</a></li> + <li>int</li> + <li>interface</li> + <li>long</li> + <li>native</li> + <li>package</li> + <li>private</li> + <li>protected</li> + <li>public</li> + <li>short</li> + <li>static</li> + <li>super</li> + <li>synchronized</li> + <li>throws</li> + <li>transient</li> + <li>volatile</li> +</ul> + +<p>请注意，虽然ECMA-262还没有正式规定，但是在Mozilla中const,export和import已经被作为保留字对待。</p> + +<div class="noinclude"><a href="cn/Cn/Core_JavaScript_1.5_Reference/Reserved_Words">cn:Core JavaScript 1.5 Reference:Reserved Words</a> + +<p> </p> +</div> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Reserved_Words" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..a89cf74368 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,303 @@ +--- +title: 算术运算符 +slug: conflicting/Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>算术运算符</strong>以数值（字面量或变量）作为其操作数，并返回一个单个数值。标准算术运算符是加法（+），减法（-），乘法（*）和除法（/）。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="加法">加法 (+)</h2> + +<p>加法运算符的作用是数值求和，或者字符串拼接。</p> + +<h3 id="语法">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x + y +</pre> + +<h3 id="示例">示例</h3> + +<pre class="brush: js notranslate">// Number + Number -> 数字相加 +1 + 2 // 3 + +// Boolean + Number -> 数字相加 +true + 1 // 2 + +// Boolean + Boolean -> 数字相加 +false + false // 0 + +// Number + String -> 字符串连接 +5 + "foo" // "5foo" + +// String + Boolean -> 字符串连接 +"foo" + false // "foofalse" + +// String + String -> 字符串连接 +"foo" + "bar" // "foobar" +</pre> + +<h2 id="减法_-">减法 (-)</h2> + +<p>减法运算符使两个操作数相减，结果是它们的差值。</p> + +<h3 id="语法_2">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x - y +</pre> + +<h3 id="示例_2">示例</h3> + +<pre class="brush: js notranslate">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="除法">除法 (/)</h2> + +<p>除法运算符的结果是操作数的商 ，左操作数是被除数，右操作数是除数。</p> + +<h3 id="语法_3">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x / y +</pre> + +<h3 id="示例_3">示例</h3> + +<pre class="brush: js notranslate">1 / 2 // 在 JavaScript 中返回 0.5 +1 / 2 // 在 Java 中返回 0 +// （不需要数字是明确的浮点数） + +1.0 / 2.0 // 在 JavaScript 或 Java 中都返回 0.5 + +2.0 / 0 // 在 JavaScript 中返回 Infinity +2.0 / 0.0 // 同样返回 Infinity +2.0 / -0.0 // 在 JavaScript 中返回 -Infinity</pre> + +<h2 id="乘法_*">乘法 (*)</h2> + +<p>乘法运算符的结果是操作数的乘积。</p> + +<h3 id="语法_4">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x * y +</pre> + +<h3 id="示例_4">示例</h3> + +<pre class="brush: js notranslate">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="求余">求余 (%)</h2> + +<p>求余运算符返回第一个操作数对第二个操作数的模，即 <code>var1</code> 对 <code>var2</code> 取模，其中 <code>var1</code> 和 <code>var2</code> 是变量。取模功能就是 <code>var1</code> 除以 <code>var2</code> 的整型余数。</p> + +<h3 id="语法_5">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> var1 % var2 +</pre> + +<h3 id="示例_5">示例</h3> + +<pre class="brush: js notranslate">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="幂_**">幂 (**)</h2> + +<p>幂运算符返回第一个操作数做底数，第二个操作数做指数的乘方。即，<code>var1</code><sup><code>var2</code></sup>，其中 <code>var1</code> 和 <code>var2</code> 是其两个操作数。幂运算符是右结合的。<code>a ** b ** c</code> 等同于 <code>a ** (b ** c)</code>。</p> + +<h3 id="语法_6">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> var1 ** var2 +</pre> + +<h3 id="注解">注解</h3> + +<p>包括 PHP 或 Python 等的大多数语言中，都包含幂运算符（一般来说符号是 ^ 或者 **）。这些语言中的幂运算符有着比其他的单目运算符（如一元 + 或一元 - ）更高的优先级。但是作为例外，在 Bash 中，** 运算符被设计为比单目运算符优先级更低。在最新的 JavaScript（ES2016） 中，禁止使用带歧义的幂运算表达式。比如，底数前不能紧跟一元运算符（<code>+/-/~/!/delete/void/typeof</code>）。</p> + +<pre class="brush: js notranslate">-2 ** 2; +// 在 Bash 中等于 4 ，而在其他语言中一般等于 -4 +// 在 JavaScript 中是错误的，因为这会有歧义 + +-(2 ** 2); +// -4 在 JavaScript 中能够明显体现出作者的意图</pre> + +<h3 id="示例_6">示例</h3> + +<pre class="brush: js notranslate">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>如果要反转求幂表达式结果的符号，你可以采用这样的方式：</p> + +<pre class="brush: js notranslate">-(2 ** 2) // -4</pre> + +<p>强制求幂表达式的基数为负数：</p> + +<pre class="brush: js notranslate">(-2) ** 2 // 4</pre> + +<h2 id="递增">递增 (++)</h2> + +<p>递增运算符为其操作数增加1，返回一个数值。</p> + +<ul> + <li>如果使用后置（postfix），即运算符位于操作数的后面（如 x++），那么将会在递增前返回数值。</li> + <li>如果使用前置（prefix），即运算符位于操作数的前面（如 ++x），那么将会在递增后返回数值。</li> +</ul> + +<h3 id="语法_7">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x++ 或者 ++x +</pre> + +<h3 id="示例_7">示例</h3> + +<pre class="brush: js notranslate">// 后置 +var x = 3; +y = x++; +// y = 3, x = 4 + +// 前置 +var a = 2; +b = ++a; +// a = 3, b = 3 +</pre> + +<h2 id="递减_--">递减 (--)</h2> + +<p>递减运算符将其操作数减去1，并返回一个数值。</p> + +<ul> + <li>如果后置使用（如 x--），则在递减前返回数值。</li> + <li>如果前置使用（如 --x），则在递减后返回数值。</li> +</ul> + +<h3 id="语法_8">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> x-- or --x +</pre> + +<h3 id="示例_8">示例</h3> + +<pre class="brush: js notranslate">// 后置 +var x = 3; +y = x--; // y = 3, x = 2 + +// 前置 +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="一元负号_-">一元负号 (-)</h2> + +<p>一元负号运算符位于操作数前面，并转换操作数的符号。</p> + +<h3 id="语法_9">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> -x +</pre> + +<h3 id="示例_9">示例</h3> + +<pre class="brush: js notranslate">var x = 3; +y = -x; // y = -3, x = 3 +</pre> + +<h2 id="一元正号">一元正号 (+)</h2> + +<p>一元正号运算符位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。它可以将字符串转换成整数和浮点数形式，也可以转换非字符串值 <code>true</code>，<code>false</code> <code>和</code> <code>null</code>。小数和十六进制格式字符串也可以转换成数值。负数形式字符串也可以转换成数值（对于十六进制不适用）。如果它不能解析一个值，则计算结果为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>。</p> + +<h3 id="语法_10">语法</h3> + +<pre class="syntaxbox notranslate"><strong>运算符:</strong> +x +</pre> + +<h3 id="示例_10">示例</h3> + +<pre class="brush: js notranslate">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val;} //NaN</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Added <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">赋值运算符</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html new file mode 100644 index 0000000000..ae8635cf42 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -0,0 +1,280 @@ +--- +title: 比较操作符 +slug: >- + conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 +tags: + - 严格比较操作符 + - 比较操作符 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。</p> + +<p>字符串比较则是使用基于标准字典的 Unicode 值来进行比较的。</p> + +<p>比较的特点:</p> + +<ul> + <li>对于两个拥有相同字符顺序，相同长度，并且每个字符的位置都匹配的字符串，应该使用严格比较运算符。</li> + <li><span style="line-height: 1.5;"> 对于两个数值相同的数字应该使用严格比较运算符，NaN和任何值不相等，包括其自身，正数零等于负数零。</span></li> + <li>对于两个同为true或同为false的布尔操作数，应使用严格比较运算符。</li> + <li>不要使用严格比较运算符或比较运算符来比较两个不相等的对象。</li> + <li>当比较一个表达式和一个对象时，仅当两个操作数引用相同的对象（指针指向相同对象）。</li> + <li>对于Null 和 Undefined 类型而言，应使用严格比较运算符比较其自身，使用比较运算符进行互相比较。</li> +</ul> + +<h2 id="相等运算符">相等运算符</h2> + +<h3 id="相等()">相等(==)</h3> + +<p>比较操作符会为两个不同类型的操作数转换类型，然后进行严格比较。当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。</p> + +<h4 id="语法">语法</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="例子">例子</h4> + +<pre class="brush: js"> 1 == 1 // true +"1" == 1 // true + 1 == '1' // true + 0 == false // true +</pre> + +<h3 id="不相等_(!)"><a name="Inequality">不相等 (!=)</a></h3> + +<p>不等操作符仅当操作数不相等时返回true，如果两操作数不是同一类型，JavaScript会尝试将其转为一个合适的类型，然后进行比较。如果两操作数为对象类型，JavaScript会比较其内部引用地址，仅当他们在内存中引用不同对象时不相等。</p> + +<h4 id="语法_2">语法</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="例子_2">例子</h4> + +<pre class="brush: js">1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +</pre> + +<h3 id="一致严格相等_()"><a name="Identity">一致/严格相等 (===)</a></h3> + +<p>一致运算符不会进行类型转换，仅当操作数严格相等时返回true</p> + +<h4 id="语法_3">语法</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="例子_3">例子</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false +var object1 = {"value":"key"}, object2={"value":"key"}; +object1 === object2 //false</pre> + +<h3 id="不一致严格不相等_(!)"><a name="Nonidentity">不一致/严格不相等 (!==)</a></h3> + +<p>不一致运算符当操作数不相等或不同类型时返回true</p> + +<h4 id="语法_4">语法</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="例子_4">例子</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="关系运算符">关系运算符</h2> + +<h3 id="大于运算符_(>)"><a name="Greater_than_operator">大于运算符 (>)</a></h3> + +<p>大于运算符仅当左操作数大于右操作数时返回true</p> + +<h4 id="语法_5">语法</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="例子_5">例子</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="大于等于运算符_(>)"><a name="Greater_than_or_equal_operator">大于等于运算符 (>=)</a></h3> + +<p>大于等于运算符当左操作数大于或等于右操作数时返回true</p> + +<h4 id="语法_6">语法</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="例子_6">例子</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="小于运算符_(<)"><a name="Less_than_operator">小于运算符 (<)</a></h3> + +<p>小于运算符仅当左操作数小于右操作数时返回true</p> + +<h4 id="语法_7">语法</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="例子_7">例子</h4> + +<pre class="brush: js">3 < 4 // true +</pre> + +<h3 id="小于等于运算符_(<)"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">小于等于运算符 (<=)</a></h3> + +<p>小于等于运算符当左操作数小于或等于右操作数时返回true</p> + +<h4 id="语法_8">语法</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="例子_8">例子</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="使用比较操作符">使用比较操作符</h2> + +<p>标准相等操作符(<code>==</code> and <code>!=</code>) 使用 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a> 去比较两个操作数。当两个操作数类型不相等时，会在比较前尝试将其转换为相同类型。 e.g., 对于表达式 <code>5 == '5'</code>, 在比较前会先将右边字符串类型的操作数 5 转换为数字。</p> + +<p>严格相等操作符 (<code>===</code> and <code>!==</code>) 使用 Strict Equality Comparison Algorithm 并尝试对两个相同操作数进行相等比较，如果它们的类型不相等，那么永远会返回false 所以 <code>5 !== '5'。</code></p> + +<p>当需要明确操作数的类型和值的时候，或者操作数的确切类型非常重要时，应使用严格相等操作符。否则，当你允许操作数在比较前进行类型转换时，可以使用标准相等操作符来比较。</p> + +<p>当比较运算涉及类型转换时 (i.e., non–strict comparison), JavaScript 会按以下规则对字符串，数字，布尔或对象类型的操作数进行操作:</p> + +<ul> + <li>当比较数字和字符串时，字符串会转换成数字值。 JavaScript 尝试将数字字面量转换为数字类型的值。 首先, 一个数学上的值会从数字字面量中衍生出来，然后这个值将被转为一个最接近的<code>Number</code>类型的值。</li> + <li>如果其中一个操作数为布尔类型，那么布尔操作数如果为true，那么会转换为1，如果为false，会转换为整数0，即0。</li> + <li>如果一个对象与数字或字符串相比较，JavaScript会尝试返回对象的默认值。操作符会尝试通过方法valueOf和toString将对象转换为其原始值（一个字符串或数字类型的值）。如果尝试转换失败，会产生一个运行时错误。</li> + <li>注意：当且仅当与原始值比较时，对象会被转换为原始值。当两个操作数均为对象时，它们作为对象进行比较，仅当它们引用相同对象时返回true。</li> +</ul> + +<div class="note"><strong>注意:</strong> 字符串对象的类型是对象，不是字符串！字符串对象很少被使用，所以下面的结果也许会让你惊讶：</div> + +<pre class="brush:js">// true as both operands are Type String (i.e. string primitives): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false as a and b are Type Object and reference different objects +a == b + +// false as a and b are Type Object and reference different objects +a === b + +// true as a and 'foo' are of different type and, the Object (a) +// is converted to String 'foo' before comparison +a == 'foo' </pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Adds <code>===</code> and <code>!==</code> operators. Implemented in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8', 'Relational Operators')}}<br> + {{SpecName('ES5.1', '#sec-11.9', 'Equality Operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}<br> + {{SpecName('ES6', '#sec-equality-operators', 'Equality Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..63e6b408a0 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,758 @@ +--- +title: 按位操作符 +slug: >- + conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 +tags: + - js ^ & Bitwise Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong>按位操作符（Bitwise operators）</strong> 将其操作数（operands）当作32位的比特序列（由0和1组成），而不是十进制、十六进制或八进制<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">数值</a>。例如，十进制数9，用二进制表示则为1001。按位操作符操作数字的二进制形式，但是返回值依然是标准的JavaScript数值。</p> + +<p>下面的表格总结了JavaScript中的按位操作符：</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>运算符</th> + <th>用法</th> + <th>描述</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">按位与（ AND）</a></td> + <td style="white-space: nowrap;"><code>a & b</code></td> + <td>对于每一个比特位，只有两个操作数相应的比特位都是1时，结果才为1，否则为0。</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">按位或（OR）</a></td> + <td style="white-space: nowrap;"><code>a | b</code></td> + <td>对于每一个比特位，当两个操作数相应的比特位至少有一个1时，结果为1，否则为0。</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">按位异或（XOR）</a></td> + <td style="white-space: nowrap;"><code>a ^ b</code></td> + <td>对于每一个比特位，当两个操作数相应的比特位有且只有一个1时，结果为1，否则为0。</td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">按位非（NOT）</a></td> + <td style="white-space: nowrap;"><code>~ a</code></td> + <td>反转操作数的比特位，即0变成1，1变成0。</td> + </tr> + <tr> + <td><a href="#Left_shift">左移（L</a><a href="#Left_shift" style="line-height: 1.5;">eft shift）</a></td> + <td style="white-space: nowrap;"><code>a << b</code></td> + <td>将 <code>a</code> 的二进制形式向左移 <code>b</code> (< 32) 比特位，右边用0填充。</td> + </tr> + <tr> + <td><a href="#Right_shift">有符号右移</a></td> + <td style="white-space: nowrap;"><code>a >> b</code></td> + <td>将 a 的二进制表示向右移<code> b </code>(< 32) 位，丢弃被移出的位。</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">无符号右移</a></td> + <td style="white-space: nowrap;"><code>a >>> b</code></td> + <td>将 a 的二进制表示向右移<code> b </code>(< 32) 位，丢弃被移出的位，并使用 0 在左侧填充。</td> + </tr> + </tbody> +</table> + +<h2 id="有符号32位整数">有符号32位整数</h2> + +<p>所有的按位操作符的操作数都会被转成补码（two's complement）形式的有符号32位整数。补码形式是指一个数的负对应值（negative counterpart）（如 5和-5）为数值的所有比特位反转后，再加1。反转比特位即该数值进行’非‘位运算，也即该数值的反码。例如下面为整数314的二进制编码：</p> + +<pre>00000000000000000000000100111010 +</pre> + +<p>下面编码 <code>~314</code>，即 <code>314</code> 的反码：</p> + +<pre>11111111111111111111111011000101 +</pre> + +<p>最后，下面编码 <code>-314</code>，即 <code>314</code> 的反码再加1：</p> + +<pre>11111111111111111111111011000110 +</pre> + +<p>补码保证了当一个数是正数时，其最左的比特位是0，当一个数是负数时，其最左的比特位是1。因此，最左边的比特位被称为符号位（<em>sign bit</em>）。</p> + +<p><code>0</code> 是所有比特数字0组成的整数。</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p><code>-1</code> 是所有比特数字1组成的整数。</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p><code>-2147483648</code>（十六进制形式：<code>-0x80000000</code>）是除了最左边为1外，其他比特位都为0的整数。</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p><code>2147483647</code>（十六进制形式：<code>0x7fffffff</code>）是除了最左边为0外，其他比特位都为1的整数。</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>数字<code>-2147483648</code> 和 <code>2147483647</code> 是32位有符号数字所能表示的最小和最大整数。</p> + +<h2 id="按位逻辑操作符">按位逻辑操作符</h2> + +<p>从概念上讲，按位逻辑操作符按遵守下面规则：</p> + +<ul> + <li>操作数被转换成32位整数，用比特序列（0和1组成）表示。超过32位的数字会被丢弃。<br> + 例如, 以下具有32位以上的整数将转换为32位整数:</li> + <li> + <pre>转换前: 11100110111110100000000000000110000000000001 +转换后: 10100000000000000110000000000001</pre> + </li> + <li>第一个操作数的每个比特位与第二个操作数的相应比特位匹配：第一位对应第一位，第二位对应第二位，以此类推。</li> + <li>位运算符应用到每对比特位，结果是新的比特值。</li> +</ul> + +<h3 id="(按位与)"><a name="Bitwise_AND">& (按位与)</a></h3> + +<p>对每对比特位执行<strong>与（AND）操作</strong>。只有 a 和 b 都是 1 时，a AND b 才是 1。<strong>与操作</strong>的真值表如下：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>将任一数值 x 与 0 执行按位与操作，其结果都为 0。将任一数值 x 与 -1 执行按位与操作，其结果都为 x。</p> + +<h3 id="(按位或)"><a name="Bitwise_OR">| (按位或)</a></h3> + +<p>对每一对比特位执行<strong>或（OR）操作</strong>。如果 a 或 b 为 1，则 <code>a</code> OR <code>b</code> 结果为 1。<strong>或操作</strong>的真值表：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>将任一数值 x 与 0 进行按位或操作，其结果都是 x。将任一数值 x 与 -1 进行按位或操作，其结果都为 -1。</p> + +<p>补充一些例子：</p> + +<pre class="brush: js">1 | 0 ; // 1 + +1.1 | 0 ; // 1 + +'asfdasfda' | 0 ; // 0 + +0 | 0 ; // 0 + +(-1) | 0 ; // -1 + +(-1.5646) | 0 ; // -1 + +[] | 0 ; // 0 + +({}) | 0 ; // 0 + +"123456" | 0 ; // 123456 + +1.23E2 | 0; // 123 + +1.23E12 | 0; // 1639353344 + +-1.23E2 | 0; // -123 + +-1.23E12 | 0; // -1639353344</pre> + +<h3 id="(按位异或)"><a name="Bitwise_XOR">^ (按位异或)</a></h3> + +<p>对每一对比特位执行<strong>异或（XOR）操作</strong>。当 a 和 b 不相同时，<code>a</code> XOR <code>b</code> 的结果为 1。<strong>异或操作</strong>真值表：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>将任一数值 x 与 0 进行异或操作，其结果为 x。将任一数值 x 与 -1 进行异或操作，其结果为 ~x。</p> + +<h3 id="(按位非)"><a name="Bitwise_NOT">~ (按位非)</a></h3> + +<p>对每一个比特位执行<strong>非（NOT）操作</strong>。NOT <code>a</code> 结果为 a 的反转（即反码）。<strong>非操作</strong>的真值表：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>对任一数值 x 进行按位非操作的结果为 -(x + 1)。例如，~5 结果为 -6。</p> + +<p>与 indexOf 一起使用示例：</p> + +<pre class="brush: js">var str = 'rawr'; +var searchFor = 'a'; + +// 这是 if (-1*str.indexOf('a') <= 0) 条件判断的另一种方法 +if (~str.indexOf(searchFor)) { + // searchFor 包含在字符串中 +} else { + // searchFor 不包含在字符串中 +} + +// (~str.indexOf(searchFor))的返回值 +// r == -1 +// a == -2 +// w == -3 +</pre> + +<h2 id="按位移动操作符">按位移动操作符</h2> + +<p>按位移动操作符有两个操作数：第一个是要被移动的数字，而第二个是要移动的长度。移动的方向根据操作符的不同而不同。</p> + +<p>按位移动会先将操作数转换为大端字节序顺序(big-endian order)的32位整数,并返回与左操作数相同类型的结果。右操作数应小于 32位，否则只有最低 5 个字节会被使用。</p> + +<pre>注：Big-Endian:高位字节排放在内存的低地址端，低位字节排放在内存的高地址端， +又称为"高位编址"。 +Big-Endian是最直观的字节序： +①把内存地址从左到右按照由低到高的顺序写出； +②把值按照通常的高位到低位的顺序写出； +③两者对照，一个字节一个字节的填充进去。</pre> + +<h3 id="<<_(左移)"><a name="Left_shift"><< (左移)</a></h3> + +<p>该操作符会将第一个操作数向左移动指定的位数。向左被移出的位被丢弃，右侧用 0 补充。</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>在数字 <strong>x</strong> 上左移 <strong>y</strong> 比特得到 <strong>x * 2<sup>y</sup></strong>.</p> + +<h3 id=">>_(有符号右移)"><a name="Right_shift">>> (有符号右移)</a></h3> + +<p>该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，拷贝最左侧的位以填充左侧。由于新的最左侧的位总是和以前相同，符号位没有被改变。所以被称作“符号传播”。</p> + +<p>例如， <code>9 >> 2</code> 得到 2:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>相比之下， <code>-9 >> 2</code> 得到 -3，因为符号被保留了。</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(无符号右移)"><a name="Unsigned_right_shift">>>> (无符号右移)</a></h3> + +<p>该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，左侧用0填充。因为符号位变成了 0，所以结果总是非负的。（译注：即便右移 0 个比特，结果也是非负的。）</p> + +<p>对于非负数，有符号右移和无符号右移总是返回相同的结果。例如 <code>9 >>> 2</code> 和 <code>9 >> 2</code> 一样返回 2：</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>但是对于负数却不尽相同。 <code>-9 >>> 2</code> 产生 1073741821 这和 <code>-9 >> 2</code> 不同：</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="例子：标志位与掩码">例子：标志位与掩码</h3> + +<p>位运算经常被用来创建、处理以及读取标志位序列——一种类似二进制的变量。虽然可以使用变量代替标志位序列，但是这样可以节省内存（1/32）。</p> + +<p>例如，有 4 个标志位：</p> + +<ul> + <li>标志位 A：我们有 ant</li> + <li>标志位 B：我们有 bat</li> + <li>标志位 C：我们有 cat</li> + <li>标志位 D：我们有 duck</li> +</ul> + +<p>标志位通过位序列 DCBA 来表示。当一个位被置位 (set) 时，它的值为 1 。当被清除 (clear) 时，它的值为 0 。例如一个变量 <code>flags</code> 的二进制值为 0101：</p> + +<pre class="brush: js">var flags = 5; // 二进制 0101 +</pre> + +<p>这个值表示：</p> + +<ul> + <li>标志位 A 是 true （我们有 ant）；</li> + <li>标志位 B 是 false （我们没有 bat）；</li> + <li>标志位 C 是 true （我们有 cat）；</li> + <li>标志位 D 是 false （我们没有 duck）；</li> +</ul> + +<p>因为位运算是 32 位的， 0101 实际上是 00000000000000000000000000000101。因为前面多余的 0 没有任何意义，所以他们可以被忽略。</p> + +<p>掩码 (bitmask) 是一个通过与/或来读取标志位的位序列。典型的定义每个标志位的原语掩码如下：</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>新的掩码可以在以上掩码上使用逻辑运算创建。例如，掩码 1011 可以通过 FLAG_A、FLAG_B 和 FLAG_D 逻辑或得到：</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>某个特定的位可以通过与掩码做逻辑与运算得到，通过与掩码的与运算可以去掉无关的位，得到特定的位。例如，掩码 0100 可以用来检查标志位 C 是否被置位：</p> + +<pre class="brush: js">// 如果我们有 cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>一个有多个位被置位的掩码表达任一/或者的含义。例如，以下两个表达是等价的：</p> + +<pre class="brush: js">// 如果我们有 bat 或者 cat 至少一个 +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// 如果我们有 bat 或者 cat 至少一个 +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>可以通过与掩码做或运算设置标志位，掩码中为 1 的位可以设置对应的位。例如掩码 1100 可用来设置位 C 和 D：</p> + +<pre class="brush: js">// 我们有 cat 和 duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>可以通过与掩码做与运算清除标志位，掩码中为 0 的位可以设置对应的位。掩码可以通过对原语掩码做非运算得到。例如，掩码 1010 可以用来清除标志位 A 和 C ：</p> + +<pre class="brush: js">// 我们没有 ant 也没有 cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>如上的掩码同样可以通过 <code>~FLAG_A & ~FLAG_C</code> 得到（德摩根定律）：</p> + +<pre class="brush: js">// 我们没有 ant 也没有 cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>标志位可以使用异或运算切换。所有值为 1 的位可以切换对应的位。例如，掩码 0110 可以用来切换标志位 B 和 C：</p> + +<pre class="brush: js">// 如果我们以前没有 bat ，那么我们现在有 bat +// 但是如果我们已经有了一个，那么现在没有了 +// 对 cat 也是相同的情况 +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>最后，所有标志位可以通过非运算翻转:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="转换片段">转换片段</h3> + +<p>将一个二进制数的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> 转换为十进制的 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = "1011"; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // 打印 11 +</pre> + +<p>将一个十进制的 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> 转换为二进制数的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // 打印 1011 +</pre> + +<h3 id="自动化掩码创建">自动化掩码创建</h3> + +<p>如果你需要从一系列的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> 值创建一个掩码，你可以：</p> + +<pre class="brush: js">function createMask () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // 打印 11 +</pre> + +<h3 id="逆算法：从掩码得到布尔数组">逆算法：从掩码得到布尔数组</h3> + +<p>如果你希望从掩码得到得到 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> ：</p> + +<pre class="brush: js">function arrayFromMask (nMask) { + // nMask 必须介于 -2147483648 和 2147483647 之间 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError("arrayFromMask - out of range"); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert("[" + array1.join(", ") + "]"); +// 打印 "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>你可以同时测试以上两个算法……</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>仅仅由于教学目的 （因为有 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> 方法），我们展示如何修改 arrayFromMask 算法通过 Number 返回二进制的 String，而非 Boolean Array：</p> + +<pre class="brush: js">function createBinaryString (nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// 打印 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.8', 'Bitwise NOT operator')}}<br> + {{SpecName('ES5.1', '#sec-11.7', 'Bitwise shift operators')}}<br> + {{SpecName('ES5.1', '#sec-11.10', 'Binary bitwise operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-not-operator', 'Bitwise NOT operator')}}<br> + {{SpecName('ES6', '#sec-bitwise-shift-operators', 'Bitwise shift operators')}}<br> + {{SpecName('ES6', '#sec-binary-bitwise-operators', 'Binary bitwise operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> + <li> + <p><strong>js ^</strong> & <strong>Bitwise Operators</strong></p> + </li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html new file mode 100644 index 0000000000..0312efc731 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -0,0 +1,415 @@ +--- +title: 赋值运算符 +slug: >- + conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e +tags: + - JavaScript + - 运算符 +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>赋值运算符（<strong>assignment operator</strong>）基于右值（right operand）的值，给左值（left operand）赋值。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<p class="hidden">本文的交互示例的源代码存储在GithHub仓库。如果你愿意贡献更多交互示例，请克隆仓库 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并提交 pull request.</p> + +<h2 id="概述">概述</h2> + +<p>基本的赋值运算符是等号（<code>=</code>），该运算符把它右边的运算值赋给左边。即，<code>x = y</code> 把 <code>y</code> 的值赋给 <code>x</code>。 其他的赋值运算符通常是标准运算符的简写形式，如下面的定义与示例。 </p> + +<table class="standard-table"> + <tbody> + <tr> + <th>名称</th> + <th>简写形式</th> + <th>含义</th> + </tr> + <tr> + <td><a href="#Assignment">赋值（Assignment）</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">加赋值（Addition assignment）</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">减赋值（Subtraction assignment）</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">乘赋值（Multiplication assigment）</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">除赋值（Division assignment）</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">模赋值（Remainder assignment）</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation_assignment">指数赋值（Exponentiation assignment）</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">左移赋值（Left shift assignment）</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">右移赋值（Right shift assignment）</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">无符号右移赋值（Unsigned right shift assignment）</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">按位与赋值（Bitwise AND assignment）</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">按位异或赋值（Bitwise XOR assignment）</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">按位或赋值（Bitwise OR assignment）</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="赋值"><a name="Assignment">赋值</a></h2> + +<p>简单的赋值运算符，把一个值赋给一个变量。为了把一个值赋给多个变量，可以以链式使用赋值运算符。参考下例：</p> + +<h4 id="语法">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x = y +</pre> + +<h4 id="示例">示例</h4> + +<pre class="brush: js">// Assuming the following variables +// x = 5 +// y = 10 +// z = 25 + +x = y // x is 10 +x = y = z // x, y and z are all 25 +</pre> + +<h3 id="加赋值（Addition_assignment）"><a name="Addition_assignment">加赋值（Addition assignment）</a></h3> + +<p>加赋值运算符把一个右值与一个变量相加，然后把相加的结果赋给该变量。两个操作数的类型决定了加赋值运算符的行为。算术相加或字符串连接都有可能。更多细节参考 {{jsxref("Operators/Arithmetic_Operators", "addition operator", "#Addition", 1)}}。</p> + +<h4 id="语法_2">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x += y +<strong>Meaning:</strong> x = x + y +</pre> + +<h4 id="示例_2">示例</h4> + +<pre class="brush: js">// 定义下列变量 +// foo = 'foo' +// bar = 5 +// baz = true + + +// Number + Number -> addition +bar += 2 // 7 + +// Boolean + Number -> addition +baz += 1 // 2 + +// Boolean + Boolean -> addition +baz += false // 1 + +// Number + String -> concatenation +bar += 'foo' // "5foo" + +// String + Boolean -> concatenation +foo += false // "foofalse" + +// String + String -> concatenation +foo += 'bar' // "foobar" +</pre> + +<h3 id="减赋值（Subtraction_assignment）"><a name="Subtraction_assignment">减赋值（Subtraction assignment）</a></h3> + +<p>减赋值运算符使一个变量减去右值，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "subtraction operator", "#Subtraction", 1)}} 。</p> + +<h4 id="语法_3">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x -= y +<strong>Meaning:</strong> x = x - y +</pre> + +<h4 id="示例_3">示例</h4> + +<pre class="brush: js">// 假定已定义了下面的变量 +// bar = 5 + +bar -= 2 // 3 +bar -= "foo" // NaN +</pre> + +<h3 id="乘赋值（Multiplication_assignment）"><a name="Multiplication_assignment">乘赋值（Multiplication assignment）</a></h3> + +<p>乘赋值运算符使一个变量乘以右值，然后把相成的结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "multiplication operator", "#Multiplication", 1)}}。</p> + +<h4 id="语法_4">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x *= y +<strong>Meaning:</strong> x = x * y +</pre> + +<h4 id="示例_4">示例</h4> + +<pre class="brush: js">// 假定已定义了下面的变量 +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN +</pre> + +<h3 id="除赋值（Division_assignment）"><a name="Division_assignment">除赋值（Division assignment）</a></h3> + +<p>除赋值运算符使一个变量除以右值，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "division operator", "#Division", 1)}}。</p> + +<h4 id="语法_5">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x /= y +<strong>Meaning:</strong> x = x / y +</pre> + +<h4 id="示例_5">示例</h4> + +<pre class="brush: js">// 假定已定义了下面的变量 +// bar = 5 + +bar /= 2 // 2.5 +bar /= "foo" // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="模赋值（Remainder_assignment）"><a name="Remainder_assignment">模赋值（Remainder assignment）</a></h3> + +<p>模赋值运算符使一个变量除以右值，然后把余数赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "remainder operator", "#Remainder", 1)}}。</p> + +<h4 id="语法_6">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x %= y +<strong>Meaning:</strong> x = x % y +</pre> + +<h4 id="示例_6">示例</h4> + +<pre class="brush: js">// Assuming the following variable +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN +</pre> + +<h3 id="指数赋值（Exponentiation_assignment）"><a id="Exponentiation_assignment" name="Exponentiation_assignment">指数赋值（Exponentiation assignment）</a></h3> + +<p>指数赋值运算符使一个变量为底数、以右值为指数的指数运算（乘方）结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "算术运算符", "#Exponentiation", 1)}}。</p> + +<h4 id="语法_7">语法</h4> + +<pre class="syntaxbox"><strong>语法:</strong> x **= y +<strong>含义:</strong> x = x ** y +</pre> + +<h4 id="示例_7">示例</h4> + +<pre class="brush: js">// Assuming the following variable +// bar = 5 + +bar **= 2 // 25 +bar **= 'foo' // NaN</pre> + +<h3 id="左移赋值（Left_shift_assignment）"><a name="Left_shift_assignment">左移赋值（Left shift assignment）</a></h3> + +<p>左移赋值运算符使变量向左移动指定位数的比特位，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}。</p> + +<h4 id="语法_8">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x <<= y +<strong>Meaning:</strong> x = x << y +</pre> + +<h4 id="示例_8">示例</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="右移赋值（Right_shift_assignment）"><a name="Right_shift_assignment">右移赋值（Right shift assignment）</a></h3> + +<p>右移赋值运算符使变量向右移指定位数的比特位，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}。</p> + +<h4 id="语法_9">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x >>= y +<strong>Meaning:</strong> x = x >> y +</pre> + +<h4 id="示例_9">示例</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="无符号右移赋值（Unsigned_right_shift_assignment）"><a name="Unsigned_right_shift_assignment">无符号右移赋值（Unsigned right shift assignment）</a></h3> + +<p>无符号右移赋值运算符向右移动指定数量的比特位，然后把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}。</p> + +<h4 id="语法_10">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x >>>= y +<strong>Meaning:</strong> x = x >>> y +</pre> + +<h4 id="示例_10">示例</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="按位与赋值（Bitwise_AND_assignment）"><a name="Bitwise_AND_assignment">按位与赋值（Bitwise AND assignment）</a></h3> + +<p>按位与赋值运算符使用两个操作值的二进制表示，执行按位与运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}。</p> + +<h4 id="语法_11">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x &= y +<strong>Meaning:</strong> x = x & y +</pre> + +<h4 id="示例_11">示例</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="按位异或赋值（Bitwise_XOR_assignment）"><a name="Bitwise_XOR_assignment">按位异或赋值（Bitwise XOR assignment）</a></h3> + +<p>按位异或赋值运算符使用两个操作值的二进制表示，执行二进制异或运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}。</p> + +<h4 id="语法_12">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x ^= y +<strong>Meaning:</strong> x = x ^ y +</pre> + +<h4 id="示例_12">示例</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="按位或赋值（Bitwise_OR_assignment）"><a name="Bitwise_OR_assignment">按位或赋值（Bitwise OR assignment）</a></h3> + +<p>按位或赋值运算符使用两个操作值的二进制表示，执行按位或运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}。</p> + +<h4 id="语法_13">语法</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x |= y +<strong>Meaning:</strong> x = x | y +</pre> + +<h4 id="示例_13">示例</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="示例_14">示例</h2> + +<h3 id="带有赋值运算符的左值（Left_operand）">带有赋值运算符的左值（Left operand）</h3> + +<p>在某些不常见的情况下，赋值运算符（如<code> x += y</code>）并不等同于表达式（ <code>x = x + y</code>）。当一个赋值运算符的左值包含有一个赋值运算符时，左值只会被求值一次。例如：</p> + +<pre class="brush: js">a[i++] += 5 // i 执行一次求值 +a[i++] = a[i++] + 5 // i 执行两次求值 +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">该兼容表是由结构化数据生成。如果你愿意贡献数据，请克隆仓库 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并提交 pull request.</div> + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">算术运算符</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..82b19641ea --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,240 @@ +--- +title: 逻辑运算符 +slug: >- + conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca +tags: + - JavaScript + - 操作符 + - 逻辑 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>逻辑运算符通常用于{{jsxref("Boolean","布尔")}}型（逻辑）值。这种情况下，它们返回一个布尔值。然而，<code>&&</code> 和 <code>||</code> 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，它们也就会返回一个非布尔型值。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="描述">描述</h2> + +<p>逻辑运算符如下表所示 (其中<code><em>expr</em></code>可能是任何一种<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Data_structure">类型</a>, 不一定是布尔值):</p> + +<table class="fullwidth-table syntaxbox"> + <tbody> + <tr> + <th>运算符</th> + <th>语法</th> + <th>说明</th> + </tr> + <tr> + <td>逻辑与，AND（<code>&&</code>）</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>2</strong></code>；否则，返回 <code>expr<strong>1</strong></code>。</td> + </tr> + <tr> + <td>逻辑或，OR（<code>||</code>）</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>1</strong></code>；否则，返回 <code>expr<strong>2</strong></code>。</td> + </tr> + <tr> + <td>逻辑非，NOT（<code>!</code>）</td> + <td><code>!<em>expr</em></code></td> + <td>若 <code>expr</code> 可转换为 <code>true</code>，则返回 <code>false</code>；否则，返回 <code>true</code>。</td> + </tr> + </tbody> +</table> + +<p>如果一个值可以被转换为 <code>true</code>，那么这个值就是所谓的 {{Glossary("truthy")}}，如果可以被转换为 <code>false</code>，那么这个值就是所谓的 {{Glossary("falsy")}}。</p> + +<p>会被转换为 <code>false</code> 的表达式有：</p> + +<ul> + <li><code>null</code>；</li> + <li><code>NaN</code>；</li> + <li><code>0</code>；</li> + <li>空字符串（<code>""</code> or <code>''</code> or <code>``</code>）；</li> + <li><code>undefined</code>。</li> +</ul> + +<p>尽管 <code>&&</code> 和 <code>||</code> 运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值（或者表达式）转换为布尔值，请使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#%E9%80%BB%E8%BE%91%E9%9D%9E%EF%BC%88!%EF%BC%89">双重非运算符</a>（即<code>!!</code>）或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>构造函数。</p> + +<h3 id="短路计算">短路计算</h3> + +<p>由于逻辑表达式的运算顺序是从左到右，也可以用以下规则进行"短路"计算：</p> + +<ul> + <li><code>(some falsy expression) && (<em>expr)</em></code> 短路计算的结果为假。</li> + <li><code>(some truthy expression) || <em>(expr)</em></code> 短路计算的结果为真。</li> +</ul> + +<p>短路意味着上述表达式中的expr部分<strong>不会被执行</strong>，因此expr的任何副作用都不会生效（举个例子，如果expr是一次函数调用，这次调用就不会发生）。造成这种现象的原因是，整个表达式的值在第一个操作数被计算后已经确定了。看一个例子：</p> + +<pre class="brush: js">function A(){ console.log('called A'); return false; } +function B(){ console.log('called B'); return true; } + +console.log( A() && B() ); +// logs "called A" due to the function call, +// then logs false (which is the resulting value of the operator) + +console.log( B() || A() ); +// logs "called B" due to the function call, +// then logs true (which is the resulting value of the operator) +</pre> + +<h3 id="Operators_precedence">Operators precedence</h3> + +<p>请注意，由于<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级</a>的存在，下面的表达式的结果却不相同。右侧被小括号括起来的操作变成了独立的表达式。</p> + +<pre class="brush: js">false && true || true // 结果为 true +false && (true || true) // 结果为 false +</pre> + +<h3 id="逻辑与（）">逻辑与（<code>&&</code>）</h3> + +<p>下面的代码是 && (逻辑与) 运算符的示例.</p> + +<pre class="brush: js">a1 = true && true // t && t 返回 true +a2 = true && false // t && f 返回 false +a3 = false && true // f && t 返回 false +a4 = false && (3 == 4) // f && f 返回 false +a5 = "Cat" && "Dog" // t && t 返回 "Dog" +a6 = false && "Cat" // f && t 返回 false +a7 = "Cat" && false // t && f 返回 false +a8 = '' && false // f && f 返回 "" +a9 = false && '' // f && f 返回 false +</pre> + +<h3 id="逻辑或（）">逻辑或（<code>||</code>）</h3> + +<p>下面的代码是 || (逻辑或) 运算符的示例。</p> + +<pre class="brush: js">o1 = true || true // t || t 返回 true +o2 = false || true // f || t 返回 true +o3 = true || false // t || f 返回 true +o4 = false || (3 == 4) // f || f 返回 false +o5 = "Cat" || "Dog" // t || t 返回 "Cat" +o6 = false || "Cat" // f || t 返回 "Cat" +o7 = "Cat" || false // t || f 返回 "Cat" +o8 = '' || false // f || f 返回 false +o9 = false || '' // f || f 返回 "" +</pre> + +<h3 id="逻辑非（!）">逻辑非（<code>!</code>）</h3> + +<p>下面的代码是 <code>!</code> (逻辑非) 运算符的示例.</p> + +<pre class="brush: js">n1 = !true // !t 返回 false +n2 = !false // !f 返回 true +n3 = !'' // !f 返回 true +n4 = !'Cat' // !t 返回 false +</pre> + +<h4 id="双重非（!!）运算符">双重非（<code>!!</code>）运算符</h4> + +<p>可能使用双重非运算符的一个场景，是显式地将任意值强制转换为其对应的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B">布尔值</a>。这种转换是基于被转换值的 "truthyness" 和 "falsyness"的（参见 {{Glossary("truthy")}} 和 {{Glossary("falsy")}}）。</p> + +<p>同样的转换可以通过 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 函数完成。</p> + +<pre class="brush: js syntaxbox">n1 = !!true // !!truthy 返回 true +n2 = !!{} // !!truthy 返回 true: <strong>任何</strong> 对象都是 truthy 的… +n3 = !!(new Boolean(false)) // …甚至 <em>.valueOf()</em> 返回 false 的布尔值对象也是！ +n4 = !!false // !!falsy 返回 false +n5 = !!"" // !!falsy 返回 false +n6 = !!Boolean(false) // !!falsy 返回 false +</pre> + +<h3 id="布尔值转换规则">布尔值转换规则</h3> + +<h4 id="将_AND_转换为_OR">将 AND 转换为 OR</h4> + +<p>以下涉及<strong>布尔</strong>运算的操作：</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>总是等于：</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="将_OR_转换为_AND">将 OR 转换为 AND</h4> + +<p>以下涉及<strong>布尔</strong>运算的操作：</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>总是等于：</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h3 id="删除嵌套的小括号">删除嵌套的小括号</h3> + +<p>由于逻辑表达式是从左往右计算的，所以，通常可以按照下面的规则删除小括号。</p> + +<h4 id="删除嵌套的_AND">删除嵌套的 AND</h4> + +<p>以下涉及<strong>布尔</strong>运算的操作：</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>总是等于：</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="删除嵌套的_OR">删除嵌套的 OR</h4> + +<p>以下涉及<strong>布尔</strong>运算的操作：</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>总是等于：</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">按位操作符</a></li> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">布尔值</a></li> + <li><a href="/zh-CN/docs/Glossary/Truthy">Truthy</a></li> + <li><a href="/zh-CN/docs/Glossary/Falsy">Falsy</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html b/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..21d8c25aa3 --- /dev/null +++ b/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,121 @@ +--- +title: default +slug: conflicting/Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Keyword +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Reference/Statements/default +--- +<div>{{jsSidebar("Statements")}}</div> + +<div></div> + +<p><strong>default 关键字</strong>可以在 JavaScript 的两种情况下使用：在 {{jsxref("Statements/switch", "switch")}} ，或 {{jsxref("Statements/export", "export")}} 中。</p> + +<h2 id="语法">语法</h2> + +<p>在{{jsxref("Statements/switch", "switch")}} 语句中使用:</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + //当表达式的值和value1匹配执行这里的语句 + [break;] + default: + //当表达式的值没有匹配，执行这里的语句 + [break;] +}</pre> + +<p>在{{jsxref("Statements/export", "export")}} 中使用：</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="描述">描述</h2> + +<p>更多细节，参见</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}} 语句和</li> + <li>{{jsxref("Statements/export", "export")}} 语句页面。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="在switch语句中使用default">在<code>switch</code>语句中使用<code>default</code></h3> + +<p>在以下示例中，如果<code>expr</code>为“Oranges”或“Apples”，程序将匹配“Oranges”或“Apples”的值并执行相应的声明。在任何其它情况下，<code>default</code>关键字将执行关联的语句。</p> + +<pre class="brush: js">switch (expr) { + case "Oranges": + console.log("Oranges are $0.59 a pound."); + break; + case "Apples": + console.log("Apples are $0.32 a pound."); + break; + default: + console.log("Sorry, we are out of " + expr + "."); +}</pre> + +<h3 id="在export语句中使用default">在<code>export</code>语句中使用<code>default</code></h3> + +<p>如果要导出单个值或需要模块的回调值，则可以使用默认导出： </p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +} +export default cube; +</pre> + +<p>然后，在另一个脚本中，默认导出将直接被导入：</p> + +<pre class="brush: js">// module "my-module.js" +import myFunction from 'my-module'; +console.log(myFunction(3)); // 27 +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/zh-cn/conflicting/web/media/formats/index.html b/files/zh-cn/conflicting/web/media/formats/index.html new file mode 100644 index 0000000000..db84bd92bd --- /dev/null +++ b/files/zh-cn/conflicting/web/media/formats/index.html @@ -0,0 +1,564 @@ +--- +title: HTML的媒体支持:audio和video元素 +slug: conflicting/Web/Media/Formats +tags: + - HTML Media Video Audio +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +original_slug: Web/HTML/Supported_media_formats +--- +<p><span class="seoSummary"> {{HTMLElement("audio")}} 和 {{HTMLElement("video")}}是浏览器内置的播放音频或视频的元素;</span>视频和音频编解码器用来处理视频和音频，不同的编解码器提供不同级别的压缩率和分辨率；一个容器封装格式（多媒体容器格式）用来存储和传输编码后的视频和音频（如果视频带有音轨则同时；编解码器和多媒体容器格式有非常多的组合；尽管只有很少部分和WEB相关；<br> + <br> + 由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；WEB上的媒体格式领域受到在包括美国、欧盟在内的许多国家的专利法的保护和制约；本文将讨论了不同的编解码器和封装格式在WEB上的各种组合，包括在桌面设备和其他设备上的浏览器的支持情况。</p> + +<p> 想要在HTML5中播放视频，并且主流浏览器的最新版本中支持良好；可以使用WebM 和 MPEG H.264 AAC 编码格式；像下面一样使用{{HTMLElement("source")}}元素</p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264. + <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> +</video> +</pre> + +<h2 id="sect1"></h2> + +<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> + +<p>Ogg容器格式使用Theora视频编解码器和 Vorbis音频编解码器。在的桌面和移动端的Gecko(Firefox)，Chrome和Opera；Safari（非IOS）可以通过添加扩展支持；但是不支持IE</p> + +<p>WebM在可选的情况下是优选项；因为它能提供更高的压缩比，并且被更多的浏览器所支持；而Ogg容器格式主要用于支持低版本的浏览器（比如： Firefox 3.5/3.6就不支持WebM，但是支持Ogg）</p> + +<p>Ogg的授权情况和WebM类似</p> + +<p>Gecko提供下面3种Ogg文件格式的MIME type：</p> + +<p><strong>audio/ogg</strong></p> + +<p>一个只包含音频的Ogg文件</p> + +<p><strong>video/ogg</strong></p> + +<p>一个包含视频或音频的Ogg文件</p> + +<p><strong>application/ogg</strong></p> + +<p>一个不指定内容的Ogg文件，当你不知道内容的时候可以选择</p> + +<h2 id="Ogg_Opus">Ogg Opus</h2> + +<p>Ogg容器可以通过使用<a href="http://www.opus-codec.org/">Opus codec</a>包含音频编解码器；用来支持Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 或更新的版本</p> + +<h2 id="Ogg_FLAC">Ogg FLAC</h2> + +<p>Ogg容器可以通过使用<a href="https://xiph.org/flac/index.html">FLAC codec</a>包含音频编解码器；用来支持Gecko 51.0 {{geckoRelease("51.0")}} 或更新的版本, 但只适用于桌面浏览器</p> + +<h2 id="MP4_FLAC">MP4 FLAC</h2> + +<p>从Firefox 51开始，你就可以使用FLAC编解码器播放MP4了，不管你有没有安装 <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">MediaSource Extensions</a>和DRM 扩展支持。</p> + +<h2 id="MP3">MP3</h2> + +<p>MP3 audio 编码对应浏览器<audio>的支持。其中Firefox/Firefox for Android/Firefox OS需要操作系统本身提供了MP3的解码器；而IE，Chrome，Safari则原生支持</p> + +<h2 id="WAVE_PCM">WAVE PCM</h2> + +<p>WAVE容器使用PCM音频编解码器；桌面和移动Gecko (Firefox) a、 Safari都支持，WAVE容器中的文件后缀为 ".wav"。</p> + +<div class="note">See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> + +<p>Gecko提供下面4种WAVE文件格式的MIME type：</p> + +<ul> + <li><code>audio/wave</code> (preferred; does not work in Chrome)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<h2 id="FLAC">FLAC</h2> + +<p>FLAC容器格式使用 FLAC 音频编解码器 (<a href="https://xiph.org/flac/index.html">FLAC codec</a>)；桌面端受到Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)的支持，文件后缀为 “.flac”</p> + +<p>Gecko提供下面4种FLAC文件格式的MIME type：</p> + +<ul> + <li><code>audio/flac</code> (preferred)</li> + <li><code>audio/x-flac</code></li> +</ul> + +<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> + +<p>媒体源扩展(MSE)是一个W3C工作草案，计划扩展{{domxref("HTMLMediaElement")}}以允许JavaScript生成用于重放的媒体流。 允许JavaScript生成流以适应各种应用场景，如自适应流和时移实时流。 MSE支持仅限于MP4和WebM容器，但编解码器支持因底层平台而异。</p> + +<p>例如：可以使用JavaScript实现MPEG-DASH，同时将解码解压缩到MSE。<br> + <br> + For example, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE</a>.</p> + +<div class="note"> +<p><strong>时间位移(Time shifting)</strong> 功能主要是将即时内容，录制在存储器上，可以暂时离开，一定时间回来后，可以从离开的时间通过内部的重播。</p> +</div> + +<h2 id="浏览器兼容情况">浏览器兼容情况</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>10.60</td> + <td>3.1<sup>[1]</sup></td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis/Opus in WebM via MSE</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("36.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>10.50</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td>{{CompatVersionUnknown}}<sup>[6]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[7]</sup></td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>27.0</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: FLAC</td> + <td>56.0</td> + <td>{{CompatGeckoDesktop("51")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11</td> + </tr> + <tr> + <td><code><audio></code>: FLAC in Ogg</td> + <td>56.0</td> + <td>{{CompatGeckoDesktop("51")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0<sup>[8]</sup></td> + <td>10.60</td> + <td>3.1<sup>[9]</sup></td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>29.0</td> + <td>{{CompatGeckoDesktop("28.0")}}<sup>[36]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: Streaming WebM via MSE</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("42.0")}}<sup>[35]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>10.50</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[11]</sup></td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><video></code>: FLAC in MP4</td> + <td>62.0</td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>any other format</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.1<sup>[12]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Opera Mini</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(29)}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}<sup>[13]</sup></td> + <td>3.2</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[14]</sup></td> + <td>3.2</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}<sup>[15]</sup></td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis in WebM via MSE</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}<sup>[16]</sup></td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[17]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[18]</sup></td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[19]</sup></td> + <td>3.2</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[20]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[21]</sup></td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>{{CompatNo}}</td> + <td>71.0</td> + <td>24.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(29)}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatVersionUnknown}}<sup>[24]</sup></td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: Streaming WebM via MSE</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("42.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[25]</sup></td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td>{{CompatVersionUnknown}}<sup>[26]</sup></td> + <td>{{CompatChrome(29)}}</td> + <td>24.0<sup>[33]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>10.0</td> + <td>16.0<sup>[28]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[29]</sup></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td>{{CompatVersionUnknown}}<sup>[30]</sup></td> + <td>{{CompatChrome(29)}}</td> + <td>24.0<sup>[34]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[31]</sup></td> + <td>10.0</td> + <td>16.0<sup>[28]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[32]</sup></td> + <td>3.2</td> + </tr> + <tr> + <td><code><video></code>: FLAC in MP4</td> + <td>{{CompatUnknown}}</td> + <td>62.0</td> + <td>{{CompatGeckoMobile(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>any other format</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Must be installed separately.</p> + +<p>[2] In Nightly/Dev Edition only.</p> + +<p>[3] Only on platforms that don't support H.264.</p> + +<p>[4] AAC is only supported in the MP4 container. Not in Chromium.</p> + +<p>[5] To avoid patent issues, support for MP3 is not built directly into Firefox. Instead it relies on support from the OS. Firefox supports this format on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> + +<p>[6] Main only. Not in Chromium. AAC is only supported in the MP4 container.</p> + +<p>[7] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> + +<p>[8] <a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/">WebM MF</a>.</p> + +<p>[9] Must be installed separately, e.g. <a class="external" href="http://perian.org/">Perian</a>.</p> + +<p>[10] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> + +<p>[11] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4, H.264 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> + +<p>[12] Plays all formats available via QuickTime.</p> + +<p>[13] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[14] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[15] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[16] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[17] To avoid patent issues, support for MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware.</p> + +<p>[18] To avoid patent issues, support for MP3 is not built directly into Firefox OS. Instead it relies on support from the OS or hardware.</p> + +<p>[19] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[20] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[21] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[22] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats. AAC is only supported in the MP4 container.</p> + +<p>[23] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[24] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[25] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[26] To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</p> + +<p>[27] In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.<br> + To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android) and Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[28] Partial since 11.0. AAC is only supported in the MP4 container.</p> + +<p>[29] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> + +<p>[30] AAC is only supported in the MP4 container. To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</p> + +<p>[31] In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed. AAC is only supported in the MP4 container.<br> + To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[32] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats. AAC is only supported in the MP4 container.</p> + +<p>[33] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[34] To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> + +<p>[35] VP8/VP9 video codecs are only available in MSE when H.264 hardware decoders are not available. Checking for availability via MediaSource.isTypeSupported() is recommended.</p> + +<p>[36] Starting in Firefox 46, when attempting to initiate a WebRTC call using {{domxref("RTCPeerConnection.createOffer()")}} uses VP9 by default; in the past, VP8 was the default video format.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Using audio and video in Firefox</a></li> + <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li>{{HTMLElement("video")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..aa326758ce --- /dev/null +++ b/files/zh-cn/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,50 @@ +--- +title: 响应式设计 +slug: conflicting/Web/Progressive_web_apps +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Responsive_design +--- +<p>在解决对桌面和移动环境开发网站这个问题上，与<a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">分离网站</a>的方法相反，一种相对较新（其实相当<a class="external" href="http://www.alistapart.com/articles/dao/">古老</a>）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为<a class="external" href="http://www.alistapart.com/">A List Apart</a>所写的文章中提出的，也就是我们所熟知的<a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">响应式设计</a>。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。</p> +<h2 id="优势">优势</h2> +<p>尽管一开始这种方法并不是为了创建移动端网站而提出的，但在近一段时间以来，作为分离式移动端网站的替代者，响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。</p> +<ol> + <li>因为无需为不同的设备维护不同的网站，这种方式节省了时间和金钱。</li> + <li>响应式设计为每一个页面提供了一个单独且独有的URL。</li> + <li>社会化分享统计（Facebook Likes, Tweets, +1 on Google plus）也不会割离开，因为移动端和桌面端使用的都是一个唯一的URL。</li> + <li>响应式设计无需考虑用户代理的检测。</li> +</ol> +<p>这一方法有着许多非常好的方面。因为其不需要进行用户代理检测，相比于分离式网站方法，响应式设计更加具有韧性并经得起未来发展的考验。</p> +<h2 id="弊端">弊端</h2> +<p>当然，这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整，所以变化的内容要尽可能的最少。一般来说，当你尝试编写两组不同的Javascript来操作同一个DOM时，事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。</p> +<p>如果你的网站还没有支持<a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">弹性布局</a>，那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是，这也有可能因祸得福。让你的网站成为响应式的设计，可能是一个升级和整理网站CSS的好机会。</p> +<p>最后，由于增加了脚本和样式的代码量，响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源，但性能的下降是无法避免的。</p> +<h2 id="何时选择响应式设计">何时选择响应式设计</h2> +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>正如上面所提到的，因为内容的改变很困难，当你使用响应式设计的时候，你无法给予用户一个有着显著区别的移动端体验，除非你大幅地增加代码的复杂度。也就是说，如果网站的桌面端和移动端内容非常相似，那么响应式设计就是一个很好的选择。那些以文档为中心的网站，他们在不同的设备上的主要用途都不会改变，比如一个产品页面，对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面！</p> +<h2 id="举例">举例</h2> +<p>尽管它还没有像分离式网站那么流行，但每天都有很多网站开始应用这项技术。幸运的是，因为所有的代码都是在客户端的，如果你想了解一个网站是如何实现这项技术的，只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子：</p> +<ul> + <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – 我最喜欢的一个自适应设计，在上面也有图片展示！</li> + <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 另一篇很好的文章，上面有各种例子的链接。</li> + <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> +<p>尽管是一个相对较新的方法，响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站，通常值得<a class="external" href="http://www.lukew.com/ff/entry.asp?1117">先创建一个小屏幕的设计</a>，使得移动端的限制因素在一开始设计的时候就被考虑到。并且，这样更利于为你的样式使用渐进增强的技术，而不是使用Media Queries来隐藏已有网站中的元素。这样的话，那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看<a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">这里</a>。</p> +<h2 id="开发移动网站的途径">开发移动网站的途径</h2> +<p>想了解移动平台开发的相关背景和其他方法，请参看以下文章。</p> +<ul> + <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">友好型移动设计是什么概念?</a></li> + <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Hybrid approach">独立网站</a></li> + <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">复合方法</a></li> + <li><a href="/en/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design" title="en/Web development/Mobile/Hybrid approach">响应式设计 VS. 自适应设计</a></li> +</ul> +<h2 id="参考">参考</h2> +<ul> + <li>其他<a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">自适应网站设计</a>相关资料</li> +</ul> +<div class="originaldocinfo"> + <font face="Georgia, Times, Times New Roman, serif" size="3"><b>原稿信息</b></font><br> + <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p> +</div> +<p> </p> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..a84a3e5421 --- /dev/null +++ b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,59 @@ +--- +title: 渐进式webApp优势 +slug: conflicting/Web/Progressive_web_apps/Introduction +translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications +translation_of_original: Web/Progressive_web_apps/Advantages +original_slug: Web/Progressive_web_apps/优势 +--- +<p class="summary">以下是渐进式webApp所有的优势清单</p> + +<h2 id="Discoverable">Discoverable<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.</p> + +<p>Some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like <a href="http://ogp.me/">Open Graph</a>, which provides a format for specifying similar metadata in the HTML <code><head></code> using meta tags.</p> + +<p>The relevant web standard here is the <a href="/en-US/docs/Web/Manifest">Web app manifest</a>, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.</p> + +<ul> +</ul> + +<h2 id="Installable">Installable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.</p> + +<p>Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen</a>.</p> + +<h2 id="Linkable">Linkable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.</p> + +<h2 id="Network_independent">Network independent<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:</p> + +<ul> + <li>Revisit a site and get its contents even if no network is available.</li> + <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li> + <li>Control what is shown to the user in situations where there is no connectivity.</li> +</ul> + +<p>This is achieved by a combination of technologies — <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> to control page requests (for example storing them offline), the <a href="/en-US/docs/Web/API/Cache">Cache API</a> for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store application data offline.</p> + +<h2 id="Progressive">Progressive<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as <a href="/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>.</p> + +<h2 id="Re-engageable">Re-engageable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> for controlling pages, the <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> for sending updates straight from server to app via a service worker, and the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> for generating system notifications to help engage users when they're not in the browser.</p> + +<h2 id="Responsive">Responsive<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.</p> + +<h2 id="Safe">Safe<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> + +<p>The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (<a href="https://twitter.com/andreasbovens/status/926965095296651264">example</a>).</p> + +<p> </p> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html new file mode 100644 index 0000000000..be5d77a388 --- /dev/null +++ b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -0,0 +1,80 @@ +--- +title: Responsive design +slug: >- + conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +tags: + - Media Queries + - PWA + - Progressive web apps + - Responsive web design + - viewport +translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +translation_of_original: Web/Progressive_web_apps/Responsive +original_slug: Web/Progressive_web_apps/Responsive +--- +<div class="column-container summary"> +<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div> +</div> + +<h2 id="核心指南">核心指南</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt> + <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd> + <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt> + <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd> +</dl> + +<h2 id="技术">技术</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technology</th> + <th scope="col">Description</th> + <th scope="col">Support summary</th> + <th scope="col">Latest spec</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td> + <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td> + <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td> + <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td> + <td>Controls viewport settings, primarily on mobile devices.</td> + <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br> + Viewport meta tag: Widespread across modern mobile devices</td> + <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + <td>A very useful CSS feature for creating flexible, responsive layouts.</td> + <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td> + <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td> + </tr> + </tbody> +</table> + +<h2 id="工具">工具</h2> + +<dl> + <dt><a href="https://modernizr.com/">Modernizr</a></dt> + <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd> + <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt> + <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt> + <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd> + <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt> + <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd> +</dl> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html new file mode 100644 index 0000000000..5c0b464a8c --- /dev/null +++ b/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html @@ -0,0 +1,96 @@ +--- +title: 网络独立 +slug: conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f +tags: + - Application Shell + - IndexedDB + - PWA + - Progressive web apps + - Service Workers + - Web Storage + - localStorage +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Network_independent +original_slug: Web/Progressive_web_apps/Network_independent +--- +<div class="column-container summary"> +<div class="column-11">当网络不可靠，甚至不存在时，现代网络应用程序仍可以工作。没有更多的空白连接错误页面或恐龙穿过沙漠。除了离线高速缓存和服务工作者之外，UI和内容之间的一个明确的分隔可让您存储应用程序的数据和核心资产，以备将来使用。</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div> +</div> + +<p>The basic ideas behind network independence are to be able to:</p> + +<ul> + <li>Revisit a site and get its contents even if no network is available.</li> + <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li> + <li>Control what is shown to the user in situations where there is no connectivity.</li> +</ul> + +<h2 id="核心指南">核心指南</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt> + <dd>A simple guide for those new to the Service Worker API.</dd> + <dt><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></dt> + <dd>The basics of IndexedDB, explained in detail.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></dt> + <dd>The Web storage API made simple.</dd> + <dt><a href="https://developers.google.com/web/updates/2015/11/app-shell">Instant Loading Web Apps with An Application Shell Architecture</a></dt> + <dd>A guide to using the App Shell coding pattern to create apps that load quickly.</dd> +</dl> + +<h2 id="技术">技术</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术</th> + <th scope="col">描述</th> + <th scope="col">支持概览</th> + <th scope="col">最新规范</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td> + <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td> + <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td> + <td>{{SpecName('Service Workers')}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></td> + <td>A transactional database system that allows complex client-side data storage to be controlled via JavaScript.</td> + <td>Widespread across modern browsers (<a href="/en-US/docs/Web/API/IndexedDB_API#Browser_compatibility">more detail</a>)</td> + <td>{{SpecName('IndexedDB')}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a></td> + <td>A simple API for storing name-value pairs on the client-side.</td> + <td>Widespread (<a href="/en-US/docs/Web/API/Web_Storage_API#Browser_compatibility">more detail</a>)</td> + <td>{{SpecName('Web Storage')}}</td> + </tr> + </tbody> +</table> + +<h2 id="工具">工具</h2> + +<dl> + <dt><a href="http://mozilla.github.io/localForage/">localForage</a></dt> + <dd>A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.</dd> + <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> + <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd> + <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt> + <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd> + <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> + <dd>A node module to generate service worker code that will precache specific resources.</dd> + <dt><a href="https://www.talater.com/upup/">upup</a></dt> + <dd>A tiny script that makes sure your site is always there for your users.</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt> + <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd> +</dl> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html new file mode 100644 index 0000000000..8e7ebe12ef --- /dev/null +++ b/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html @@ -0,0 +1,80 @@ +--- +title: Re-engageable +slug: conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 +tags: + - Modern web apps + - Notifications API + - Progressive web apps + - Push API + - Service Workers +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Re-engageable +original_slug: Web/Progressive_web_apps/Re-engageable +--- +<div class="column-container summary"> +<div class="column-11">原生平台一个主要优势是，用户可以轻松通过更新或加载新内容，即使用户没有正在查看应用程序或者使用他们的设备。现在的Web应用程序现在也可以使用Web Push API等技术实现这样的功能。</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div> +</div> + +<h2 id="核心指南">核心指南</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt> + <dd>A simple guide for those new to the Service Worker API.</dd> + <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></dt> + <dd>Learn the essentials behind the Web Push API.</dd> + <dt><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt> + <dd>Web notifications in a nutshell.</dd> +</dl> + +<h2 id="技术">技术</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术</th> + <th scope="col">描述</th> + <th scope="col">浏览器支持</th> + <th scope="col">最新规范</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td> + <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td> + <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td> + <td>{{SpecName('Service Workers')}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/Push_API">Push API</a></td> + <td>When subscribed to, the push service provides an endpoint that can be used by a server to send a push message to a web app under the control of a particular service worker.</td> + <td>Experimental: chrome and Firefox (<a href="/en-US/docs/Web/API/Push_API#Browser_Compatibility">more detail</a>)</td> + <td>{{SpecName("Push API")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></td> + <td>Fires system notifications directly from web applications.</td> + <td>Widespreadin modern browsers (<a href="/en-US/docs/Web/API/Notifications_API#Browser_compatibility">more detail</a>)</td> + <td>{{SpecName('Web Notifications')}}</td> + </tr> + </tbody> +</table> + +<h2 id="工具">工具</h2> + +<dl> + <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> + <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd> + <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt> + <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd> + <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> + <dd>A node module to generate service worker code that will precache specific resources.</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt> + <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd> +</dl> diff --git a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html new file mode 100644 index 0000000000..2037b78ce1 --- /dev/null +++ b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html @@ -0,0 +1,92 @@ +--- +title: 影子DOM（Shadow DOM） +slug: conflicting/Web/Web_Components/Using_shadow_DOM +tags: + - DocumentFragment + - React + - Virtual DOM + - Web Components + - shadow dom +translation_of: Web/Web_Components/Using_shadow_DOM +translation_of_original: Web/Web_Components/Shadow_DOM +original_slug: Web/Web_Components/影子_DOM +--- +<p>{{ draft }}</p> + +<p><strong>Shadow DOM </strong>为<a href="/zh-CN/docs/Web/Web_Components">Web组件</a>中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。</p> + +<p>为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。</p> + +<h2 id="Shadow_DOM基础">Shadow DOM基础</h2> + +<p>Shadow DOM 必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如<div>、<p>；也可以是<a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a>如 <code><my-element>。</code> 如下例所示，使用 {{domxref("Element.<code>attachShadow</code>()")}} 来附加影子DOM：</p> + +<pre class="brush: html"><html> + <head></head> + <body> + <p id="hostElement"></p> + <script> + // create shadow DOM on the <p> element above + var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; + </script> + </body> +</html></pre> + +<p>上例中给一个没有内容的 <p> 元素添加了影子DOM。显示没有变化。接下来，同样在上例中加入下列代码，可以在影子DOM中插入文字，并将在浏览器中显示：</p> + +<pre class="brush: js" style="font-size: 14px;">shadow.innerHTML = '<p>Here is some new text</p>';</pre> + +<h3 id="Shadow_DOM_样式化">Shadow DOM 样式化</h3> + +<p><code><style></code> 元素可用来给影子DOM添加样式。 同样是上例，下列代码会将影子DOM中的文字变为红色：</p> + +<pre class="brush: html"><script> + // 创建 shadow DOM + var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; + // 给 shadow DOM 添加文字 + shadow.innerHTML = '<p>Here is some new text</p>'; + // 添加CSS，将文字变红 + shadow.innerHTML += '<style>p { color: red; }</style>'; +</script> +</pre> + +<h3 id="Shadow_DOM_的组成部分：">Shadow DOM 的组成部分：</h3> + +<p>影子DOM由下列部分组成：</p> + +<ul> + <li>{{domxref("Element.attachShadow()")}}</li> + <li>{{domxref("Element.getDestinationInsertionPoints()")}}</li> + <li>{{domxref("Element.shadowRoot")}}</li> + <li><a href="/en-US/docs/Web/HTML/Element/Content"><content> 元素</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/Shadow"><shadow> 元素</a></li> + <li>这些元素已从规范中移除： <content>, <element> 和<decorator></li> + <li>相关API接口：{{domxref("ShadowRoot")}}, {{domxref("HTMLTemplateElement")}} and {{domxref("HTMLSlotElement")}}</li> + <li>CSS 选择器： + <ul> + <li>伪类：{{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}</li> + <li>伪元素：{{cssxref("::shadow")}} and {{cssxref("::content")}}</li> + <li>组合器：<code>>>></code> (formerly <code>/deep/</code>)*</li> + </ul> + </li> +</ul> + +<p>* 将来<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=489954">子组合器有可能被弃用</a></p> + +<h2 id="Interfaces">Interfaces</h2> + +<p>{{domxref("ShadowRoot")}}</p> + +<p>DOM子树的根节点，和文档的主要DOM树分开渲染。</p> + +<p>{{domxref("HTMLTemplateElement")}}</p> + +<p>允许访问HTML元素的内容。</p> + +<p>{{domxref("HTMLSlotElement")}}</p> + +<p>定义一个槽的位置。</p> + +<p>{{domxref("DocumentOrShadowRoot")}}</p> + +<p>提供在文档和 Shadow 树之间共享的API。</p> diff --git a/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..4225c159b8 --- /dev/null +++ b/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,147 @@ +--- +title: Using XPath +slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript +tags: + - AJAX + - Code snippets + - DOM + - Extensions + - Transforming_XML_with_XSLT + - XPath + - 所有分类 +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +original_slug: Using_XPath +--- +<p> +</p><p><a href="cn/XPath">XPath</a> is a language for addressing parts of an XML document. It is a <a class="external" href="http://www.w3.org/TR/xpath">W3C recommendation</a>. +</p><p>This article describes Mozilla interfaces exposing XPath functionality to JavaScript code. These are described in <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a> (which is W3C Working Group Note at this moment). +</p><p>This article does not attempt teach XPath itself. If you're unfamiliar with this technology, please refer to <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a>. +</p><p>For a very simple XPath usage example, see: <a href="cn/Code_snippets/HTML_to_DOM#Using_a_hidden_XUL_iframe_.28complete_example.29">Code_snippets:HTML_to_DOM#Using_a_hidden_XUL_iframe_.28complete_example.29</a> +</p> +<h3 id="Node-specific_evaluator_function">Node-specific evaluator function</h3> +<p>The following function can be used to evaluate XPath expressions on given XML nodes. The first argument is a DOM node or Document object, while the second is a string defining an XPath expression. +</p> +<pre>// Evaluate an XPath expression aExpression against a given DOM node +// or Document object (aNode), returning the results as an array +// thanks wanderingstan at morethanwarm dot mail dot com for the +// initial work. +function evaluateXPath(aNode, aExpr) { + var xpe = new XPathEvaluator(); + var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? + aNode.documentElement : aNode.ownerDocument.documentElement); + var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); + var found = []; + var res; + while (res = result.iterateNext()) + found.push(res); + return found; +} +</pre> +<p>This function uses <code>new XPathEvaluator()</code>. That constructor is specific to Mozilla. Scripts used on a webpage which might be used by other browsers should instead replace the call to <code>new XPathEvaluator()</code> with the following fragment: +</p> +<pre> // XPathEvaluator is implemented on objects that implement Document + var xpe = aNode.ownerDocument || aNode; +</pre> +<p>In that case the creation of the <a href="cn/DOM/document.createNSResolver">XPathNSResolver</a> can be simplified as: +</p> +<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); +</pre> +<p>Note however that <code>createNSResolver</code> should only be used if you are sure the namespace prefixes in the XPath expression match those in the document you want to query (and that no default namespace is being used (though see <a href="cn/DOM/document.createNSResolver">DOM:document.createNSResolver</a> for a workaround)). Otherwise, you have to provide your own implementation of XPathNSResolver. +</p><p>If you are using <a href="cn/XMLHttpRequest">XMLHttpRequest</a> to read a local or remote XML file into a DOM tree (as described in <a href="cn/Parsing_and_serializing_XML">Parsing and serializing XML</a>), the first argument to <code>evaluateXPath()</code> should be <code>req.responseXML</code>. +</p> +<h4 id="Sample_usage">Sample usage</h4> +<p>Assume we have the following XML document (see also <a href="cn/How_to_Create_a_DOM_tree">How to Create a DOM tree</a> and <a href="cn/Parsing_and_serializing_XML">Parsing and serializing XML</a>): +</p> +<pre><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> +<p>You can now "query" the document with XPath expressions. Although walking the DOM tree can achieve similar results, using XPath expressions is much quicker and more powerful. If you can rely on <code>id</code> attributes, <code>document.getElementById()</code> is still powerful, but it's not nearly as powerful as XPath. Here are some examples. +</p> +<pre>// display the last names of all people in the doc +var results = evaluateXPath(people, "//person/@last-name"); +for (var i in results) + alert("Person #" + i + " has the last name " + results[i].value); + +// get the 2nd person node +results = evaluateXPath(people, "/people/person[2]"); + +// get all the person nodes that have addresses in denver +results = evaluateXPath(people, "//person[address/@city='denver']"); + +// get all the addresses that have "south" in the street name +results = evaluateXPath(people, "//address[contains(@street, 'south')]"); +alert(results.length); +</pre> +<h3 id="docEvaluateArray">docEvaluateArray</h3> +<p>The following is a simple utility function to get (ordered) XPath results into an array, when there is no special need for namespace resolvers, etc. It avoids the more complex syntax of <code><a href="cn/DOM/document.evaluate">document.evaluate()</a></code> for cases when it is not required as well as the need to use the special iterators on <code><a href="cn/XPathResult">XPathResult</a></code> (by returning an array instead). +</p> +<pre>// Example usage: +// var els = docEvaluateArray('//a'); +// alert(els[0].nodeName); // gives 'A' in HTML document with at least one link + +function docEvaluateArray (expr, doc, resolver) { + if (!doc) { + doc = document; + } + if (!resolver) { + resolver = null; + } + var result = doc.evaluate(expr, doc, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); + var a = []; + for(var i = 0; i < result.snapshotLength; i++) { + a[i] = result.snapshotItem(i); + } + return a; +} +</pre> +<h3 id="getXPathForElement">getXPathForElement</h3> +<p>The following function allows one to pass an element and an XML document to find a unique string XPath expression leading back to that element. +</p> +<pre>function getXPathForElement(el, xml) { + var xpath = ''; + var pos, tempitem2; + + while(el !== xml.documentElement) { + pos = 0; + tempitem2 = el; + while(tempitem2) { + if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) { // If it is ELEMENT_NODE of the same name + pos += 1; + } + tempitem2 = tempitem2.previousSibling; + } + + xpath = "*[name()='"+el.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']["+pos+']'+'/'+xpath; + + el = el.parentNode; + } + xpath = '/*'+"[name()='"+xml.documentElement.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']"+'/'+xpath; + xpath = xpath.replace(/\/$/, ''); + return xpath; +}</pre> +<h3 id="Resources">Resources</h3> +<ul><li> <a href="cn/XPath">XPath</a> +</li><li> <a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a> +</li><li> <a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a> +</li><li> <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum discussion on this topic</a> +</li><li> <a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - draft tutorial on using XPath from javascript +</li><li> <a class="link-https" href="https://sourceforge.net/projects/sarissa/">Sarissa</a> - Sarissa is a cross-browser ECMAScript library for client side XML manipulation, including loading XML from URLs or strings, performing XSLT transformations, XPath queries and more. Supported: Gecko (Mozilla, Firefox etc), IE, KHTML (Konqueror, Safari). If you're writing JavaScript that is used in both XUL applications and HTML pages, and the HTML pages may be viewed in non-Gecko-based applications (such as Internet Explorer, Opera, Konqueror, Safari), you should consider using Sarissa to parse and/or serialize XML. <i>Note:</i> Do not create a DOM object using <code>document.implementation.createDocument()</code> and then use Sarissa classes and methods to manipulate that object. It will not work. You must use Sarissa to create the initial DOM object. +</li></ul> +<h2 id="See_also">See also</h2> +<ul><li> <a href="cn/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "en": "en/Using_XPath", "ko": "ko/Using_XPath" } ) }} |