• 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(:某属性)”):选出所有不具备某属性的某标签。

  • 相关阅读:
    Git 基础
    SharePoint 2013 对象模型操作"网站设置"菜单
    SharePoint 2013 隐藏部分Ribbon菜单
    SharePoint 2013 Designer系列之数据视图筛选
    SharePoint 2013 Designer系列之数据视图
    SharePoint 2013 Designer系列之自定义列表表单
    SharePoint 2013 设置自定义布局页
    SharePoint 2013 "通知我"功能简介
    SharePoint 2013 创建web应用程序报错"This page can’t be displayed"
    SharePoint 禁用本地回环的两个方法
  • 原文地址:https://www.cnblogs.com/banchengping/p/4868527.html
Copyright © 2020-2023  润新知