zoukankan      html  css  js  c++  java

  • jQuery学习——基本筛选

    :animated Selector

    描述: 选择所有正在执行动画效果的元素.

    注意:  如果您使用一个自定义的jQuery绑定一个没有效果模块， :animated选择器会抛出一个错误。

    Additional Notes:（其他注意事项：）

    • 因为:animated 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分，使用:animated 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:animated 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":animated").

    改变正在执行动画的 div 的颜色。

    <!DOCTYPE html>
<html>
<head>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
  div.colored { background:green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="run">Run</button>
 
  <div></div>
  <div id="mover"></div>
  <div></div>
<script>
 
    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
</script>
 
</body>
</html>

    :eq() Selector

    描述: 在匹配的集合中选择索引值为index的元素。

    • jQuery( ":eq(index)" )

      index: 要匹配元素的索引值（从0开始计数）

    • 添加的版本: 1.8jQuery( ":eq(-index)" )

      -index: 要匹配元素的索引值（从0开始计数）, 从最后一个元素开始倒计数

    这种索引值相关的选择器（:eq(), :lt(), :gt(), :even, :odd）过滤他们前面的匹配表达式的集合元素。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。例如，如果第一个选择器使用类选择器（ .myclass ）进行匹配，四个元素返回，这些元素是给定索引是0到3。

    请注意，由于JavaScript数组使用基于0的索引 ，这些选择器也是如此。这就是为什么$('.myclass:eq(1)')选择器选择文档中第二个MyClass类的元素，而不是第一个。与此相反，:nth-child(n)是基于1的索引的，以符合CSS规范。

    在jQuery 1.8之前，:eq(index)不接受负值所引值（虽然.eq(index)方法接受）。

    其他注意事项:

    • 因为 :eq() 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分, 使用:eq()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用$("your-pure-css-selector").eq(index)代替。

    查找第三个 td。

    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>
 
</body>
</html>

    在列表项目中应用三种不同的样式，以此来展示 :eq() 只会选择一个元素，而 :nth-child() 或 :eq() 会像 .each() 一样，有类似循环的构造，从而选择多个元素。

    !DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
 
<script>
/* applies yellow background color to a single <li> */
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
 
/* applies italics to text of the second <li> within each <ul class="nav"> */
$("ul.nav").each(function(index) {
  $(this).find("li:eq(1)").css( "fontStyle", "italic" );
});
 
/* applies red text color to descendants of <ul class="nav"> */
/* for each <li> that is the second child of its parent */
$("ul.nav li:nth-child(2)").css( "color", "red" );
</script>
 
</body>
</html>

    Add a class to List 2, item 2 by targeting the second to last <li>

    <script>$( "li:eq(-2)" ).addClass( "foo" )</script>

    :even Selector

    描述: 选择所引值为偶数的元素，从 0 开始计数。 也可以查看 odd.

    特别地注意的是，这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素，依此类推在匹配。

    Additional Notes:（其他注意事项：）

    • 因为:even 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分，使用:even 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:even 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":even").
    • 查找表格中索引值是偶数的行(即实际表格中的奇数行)，即匹配第一行、第三行、第五行等 (索引值是 0, 2 ,4 等 )。

    Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).

    <!DOCTYPE html>
