uTools-Manuals/docs/jQuery/lang-selector.html
2019-04-21 11:50:48 +08:00

83 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">:lang() Selector</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/selectors/">选择器</a> &gt; <a href="/category/selectors/basic-filter-selectors/">基础过滤</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/lang-selector/" target="_blank">:lang() Selector</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry selector" id="lang1"><h2 class="section-title"><span>lang selector</span></h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>选择指定语言的所有元素。</p>
<ul class="signatures"><li class="signature">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.9/">1.9</a></span>jQuery( ":lang(language)" )</h4>
<p class="argument"><strong>language: </strong>语言代码。</p>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>:lang</code>选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器<code>$("div:lang(en)")</code>将匹配<code>&lt;div lang="en"&gt;</code> and <code>&lt;div lang="en-us"&gt;</code>(和他们的后代<code>&lt;div&gt;</code>),但不包括<code>&lt;div lang="fr"&gt;</code></p>
<p>对于HTML元素语言值由<code>lang</code>属性决定,也可能由来自<code>meta</code>元素或HTTP头信息决定。</p>
<p>这种用法的进一步讨论可以在
<a href="http://www.w3.org/TR/css3-selectors/#lang-pseudo">W3C CSS规范</a>中找到。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">根据div的语言属性给他们着色。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">body</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">h3</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"> .<span class="number">25</span>em <span class="number">0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">1.5</span>em}</span></span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.usa</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#fff</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.usa</span> <span class="class">.usa</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#fff</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#000</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.usa</span> <span class="class">.usa</span> <span class="class">.usa</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#fff</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="class">.spain</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#ff0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.spain</span> <span class="class">.spain</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#ff0</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#f00</span>;</span></span> <span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">3</span>em;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.spain</span> <span class="class">.spain</span> <span class="class">.spain</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span>;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#ff0</span>;</span></span> <span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">1.5</span>em;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">h3</span>&gt;</span>USA<span class="tag">&lt;/<span class="title">h3</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">lang</span>=<span class="value">"en-us"</span>&gt;</span>red</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>white</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>and blue<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">h3</span>&gt;</span>España<span class="tag">&lt;/<span class="title">h3</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">lang</span>=<span class="value">"es-es"</span>&gt;</span>rojo</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>amarillo</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>y rojo<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"div:lang(en-us)"</span> ).addClass( <span class="string">"usa"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"div:lang(es-es)"</span> ).addClass( <span class="string">"spain"</span> );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>