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

89 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">:radio Selector</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/selectors/">选择器</a> &gt; <a href="/category/selectors/form-selectors/">表单</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/selectors/">选择器</a> &gt; <a href="/category/selectors/jquery-selector-extensions/">jQuery 扩展</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/radio-selector/" target="_blank">:radio Selector</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry selector" id="radio1"><h2 class="section-title"><span>radio 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.0/">1.0</a></span>jQuery( ":radio" )</h4></li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>$(':radio')</code>等价于<code>$('[type=radio]')</code>。如同其他伪类选择器(那些以“:”开始),建议使用此类选择器时,跟在一个标签名或者其它选择器后面,默认使用了全局通配符选择器 "*"。换句话说<code>$(':radio')</code> 等同于 <code>$('*:radio')</code>,所以应该使用<code>$('input:radio')</code></p>
<p>要选择一个单选按钮相关的设置,你可以使用:<code>$('input[name=gender]:radio')</code></p>
</div>
<h3>Additional Notes其他注意事项:</h3>
<div class="longdesc"><ul>
<li>
因为<code>:radio</code> 是一个 jQuery 延伸出来的选择器并不是的CSS规范的一部分使用<code>:radio</code> 查询不能充分利用原生DOM提供的<code>querySelectorAll()</code> 方法来提高性能。为了当使用<code>:radio</code> 的时候在现代浏览器上获得更佳的性能首先使用纯CSS选择器选择元素然后使用<code>[type="radio"]</code>代替.
</li></ul></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">查找所有单选按钮。</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>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</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">textarea</span> <span class="rules">{ <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">25</span>px;</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> <span class="tag">&lt;<span class="title">form</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">value</span>=<span class="value">"Input Button"</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</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">input</span> <span class="attribute">type</span>=<span class="value">"file"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"hidden"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"image"</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">input</span> <span class="attribute">type</span>=<span class="value">"password"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">"asdf"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">"asdf"</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">input</span> <span class="attribute">type</span>=<span class="value">"reset"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</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">select</span>&gt;</span><span class="tag">&lt;<span class="title">option</span>&gt;</span>Option<span class="tag">&lt;<span class="title">option</span>/&gt;</span><span class="tag">&lt;/<span class="title">select</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">textarea</span>&gt;</span><span class="tag">&lt;/<span class="title">textarea</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">button</span>&gt;</span>Button<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">form</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">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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> input = $(<span class="string">"form input:radio"</span>)</code></div></div><div class="container"><div class="line"><code> .wrap(<span class="string">'&lt;span&gt;&lt;/span&gt;'</span>)</code></div></div><div class="container"><div class="line"><code> .parent()</code></div></div><div class="container"><div class="line"><code> .css({background:<span class="string">"yellow"</span>, border:<span class="string">"3px red solid"</span>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).text(<span class="string">"For this type jQuery found "</span> + input.length + <span class="string">"."</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"color"</span>, <span class="string">"red"</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).submit(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span> <span class="keyword">return</span> <span class="literal">false</span>; }); <span class="comment">// so it won't submit</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>