<html>
<head>
  <style>
  table {
    background:#eeeeee;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
 
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:even").css("background-color", "#bbbbff");</script>
 
</body>
</html>

    :first Selector

    描述: 选择第一个匹配的元素。

    :first伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

    Additional Notes（其他注意事项）:

    • 因为 :first() 是一个 jQuery 延伸出来的一个选择器。 并且不是的CSS规范的一部分, 使用:first()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(":first")代替。
    • 被选中的元素按照他们在文档中出现的顺序。
    <script>$("tr:first").css("font-style", "italic");</script>

    :gt() Selector

    描述: 选择匹配集合中所有大于给定index（索引值）的元素。

    • jQuery( ":gt(index)" )

      index: 从0开始计数的索引值。

    • version added: 1.8jQuery( ":gt(-index)" )

      -index: 从0开始计数的索引值。 从最后一个元素开始反向计数。

    给TD＃5高亮的黄色背景和TD＃8个红色的文字颜色。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gt demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>

     :header Selector

    描述: 选择所有标题元素，像h1, h2, h3 等.

    Additional Notes:

    • 因为 :header() 是一个 jQuery 延伸出来的一个选择器 并且不是的CSS规范的一部分, 使用:header()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(":header")代替。
    <script>$(":header").css({ background:'#CCC', color:'blue' });</script>

    :lang Selector

    描述: 选择指定语言的所有元素。

    :lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

    对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。

    这种用法的进一步讨论可以在 W3C CSS规范中找到。

    不理解这题

    <!DOCTYPE html>
<html>
<head>
  <style>
body { background-color: #ccc; }
h3 { margin: .25em 0; }
div { line-height: 1.5em}
.usa { background-color: #f00; color: #fff; }
.usa .usa { background-color: #fff; color: #000; }
.usa .usa .usa { background-color: #00f; color: #fff; }
 
.spain { background-color: #f00; color: #ff0; }
.spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }
.spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>
 
<script>
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
</script>
 
</body>
</html>

    :last Selector

    描述: 选择最后一个匹配的元素。

    注意:last选择一个过滤和匹配当前jQuery集合在它的最后一个单独的元素。

    Additional Notes（其他注意事项）:

    • 因为 :last 是一个 jQuery 延伸出来的一个选择器 ，并且不是的CSS规范的一部分, 使用:last查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(":last")代替。
    <script>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>

    :lt() Selector

    描述: 选择匹配集合中所有索引值小于给定index参数的元素。

    • jQuery( ":lt(index)" )

      index: 从 0 开始计数的索引值。

    • version added: 1.8jQuery( ":lt(-index)" )

      -index: 从0开始计数的索引值。 从最后一个元素开始反向计数。

    index-related selectors（索引相关的选择）

    这种索引相关的选择器（包括这个“小于”选择器）会在先前提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说，如果一开始通过 class 选择器 (.myclass ) 选中了 4 个元素，然后这四个元素的索引值会被分配为 0到3，之后就可以用这种索引值选择器来进一步筛选了。

    请注意，由于JavaScript数组使用基于0的索引 ，这些选择器也是如此。这就是为什么$('.myclass:lt(1)')选择器选择文档中第一个MyClass类的元素，而不是选择不到任何元素。与此相反，:nth-child(n)是基于1的索引的，以符合CSS规范。

    jQuery 1.8以前的版本，:lt(index)选择器不接收一个负数的index值。

    Additional Notes（其他注意事项）:

    • 因为 :lt() 是一个 jQuery 延伸出来的一个选择器 ， 并且不是的CSS规范的一部分, 使用:lt()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用$("your-pure-css-selector").slice(0, index)代替。

    查找索引值小于 4 的 td.

      
    <script>$("td:lt(4)").css("color", "red");</script>

    :not() Selector

    描述: 选择所有元素去除不匹配给定的选择器的元素。

    所有的选择器可以放置在 :not()中，例如 :not(div a) 和 :not(div,a)。

    Additional Notes(其他注意事项)：

    .not()方法可以让代码更易读。而使用 :not() 通常会构建出一个非常复杂的选择器。所以大多数情况下，推荐使用.not()方法。

    查找所有没有被选中的复选框，然后高亮后面的 span。注意，当你点击复选框的时候不会有反应，因为没有绑定任何点击事件。

      
    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <input type="checkbox" name="a" />
  <span>Mary</span>
</div>
 
<div>
  <input type="checkbox" name="b" />
  <span>lcm</span>
 
</div>
<div>
  <input type="checkbox" name="c" checked="checked" />
 
  <span>Peter</span>
</div>
<script>
  $("input:not(:checked) + span").css("background-color", "yellow");
  $("input").attr("disabled", "disabled");
 
</script>
 
</body>
</html>

    :odd Selector

    描述: 选择索引值为奇数元素，从 0 开始计数。同样查看偶数even.

    特别地注意的是，这是基于0的索引，所以:odd选择器是选择第二个元素，第四个元素，依此类推在匹配。

    Additional Notes（其他注意事项）:

    • 因为:odd 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分，使用:odd 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:odd 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":odd").
    • 被选中元素的顺序是其在文档中出现的顺序。
    <script>$("tr:odd").css("background-color", "#bbbbff");</script>

    :root Selector

    描述: 选择该文档的根元素。

    在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。

     显示根元素的标签名。

      
    <!DOCTYPE html>
<html>
<head>
  <style>
span.fot { color: red; font-size: 120%; font-style: italic; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="log">The root of this document is: </div>
<script>
$( "<b></b>" ).html( $( ":root" )[0].nodeName ).appendTo( "#log" );
</script>
 
</body>
</html>

    :target Selector

    描述: 选择由文档URI的格式化识别码表示的目标元素。

    如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。  例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
  • 相关阅读:
    [luoguP2762] 太空飞行计划问题（最大权闭合图—最小割—最大流）
    [luoguP2680] 运输计划（lca + 二分 + 差分）
    [luoguP2758] 编辑距离（DP）
    [luoguP2890] [USACO07OPEN]便宜的回文Cheapest Palindrome（DP）
    Javascript对象拷贝(clone)
    使用JavaScript访问XML数据
    javascript 树形菜单
    Simple JavaScript Inheritance
    用 javascript 操作 xml
    javascript flash 弹框
  • 原文地址：https://www.cnblogs.com/pilee/p/3470094.html
Copyright © 2011-2022 走看看