jquery选择器1
直接上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.min.js.js"></script> <script type="text/javascript"> $(function(){ // 快捷键 dli 输出的是 $("#") , dl输出的是$(""), dlc输出的是$(".") // 原来讲过的所有的css的选择器,在jquery中都能正常使用! // css('color','blue')只能指定一个样式(只能指定颜色) 如果想指定颜色，又想指定大小用css({'color':'blue','font-size':'20px'}) // $("#uu div p").css({'color':'blue','font-size':'20px','background':'red'}); // 这样是选择uu儿子辈的p标签 // $("#uu>p").css({'color':'blue','font-size':'20px'}); // 选择的是紧邻在.tt后面的一个p标签 // $(".tt+p").css({'color':'blue','font-size':'20px'}); // 选择的是紧邻在p后面的一个class="nn"标签 // $("p+.nn").css({'color':'blue','font-size':'20px'}); // 选择的是.tt后面的所有同级p标签! // $(".tt~p").css({'color':'blue','font-size':'20px'}); // 选择的是#uu 第一个p标签 first:第一 // $("#uu p:first").css({'color':'blue','font-size':'20px'}); // 选择的是#uu 最后一个p标签 last:最后 // $("#uu p:last").css({'color':'blue','font-size':'20px'}); // 选择的是#uu里所有的p标签,但是排除掉class是tt的标签 // $("#uu p:not(.tt)").css({'color':'blue','font-size':'20px'}); // 选择的是#uu里的所有序号是偶数的p标签 0开始数 0\2\4\6 // $("#uu p:even").css({'color':'blue','font-size':'20px'}); // 选奇数 // $("#uu p:odd").css({'color':'blue','font-size':'20px'}); // 这个经常用到,找#uu里面的序号是第3个p标签(0开始数) // $("#uu p:eq(3)").css({'color':'blue','font-size':'20px'}); // 找#uu里面的序号是大于第3的p标签(也就是说第3个p标签后面所有的p标签都选中) // $("#uu p:gt(3)").css({'color':'blue','font-size':'20px'}); // 在#uu里 序号小于3的p标签都会选中 // $("#uu p:lt(3)").css({'color':'blue','font-size':'20px'}); // 选择的是#uu 里内容包含'用法4'字样的p标签 // $("#uu p:contains(用法4)").css({'color':'blue','font-size':'20px'}); // 选择的是#uu里的所有空p标签 // $("#uu p:empty").css({'width':'500px','height':'100px','background':'#FF6600'}); // 选择的是#uu里包含有span标签的p标签 // $("#uu p:has(span)").css({'color':'blue','font-size':'20px'}); // 选择的是#uu里的非空p标签(p标签 不是空标签都选中) $("#uu p:parent").css({'color':'blue','font-size':'20px'}); }) </script> </head> <body> <div id="uu"> <p>试一下选择器的用法1</p> <p>试一下选择器的用法2</p> <p class="tt">试一下选择器的用法3</p> <p>试一下选择器的用法4</p> <p >试一下选择器的用法5<span>加一个span标签</span></p> <p>试一下选择器的用法6</p> <p >试一下选择器的用法7<span>加一个span标签</span></p> <p>试一下选择器的用法8</p> <p></p> <p></p> <span class="nn"> nnnnnnnnnnnn</span> <div> <p>另一组的p标签</p> <p>另一组的p标签</p> <p>另一组的p标签</p> </div> </div> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知