jquery属性选择器not has怎么写 行悬停高亮显示

1. jQuery属性选择器not-has的使用方法

属性选择器是jQuery中一种非常方便的选择元素的方法。not和has也是jQuery属性选择器的一部分，它们可以用于选择不含有某个属性或含有某个特定属性的元素。

not的语法如下：

$("*:not(selector)")

selector可以是选择器表达式，也可以是HTML标记名或任何其他jQuery支持的选择器格式。选择器不会匹配带有指定属性的元素。

例如，以下示例代码会选择除了class为hidden的元素外的所有html元素：

$("html *:not(.hidden)")

has的语法如下：

$("selector:has(selector)")

selector可以是选择器表达式，也可以是任何其他jQuery支持的选择器格式。这个选择器选择具有指定子元素的元素。

例如，以下示例代码会选择带有class为description的p元素的嵌套div元素：

$("div:has(p.description)")

1. 行悬停高亮显示的实现方法

为表格中的行添加悬停样式是一种非常常见的需求。此时，可以使用jQuery的事件和类添加/删除来轻松地实现此效果。

示例1：使用.mouseover()和.mouseout()事件

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Jack</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Lily</td>
    <td>26</td>
  </tr>
</table>

$("table tr:gt(0)").mouseover(function() {
  $(this).addClass("highlight");
}).mouseout(function() {
  $(this).removeClass("highlight");
});

使用.gt(0)来忽略表头行。

上述代码将鼠标悬停在表格行上时添加类highlight，鼠标移出时删除该类。需要在CSS中定义.highlight类以指定高亮显示的样式。

示例2：使用.hover()事件

.hover()函数是jQuery中的快捷函数，用于将指定的函数分别绑定到元素的mouseover和mouseout事件上。以下代码实现与示例1相同的功能：

$("table tr:gt(0)").hover(
  function() {
    $(this).addClass("highlight");
  }, 
  function() {
    $(this).removeClass("highlight");
  }
);

总结：使用以上两者的方法任选都可以实现行悬停高亮显示的效果，这纯属个人选择。