jQuery 练习[二]: 获取对象(1) - 基本选择与层级
jQuery 练习[二]: 获取对象(1) - 基本选择与层级
涂孟超 发表于3年前
jQuery 练习[二]: 获取对象(1) - 基本选择与层级
  • 发表于 3年前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   


根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")
<div id="div1">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>

根据标签选择, 如: $("span")
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>

根据样式的类名选择, 如: $(".class1")
<div class="class1">AAA</div>
<div class="class2">BBB</div>
<div class="class1">CCC</div>

选择所有对象是: $("*")

可混合使用, 如: $("#btn2, .class1, span") [ 复制代码] &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src=&quot;http://code.jquery.com/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span1&lt;/span&gt; &lt;div&gt; &lt;button id=&quot;btn1&quot;&gt;button1&lt;/button&gt;&lt;br/&gt; &lt;button id=&quot;btn2&quot;&gt;button2&lt;/button&gt;&lt;br/&gt; &lt;/div&gt; &lt;div&gt; &lt;label class=&quot;class1&quot;&gt;label1&lt;/label&gt;&lt;br/&gt; &lt;label class=&quot;class2&quot;&gt;label2&lt;/label&gt;&lt;br/&gt; &lt;/div&gt; &lt;span&gt;span2&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; &lt;script&gt; //修改选择对象的 color 样式为 red $(&quot;#btn2, .class1, span&quot;).css(&quot;color&quot;, &quot;red&quot;); &lt;/script&gt;


可分层选择, 如: $(".class1 div label")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

如: $(".class1 span") 或 $(".class1").find("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"> <span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

只从子层中选择, 如: $(".class1 > span"); 如果没有中间的 > 会选择其下的所有符合条件的子孙对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

混合使用, 如: $("#id3 label, #id3 ~ span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他元素, 如: $("#id2").siblings()
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他 span, 如: $("#id2").siblings("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>



共有 人打赏支持
粉丝 13
博文 2004
码字总数 14107
×
涂孟超
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: