jQuery选择器与鼠标事件入门指南

jQuery 是一个轻量级的 Javascript 库，用于简化 HTML 文档的遍历和操作。其基本使用形式如下：

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

这段代码的作用是在文档加载完成后，当用户点击按钮时，隐藏 ID 为 test 的元素。

以下是一些常用的 jQuery 选择器：

• $("*") - 选择所有元素
• $(this) - 选择当前元素
• $("p.intro") - 选择所有 class 为 intro 的 p 元素
• $("p#other") - 选择所有 id 为 other 的 p 元素
• $("p:first") - 选择第一个 p 元素
• $("ul li:first") - 选择第一个 ul 元素的第一个 li 元素
• $("ul li:first-child") - 选择每个 ul 的第一个子元素
• $("[href]") - 选择所有带有 href 属性的元素
• $("a[target='_blank']") - 选择所有 target 为 _blank 的 a 元素
• $("a[target!='_blank']") - 选择所有 target 不为 _blank 的 a 元素
• $(":button") - 选择所有 button 元素及 input 类型为 button 的元素
• $("tr:even") - 选择所有偶数行 tr 元素
• $("tr:odd") - 选择所有奇数行 tr 元素

以下是一些常用的鼠标事件：

• dblclick() - 当双击某个 HTML 标记时调用。例如，以下代码在双击 p 元素时隐藏其内容：

  $("p").dblclick(function(){
    $(this).hide();
  });

• mouseenter() - 当鼠标进入某个 HTML 元素时触发。例如：

  $("#p1").mouseenter(function(){
    alert("You entered p1!");
  });

• mouseleave() - 当鼠标离开某个 HTML 元素时触发。例如：

  $("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
  });

• mousedown() - 当按下鼠标左键时触发。例如：

  $("#p1").mousedown(function(){
    alert("Mouse down over p1!");
  });

• mouseup() - 当在某个元素上释放鼠标左键时触发。例如：

  $("#p1").mouseup(function(){
    alert("Mouse up over p1!");
  });

参考资料：https://www.cnblogs.com/yxfcnbg/p/3297871.html