热门标签 | 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


推荐阅读
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文探讨了在不使用服务器控件的情况下,如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式,还介绍了其他可行的技术方案。 ... [详细]
  • dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用
    本文来安利大家一个有趣而且强大的库,通过F#和C#混合编程编写WPF应用,可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]
  • 本文探讨了在Java中实现系统托盘最小化的两种方法:使用SWT库和JDK6自带的功能。通过这两种方式,开发者可以创建跨平台的应用程序,使窗口能够最小化到系统托盘,并提供丰富的交互功能。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式,详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]
  • 本文介绍了一种根据用户选择动态切换屏幕界面的方法,通过定义不同的选择块(Selection Block),实现灵活的用户交互体验。 ... [详细]
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社区 版权所有