jQuery- 选择器

基本选择器

总结：用法和CSS选择器是一样的。

 

练习一：基本选择器练习

<div>

<ul>

<li id="slg">总司令官</li>

</ul>

<!-- 独立团 -->

<ul id="dlt">

<li class="tz">独立团团长-李云龙</li>

<li>政委</li>

<li class="wsy">卫生员</li>

<li>士兵</li>

<li class="hf">伙夫</li>

<li>士兵</li>

<li class="nj">士兵</li>

<li class="jjs">狙击手</li>

</ul>

<!-- 358团 -->

<ul id="t358">

<li class="tz">358团团长-楚云飞</li>

<li class="zw">政委</li>

<li class="wsy">卫生员</li>

<li>士兵</li>

<li class="nj">士兵</li>

<li>士兵</li>

<li class="hf">伙夫</li>

<li class="hf">伙夫</li>

<li class="jjs">狙击手</li>

</ul>

</div>

<div>

<p class="lbx">老百姓</p>

<p class="lbx">老百姓</p>

<p>老百姓</p>

<p>老百姓</p>

<p>老百姓</p>

<p>老百姓</p>

</div>

 

//抗日开始,action

//首先,司令官开始讲话

//因为司令官的官比较大一点,所以我要把他变得大一点

// id选择器

// 格式:$("#id")

// 作用:通过id来获取页面中的元素

$("#slg").css('fontSize',40)

 

//团长回去讲话

//团长官也比较大，要把团长也弄大一点，但是团长的官能大过司令嘛？所有要把团长弄第二大：类选择器

//格式：$(“.class”);

//作用：获取页面中的一类元素，通过class属性来获取

//jQuery中支持隐式迭代，迭代就是便利的意思

  $(".tz").css('fontSize',25)

 

   //接下来，要上战场，全军出击！

   //要把所有的兵都派上去，上战场。前线的所有兵背景色都是红的。

   //标签选择器

   //格式：$(“标签名”)；

   //通过标签来获取对应的元素

   $("li").css('backgroundColor','red');

 

   //在战场上发现有人背着锅，伙夫和卫生员是没有战斗力的，应该撤下来

   //需要把伙夫和卫生员的背景颜色改成黄色

   //伙夫和卫生员也想要帮忙为抗日做贡献

   //并集选择器

   //格式：$(“selector1,selector2,....”)

   $('.hf,.wsy').css('backgroundColor','yellow')

 

       //现在，突然发现老打败仗。为什么呢？现在部队里出现了内奸

       //现在要把内奸找出来，不能干扰到老百姓

       //交集选择器  li.current

       //格式：$(“selector1selector2”);注意中间没有空格

       //获取两个选择器之间的交集

   $('li.nj').css('backgroundColor','green')