首页 前端知识 jQuery的选择器与自带函数详解

jQuery的选择器与自带函数详解

2024-05-23 20:05:23 前端知识 前端哥 751 542 我要收藏

在前端开发中,jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互等操作。本文将通过一个示例页面,详细介绍jQuery的选择器和一些常用的自带函数。

示例代码优化

首先,我们来优化和完善给出的代码片段,使其更加规范且易于理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Selectors and Functions Demo</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<h2><a href="#">Title Content</a></h2>
<h2>Another Title <a href="#">Content</a></h2>

<script>
    $(document).ready(function() {
        // 使用ID选择器,这里假设有一个ID为showDiv的元素
        $("#showDiv").text("Selected by ID");

        // 类选择器示例,先确保页面中有class为'SomeClass'的元素
        $(".SomeClass").css("color", "red");

        // 选择所有奇数行的段落
        $("p:odd").addClass("highlight");

        // 选择每行的第一个单元格
        $("td:nth-child(1)").html("&lt;First Cell&gt;");

        // 选择所有列表项中的链接
        $("li > a").attr("target", "_blank");

        // 选择所有指向pdf文件的链接
        $("a[href$='.pdf']").text("PDF Link");

        // 修改所有h2下的链接文本
        $("h2 a").each(function(index) {
            $(this).text("Link " + (index + 1));
        });

        // 使用$.trim去除字符串首尾空白
        let sString = "   123456789 ";
        let trimmedString = $.trim(sString);
        alert("Trimmed length: " + trimmedString.length);
    });
</script>

<!-- 添加一个样式,用于演示 -->
<style>
    .highlight { background-color: yellow; }
</style>

</body>
</html>

jQuery选择器

基本选择器

  • $("#elementId"):通过ID选择元素。
  • $(".className"):通过类名选择元素。
  • $("tag"):通过标签名选择元素。

过滤选择器

  • $("selector:odd"):选择奇数位置的元素。
  • $("selector:nth-child(index)"):根据索引选择子元素。
  • $("parent > child"):直接子元素选择器。

属性选择器

  • $("a[href$='.pdf']"):选择所有href属性以.pdf结尾的a元素。

jQuery自带函数

$.trim()

用于移除字符串两端的空白字符。在上述示例中,我们使用此函数清理了字符串sString的首尾空格。

其他常用函数

  • .text(content):设置或返回所选元素的文本内容。
  • .css(property, value):设置或返回样式属性的值。
  • .addClass(className):向匹配的元素添加指定的类名。
  • .html(content):设置或返回所选元素的内容(包括HTML)。
  • .attr(attributeName, value):设置或返回元素的属性值。
  • .each(callback):对匹配元素集合执行迭代操作。

通过以上代码优化和解释,我们可以看到jQuery如何通过其强大的选择器和内置函数简化DOM操作,提高开发效率。掌握这些基础将极大提升你的前端开发能力。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9184.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!