热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

本文介绍了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


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 尽管使用TensorFlow和PyTorch等成熟框架可以显著降低实现递归神经网络(RNN)的门槛,但对于初学者来说,理解其底层原理至关重要。本文将引导您使用NumPy从头构建一个用于自然语言处理(NLP)的RNN模型。 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文介绍了一种根据用户选择动态切换屏幕界面的方法,通过定义不同的选择块(Selection Block),实现灵活的用户交互体验。 ... [详细]
  • 本文介绍如何使用 Android 的 Canvas 和 View 组件创建一个简单的绘图板应用程序,支持触摸绘画和保存图片功能。 ... [详细]
author-avatar
菜鸟一号
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有