zoukankan      html  css  js  c++  java
  • jQuery选择器

    最近刚学jQuery,里面的选择器感觉很牛,一下是个人的一些简单的总结。

    首先,要使用jQuery首先要引用jQuery包,和bootstrap框架是一样的,唯一需要注意的是要把引用的包放在自己写的JS前面。。

    jQuery里面有很多牛B的功能,首先就是其中的选择器:

    jQuery里面的选择器的写法其实和CSS中的写法是一样的,不过就是在前面加上$,比如,id选择器为$("#id"),class选择器为$(".class"),当然这些只是基础的选择器,还有就是根据元素的位置来确定,<ul>

      <li>list item 1</li>

      <li>list item 2</li>

      <li>list item 3</li>

      <li>list item 4</li>      

      <li>list item 5</li>

    </ul>

    如果选择第一个:$('li:first');

    选择最后一个:$(''li:last);

    选择匹配为偶数的元素:$('li:even');

    选择匹配为奇数的元素:$('li:odd');

    选择第i+1个元素:$('li:eq(i)');

    选择所有大于给定索引值的元素:$('li:gt(i)');

    选择所有小于给定索引值的元素:$('li:lt(i)');

    选择匹配如h1,h2,h3之类的标题元素:$(':header');

    选择包含有“string”的元素:$('div/button/span/:contains('string')');

    选择匹配所有不包含元素或者文本的空元素:$('li/td..:empty');

    选择匹配含有选择器所匹配的元素的元素:$("div:has(p)");

    选择匹配含有子元素或者文本的元素:$("td/tr..:parent");

      <input type="checkbox" name="newsletter" value="Hot Fuzz" />

      <input type="checkbox" name="newsletter" value="Cold Fusion" />

      <input type="checkbox" name="accept" value="Evil Plans" />

    选择匹配给定的属性是某个特定值的元素:$("input[name='newsletter']").attr("checked,true");

    结果:[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

    选择匹配其父元素下的第N个子元素:$("ul li:nth-child(N)");

    选择匹配第一个子元素:$("ul li:first-child");

    选择匹配某个有父元素的并且该父元素有唯一的子元素:$("ul li:only-child");

    当然还有很多选择器没有列出来,这些只是比较常用的。

  • 相关阅读:
    2019年第二周作业
    2019年pta作业第二题——求最大值及其下标
    2019春第十一周作业
    2019春第十周作业
    2019年寒假作业3
    2019年寒假作业2
    2019年寒假作业1
    我的老师
    自说
    Day16
  • 原文地址:https://www.cnblogs.com/zaxxm/p/4083433.html
Copyright © 2011-2022 走看看