zoukankan      html  css  js  c++  java
  • jquery独特的选择器

    最近开始学习jquery,发现jquery的强大真的不是一两句话就能概括的。jquery是一个用原生JS写出来的类库,它强调的理念是写得少,做的多。jquery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其他类库望尘莫及的。

    要使用jquery的话,只需要在jquery.com官网下下载源代码,并且用<script></script>标签进行引用就能使用了。

    类似:

    1 <script src="../scripts/jquery.js" type="text/javascript"></script>

    在jquery当中,很重要的一个是它的独特的选择器,相比于javascript中的getELementById或者getElementsBytTagName的选择器而言,jquery的选择器就相对简单得多了,代码也少的多了。只需要一个$()就能获取无论是通过ID还是class还是标签名等等,当然,jquery()也可以,因为在jquery中$相当于jquery。

    总结的选择器:

    一、基本选择器

    通过id:#id;示例$("#wrap"),意思是获取id为wrap的元素。

    通过class:.class;示例$(".wrap"),意思是获取class为wrap的元素。

    *:通配符;$("*"),意思是获取所有元素。

    二、层次选择器

    $("ancestor desendant"),意思获取ancestor里面的desendant元素。

    $("parent>child"),意思获取parent下的child子元素。

    $("prev+next"),意思获取prev元素后下一个的next元素。

    $("prev~sibling"),意思获取prev元素之后的所有sibling元素。

    三、过滤选择器

    1.基本过滤选择器

    $("div.c:first"),意思是选取class名为c的所有div中的第一个div。

    $("div.c:last"),意思是选取class名为c的所有div中的最后一个div。

    $("div.c:not(.a)"),意思是选取class名为c的所有div中的不含有a这个class的div。

    $("div.c:even"),意思是选取class名为c的所有div中的索引为偶数的div(从0开始算,0算偶数)。

    $("div.c:odd"),意思是选取class名为c的所有div中的索引为奇数的div(从0开始算)。

    $("div.c:eq(2)"),意思是选取class名为c的所有div中的索引为2的div(从0开始算)。

    $("div.c:gt(2)"),意思是选取class名为c的所有div中的索引大于2的div(从0开始算,不包括2)。

    $("div.c:lt(2)"),意思是选取class名为c的所有div中的索引小于2的div(从0开始算,不包括2)。

    $("div.c:header"),意思是选取class名为c的所有标题标签。

    $(":animated"),意思是选取当前正在执行动画的元素。

    $(":focus"),意思是选取当前获取焦点的元素。

    2.内容过滤器

    $(":contains(text)"),意思是文本内容包含”text“的元素。

    $(":empty"),意思是选取不包含子元素或者文本内容为空的元素。

    $(":has(p)"),意思是选取含有p元素的元素。

    $(":parent"),意思是选取含有子元素或者文本的元素。

    3.可见性过滤选择器

    $(":hidden"),意思是选取所有不可见的元素。

    $(":visible"),意思是选取所有可见的元素。

    4、属性过滤器

    [attribute],意思是选取所有拥有此属性的元素。

    [attribute=value],意思是选取所有拥有此属性值为value的元素。

    [attribute!=value],意思是选取所有拥有此属性值不为value的元素。

    [attribute^=value],意思是选取此属性的值以value为开始的元素。

    [attribute$=value],意思是选取此属性的值以value为结束的元素。

    [attribute*=value],意思是选取此属性值含有value的元素。

    [attribute|=value],意思是选取此属性的值等于value或者以value为前缀的元素。

    [attribute~=value],意思是选取此属性的值用空格分隔并且含有value的元素。

    5、子元素过滤选择器

    $("div.a:nth-child(1)"),意思是选取class为a下的索引为1的子元素(索引从1开始算起,索引可以是even,odd,n的函数)。

    $("div.a:first-child"),意思是选取class为a下的第一个子元素

    $("div.a:last-child"),意思是选取class为a下的最后一个子元素

    $("ul li:only-child"),意思是选取ul下的是唯一子元素的li元素

    6、表单对象属性过滤选择器

    $("form:enabled"),意思是选取form下的所有可用子元素

    $("form:disabled"),意思是选取form下的所有不可用子元素

    $("form:checked"),意思是选取form下的所有选中的input元素

    $("form:selected"),意思是选取form下的所有被选中的选项option元素


    $(":parent"),意思是选取含有子元素或者文本的元素。

  • 相关阅读:
    2019.6.20刷题统计
    36 线程 队列 守护线程 互斥锁 死锁 可重入锁 信号量
    35 守护进程 互斥锁 IPC 共享内存 的方式 生产者消费者模型
    34 进程 pid ppid 并发与并行,阻塞与非阻塞 join函数 process对象 孤儿进程与僵尸进程
    33 udp 域名 进程
    32 粘包 文件传输
    31 socket客户端. 服务器 异常 语法
    30 网络编程
    29 元类 异常
    26 封装 反射 常用内置函数
  • 原文地址:https://www.cnblogs.com/178-533/p/7447276.html
Copyright © 2011-2022 走看看