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