JQ第一次课程(选择器)

1、id选择器:$(“#btn”)

  类似css那样,先在html中声明一个id选择器:id=”btn”,然后在js页面中查找到此id选择器:$(“#btn”),再对它进行事件操作。

2、class类选择器:$(“.btn”)

  先在html中声明一个class选择器:class=”btn”,然后在js页面中查找到此id选择器:$(“.btn”),再对它进行事件操作。

3、标签选择器:$(“tr”)

  根据html中已写出的标签,如tr、td等,在js页面中查找到此标签选择器:$(“tr”),对它进行事件操作。

4、奇偶选择器:odd(偶)、even(奇)

  $(“tr:odd”), 选择所有位于偶数行的< tr >标记

  $(“tr:even”) ,选择所有位于奇数行的< tr >标记

  【例】隔行换色表格:

$(function(){             

$(“tr:odd”).css(“background”,”#f8f3d2”);    //偶数行的背景颜色为#f8f3d2

$(“tr:even”).css(“background”,”#ffcdcd”);    //奇数行的背景颜色为#ffcdcd

});

5、eq(n)选择器:$("X:eq(n)")

  对X标签的第n+1个X标签进行选择,也可以写作$(“X”).eq(n)。

  如:$(“tr”).eq(2),是指第三行。 

6、nth-child(n)选择器:$(“X:nth-child(n)”) 

  对X标签的第n个X标签进行选择。

  如:$(“td:nth-child(3)”) ,是指第3列;  $(“li:nth-child(4)”),就是第4个li标签。

【补充】eq(n)与nth-child(n)区别:

  eq(n):对全部X标签不分父级子级依次排序下来的第n+1个X标签进行选择,整体页面只选中一个X标签。

  nth-child(n):对全部X标签会分父级、子级、孙级,每个级别依次排列出第n个标签,将它们全部挑选出来,可选中多个标签。

  详细可见:http://blog.csdn.net/aspnet2002web/article/details/7701335

7、子元素选择器:$(“li>a”)

  $(“li>a”),返回<li>标记的所有子元素<a>,但不包括孙标记。

  【例】查找li下的所有子标签a,文字颜色为红色:

<ul>

        <li>

               <a href=”#”>XXXX</a>

               <div><a href=”#”>YYYY</a></div>

               <a href=”#”>XXXX</a>

      <a href=”#”>XXXX</a>

   </li>

</ul>

$(“li>a”).css(“color”,”red”);

效果:仅XXXX为红色,YYYY不变,因为YYYY对于li是孙标签(li>div>a)。

8、功能函数前缀:

  $.trim(s); 去掉s字符串的前后空格。

  【例】去掉字符串中间空格:(把字符串变成字符数组,然后把空格替换成无)

var s="das  das";

var aChar=s.split("");         //将字符串变为字符数组

for(var i=0; i<aChar.length;i++)

{

              if(aChar[i]==" ")      //当遇到某个字符是空格时

              {

                     s=s.replace(" ","");  //将此空格替换成无(从空格替换到连空格都不是)

              }

}

alert(s);               //打印s

9、属性选择器:

  $(“某标签[某属性]”):选出带有某种属性的某标签。如:

  1)$("a[target]")       选出带有target属性的a标签;

  2)$(“a[href=’b.html’]”)   选出带有href=’b.html’属性的a标签;

  3)$(“a[href^=http://]”)   选出以http://开头的a标签;

  4)$(“a[href$=html]”)     选出以html结尾的a标签

  5)$(“a[href*=bbb]”)      选出含有bbb的a标签

10、包含选择器

  $(“某标签:has(某属性)”):选出包含某属性的所有某标签。如:$(“li:has(a)”) 包含超链接的所有li标记

11、位置选择器

  $(“某标签:某位置”) :选出某特定位置的某标签。如:

1)$(“p:first”) 选择页面中的第一个p标签

2)$(“p:last”) 选择页面中的最后一个p标签

3)$(“p:first-child”)  选择所有的p标记,且这些p标记是其父标记的第一个标记。

4)$(“p:last-child”)  选择所有的p标记,且这些p标记是其父标记的最后一个标记。

5)$(“p:nth-child(odd)”).addClass(“myClass”) 选择所有的p标记,且这些p标记是其父标记的偶数行。

6)$(“p:odd”).addClass(“myClass”) 整个页面的偶数行p标记

7)$(“p:eq(4)”).addClass(“myClass”) 第五个p标记

8)$(“p:gt(n)”).addClass(“myClass”) 第n个(从0开始,不包括n本身)p标记之后的所有p标记,也就是从第n+2个标记开始算,如$(“p:gt(2)”)就是从第四个p开始。

12、过滤选择器

  *备注:$(":file") 等价于$(“input[type=file]”)

$(“:button”)

所有按钮

$(“:checkbox”)

所有复选框,等同于$(“input[type=’checkbox’]”)

$("div:contains(' foo ')")

所有包含了文本“foo”的元素

$(“:disable”)

所有被禁用的元素(此写法有问题,代替写法:$("input[disabled=disabled]").attr("value", "aaa");)

$(“:enable”)

所有没有被禁用的元素

$(“:file”)

所有上传控件

$(“:input”)

所有表单元素

$(“:selected”)

所有下拉菜单中被选中的项

$(“:visible”)

所有可见的元素

$(“:submit”)

所有提交按钮

13、反向过滤器:

  $(“标签:not(:某属性)”):选出所有不具备某属性的某标签。

原文地址:https://www.cnblogs.com/banchengping/p/4868527.html