jQuery2过滤器内容选择器

正文

<table id="table1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><h5>张三</h5></td>
            </tr>
            <tr>
                <td>2</td>
                <td><h3>李四</h3></td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
    <hr />
    <table id="table2">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
    <ul>
        <li>零</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li><span>五</span></li>
        <li>六</li>
        <li><span>七</span></li>
        <li></li>
        <li></li>
    </ul>

效果图

过滤器

1 :first——选取id为table1里的tbody里的所有tr元素中的第一个tr元素

//背景颜色是红色
 $("#table1 tbody tr:first").css("background-color", "red");

2 :last——选取id为table1里的tbody里的所有tr元素中的最后一个tr元素

//字体颜色是红色
$("#table1 tbody tr:last").css("color", "red");

3 :not(selector) ——选取table中不是#table1的元素

//字体变大
 $("table:not(#table1)").css("font-size", "larger");

4 :even ——选取索引是偶数的tr元素(索引从0开始)
:odd —— 选取索引是奇数的tr元素(索引从0开始)

//从0开始数，偶数行的背景颜色是红色，奇数行的背景颜色是绿色
$("#table2 tr:even").css("background-color", "red");
$("#table2 tr:odd").css("background-color", "green");

5 :eq(index) 选取索引等于 2的li元素 (索引从0开始) (等于的英文是equal)
:gt(index) 选取索引 大于 3的li元素(索引从0开始) (html转义字符为&gt)
:lt(index) 选取索引 小于 1的li元素(索引从0开始) (html转义字符为&lt)

//去掉前面的圆点
 $("ul li:eq(2)").attr("style", "list-style-type:none");
 //背景颜色是绿色
 $("ul li:gt(3)").attr("style", "background-color:green");
 //背景颜色是红色
  $("ul li:lt(1)").attr("style", "background-color:red");

6 :header 选取所有标题元素 (h1 - h6)
:animated 选择器选取当前的所有动画元素。

//斜体字
$(":header").css("font-style", "oblique");

内容过滤器

1 :contains(text) 选取含有文本“零”的li元素

//斜体字 包含零文本的元素
$("ul li:contains(零)").css("font-style", "oblique");

2 :empty 选取不包含子元素(文本元素）的空li元素

$("ul li:empty").css("width", "200px");

3 :has 选取含有元素的li元素

//包含标签span的元素
("ul li:has(span)").css("color", "white");

4 :parent 选取拥有子元素(包括文本元素)的li元素

("ul li:parent").css("width", "400px");

table的完整结构

题头thead用来放标题之类的东西
正文tbody放数据本体
脚注tfoot放表格的脚注之类

<table>
      <thead>
          <tr>
            <th></th>
          </tr>
      </thead>
      <tbody>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
      </tbody>
      <tfoot></tfoot>
  </table>

转载: https://www.cnblogs.com/pztx1992/archive/2012/08/15/2640008.html.