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')

posted @ 2021-12-05 13:07  初二仙女  阅读(26)  评论(0)    收藏  举报