JQuery入门(1) - 选择器

最新推荐文章于 2024-05-05 23:49:29 发布

原创最新推荐文章于 2024-05-05 23:49:29 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍JQuery选择器的基本用法，包括如何选取特定元素、类名或ID，以及如何根据元素属性进行筛选。通过一个实例展示了如何使用这些选择器来操作网页元素。

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

JQuery入门（1） - 选择器

$("元素")            // 选取元素
$("元素.类名")       // 选取元素中class为“类名”的元素
$("元素.#ID")        // 选取元素中id="ID"的元素
$("[属性]")          // 选取包含“属性”的所有元素
$("[属性]='值'")     // 选取属性等于‘值’的元素
$("[属性]!='值'")    // 选取属性不等于‘值’的元素
$("[属性]^='值'")    // 选取属性值以‘值’开头的元素
$("[属性]$='值'")    // 选取属性值以‘值’结尾的元素

举例

把test.html放到当前目录中，jquery.js放到目录./jquery/目录中。
test.html文件如下，为了一目了然，把自己写的javascript代码嵌入到html中：

<!-- test.html文件 -->
<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>    
</head>

<body>
<h2>测试选择器</h2>
<p id = 'id1' class = 'class1'>第一行，元素p，id='id1'，class='class1'</p>
<p id = 'id2' class = 'class2'>第二行，元素p，id='id2'，class='class2'</p>
<button type="button">执行选择器</button>

<script type="text/javascript">
    $("button").click(function(){
        $("p#id1").html("<p backgroud-color='red'>执行原则器之后</p>")  // 修改这里的 $("p#id1")，测试不同的选择器
                  .css("background-color","red");
  });
</script>

</body>

</html>

例子是执行$(“p#id1”)选择器，点击按键后，id为id1的元素的文字变成了“执行原则器之后”，红色背景。通过修改 $(“p#id1”)，可以测试不同的选择器语法。