jQuery选择器

最新推荐文章于 2024-07-28 23:04:06 发布

Dream Lad

最新推荐文章于 2024-07-28 23:04:06 发布

阅读量101

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_52001755/article/details/118003930

本文介绍jQuery这一流行的JavaScript库，包括其核心功能如HTML元素选取、操作及事件处理等，并通过实例展示了如何使用jQuery简化常见的Web开发任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 简介
jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 是一个 JavaScript 函数库，jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery 还提供了大量的插件。

jQuery 选择器的优点:
简洁的写法
${“#id”} 等价于 document.getElementById("id");
${“tagName”} 等价于 document.getElementsByTagName("tagName");
完善的事件处理机制

jQuery选择器功能强大，种类也很多，分类如下：
类CSS选择器
基本选择器
层次选择器
属性选择器
过滤选择器：
基本过滤选择器
可见性过滤选择器

元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
实例

用户点击按钮后，所有 <p> 元素都隐藏：

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

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

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

.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

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

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素