jQuery 小结

最新推荐文章于 2022-08-06 16:22:55 发布

原创最新推荐文章于 2022-08-06 16:22:55 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了使用jQuery进行元素操作的各种技巧，包括添加、删除、移动和复制元素，以及如何调整元素的属性、样式和内容。通过实例展示了如何利用jQuery简化网页开发，如改变元素颜色、禁用按钮、移动元素位置等。

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

选择器（class(".xxx") id$("#xxx") 类$("xxx")）
添加元素class：addClass()方法给元素添加class
删除元素class：removeClass()方法去掉元素上的class。$("#target2").removeClass("btn-default");
删除元素：.remove()的方法可以移除HTML元素。$("#target4").remove();
改变css样式：.css()的方法能让你改变元素的CSS样式。$("#target1").css("color", "blue");
调整元素属性：.prop()的方法让你来调整元素的属性.$("button").prop("disabled", true);//按钮不可选
添加HTML标签和文字：.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
6-1 em[emphasize]标签来重写和强调标题文本
6-2 .text()，它只能改变文本但不能修改标记。换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示。

		$("h3").html("<em>jQuery Playground</em>");

移动元素：.appendTo()方法可以把选中的元素加到其他元素中。$("#target4").appendTo("#left-well");//移动添加至目标#left-well列表之后
拷贝元素：.clone()方法可以拷贝元素。$("#target5").clone().appendTo("#left-well");//两种指令写法：function chaining（方法链）
访问指定元素父级：.parent()，它允许你访问指定元素的父元素。$("#left-well").parent().css("background-color", "blue")
访问指定子集元素：.children()，它允许你访问指定元素的子元素。$("#left-well").children().css("color", "blue")
用CSS选择器来选取元素：xxxx:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。

你可以给目标元素的第三个子元素添加bounce class。

$(".xxxx:nth-child(3)").addClass("animated bounce");

12-1：记住jQuery里的索引是从0开始的，也就是说，:odd（单数选择器）选择第2、4、6个元素，因为target#2(索引为1)，target#4(索引为3)，target6(索引为5）。
12-2：even（双数选择器）选择第1、3、5个元素

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");
  });
</script>

<!-- 请只修改这条注释以上的代码 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>