jQuery学习

最新推荐文章于 2023-04-26 17:18:49 发布

后知后觉sss

最新推荐文章于 2023-04-26 17:18:49 发布

阅读量267

点赞数

分类专栏：前端文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/weixin_44604443/article/details/127725313

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1、使用 jQuery 选择器选择元素
现在我们有一个 document ready 函数。

首先，完成第一个 jQuery 语句。所有的 jQuery 函数都以 $ 开头，这个符号通常被称为美元符号（dollar sign operator）或 bling。

jQuery 通常选取并操作带有选择器（selector）的 HTML 标签。

比如，想要给 button 元素添加跳跃效果。只需要在 document ready 函数内添加如下代码：

$(“button”).addClass(“animated bounce”);
请注意，我们已经在后台引入了 jQuery 库和 Animate.css 库，所以你可以在编辑器里直接使用它们。你将使用 jQuery 将 Animate.css bounce class 应用于 button 元素。

<script>
  $(document).ready(function() {
$("button").addClass("animated bounce");
  });
</script>

2、使用 jQuery class 选择器选择元素
如何使所有的 button 标签都有弹跳的动画效果？用 $(“button”) 选取所有的 button 标签，并用 .addClass(“animated bounce”); 给其添加一些 CSS 属性。

jQuery 的 .addClass() 方法用来给标签添加类。

首先，使用 $(“.well”) 选取类为 well 的 div 标签。

值得注意的是，和 CSS 声明一样，在类名前需要添加 .。

然后，用 jQuery 的 .addClass() 方法添加 animated 和 shake class。

例如，在 document ready function 中添加下面的代码，使所有类为 text-primary 的标签抖动：

$(“.text-primary”).addClass(“animated shake”);

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake")
  });
</script>

3、使用 jQuery id 选择器选择元素
也能通过 id 属性选取标签。

首先，用 $(“#target3”) 选择器选取 id 为 target3 的 button 标签。

注意，和 CSS 声明一样，在 id 名前需要添加 #。

然后，用 jQuery 的 .addClass() 方法添加 animated 和 fadeOut 类。

下面的代码的效果是使 id 为 target6 的 button 标签淡出：

$(“#target6”).addClass(“animated fadeOut”);

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
  });
</script>

4、删除 jQuery 函数
这些动画开始看起来很酷，但是有时可能会让用户分心。

请删除 document ready function 内的三个 jQuery 函数，但保留 document ready function 本身。

<script>
  $(document).ready(function() {


  });
</script>

5、用多个 jQuery 选择器选择同一个元素
现在学写了三种选取标签的方法：用标签选择器： $(" b u tt o n ") ，用类选择器：$ (“.btn”) 以及用 id 选择器：$(“#target1”) 。

虽然可以在单个 .addClass() 内添加多个类，但是我们可以用三种不同的方式给一种标签添加类。

以三种不同的方式用 .addClass() 方法每次只给一种标签添加一个类：

给所有的 button 标签添加 animated 类。

给所有类为 .btn 的 button 标签添加 shake 类。

给所有 id 为 #target1 的 button 标签添加 btn-primary 类。

**注意：**只针对一个元素并且一次只能添加一个 class。总之，三个选择器最终将添加三个 class shake、animated 以及 btn-primary 到 #target1 上。

<script>
  $(document).ready(function() {
 $("button").addClass("animated")
 $(".btn").addClass("shake")
 $("#target1").addClass("btn-primary")
  });
</script>

6、使用 jQuery 从元素中移除 class
和用 jQuery 的 addClass() 方法给标签添加类一样，也可以利用 jQuery 的 removeClass() 方法移除它们。

下面是为指定按钮执行上面的操作的代码：

$(“#target2”).removeClass(“btn-default”);
请把所有 button 元素的 btn-default class 移除。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button ").removeClass("btn-default");
  });
</script>

7、使用 jQuery 更改元素的 CSS
也能用 jQuery 直接改变 HTML 标签的 CSS。

jQuery 有一个 .css() 方法，能改变标签的 CSS。

下面的代码效果是把颜色变蓝：

$(“#target1”).css(“color”, “blue”);
这与通常的 CSS 声明略有不同，因为这个 CSS 属性和它的值在英文引号里，并且它们用逗号而不是冒号间隔开。

删除 jQuery 选择器，留下一个空的 document ready function 。

选择 target1，并将其颜色更改为红色。

<script>
  $(document).ready(function() {
    $("#target1").css("color","red")
  });
</script>

8、使用 jQuery 禁用元素
还能用 jQuery 改变 HTML 标签的非 CSS 属性，例如：禁用按钮。

当禁用按钮时，它将变成灰色并无法点击。

jQuery 有一个 .prop() 方法，可以用其调整标签的属性。

下面是禁用所有的按钮的代码：

$(“button”).prop(“disabled”, true);
仅禁用 target1 按钮。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
  });
</script>

9、使用 jQuery 更改元素内部的文本
可以通过 jQuery 改变元素开始和结束标签之间的文本。甚至改变 HTML 标签。

jQuery 有一个 .html() 函数，能用其在标签里添加 HTML 标签和文本，函数提供的内容将完全替换之前标签的内容。

下面是重写并强调标题文本的代码：

$(“h3”).html(“jQuery Playground”);
jQuery 还有一个类似的函数 .text()，可以在不添加标签的前提下改变标签内的文本。换句话说，这个函数不会评估传递给它的任何 HTML 标记，而是将其视为要替换现有内容的文本。

给 id 为 target4 的按钮的文本添加强调效果。

查看我们的专栏文章来了解和 及其用途之间的差异。

注意，标签虽然传统上用来强调文本，但此后常用作图标的标签。 标签作为强调标签现在已被广泛接受。可以使用任意一种完成这个挑战。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target4").html("<em>#target4</em>")
  });
</script>

10、使用 jQuery 删除元素
现在学习用 jQuery 从页面移除 HTML 标签。

jQuery 有一个 .remove() 方法，能完全移除 HTML 标签。

用 .remove() 方法从页面移除 #target4 元素。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove()
  });
</script>

11、使用 jQuery 的 appendTo 方法移动元素
现在来把标签从一个 div 移动到另一个里。

jQuery 有一个 appendTo() 方法，可以选取 HTML 标签并将其添加到另一个标签里面。

例如，如果要把 target4 从 right well 移到 left well，可以设置如下：

$(“#target4”).appendTo(“#left-well”);
把 target2 元素从 left-well 移动到 right-well。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
  });
</script>

12、使用 jQuery 克隆元素
除了移动标签，也可以把元素从一个地方复制到另一地方。

jQuery 有一个 clone() 方法，可以复制标签。

例如，如果想把 target2 从 left-well 复制到 right-well，可以设置如下：

$(“#target2”).clone().appendTo(“#right-well”);
是否注意到这两个 jQuery 函数连在一起了？这被称为链式调用（function chaining），是一种用 jQuery 实现效果的简便方法。

克隆 target5 元素，并将其附加到 left-well 。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
  });
</script>

13、使用 jQuery 选择元素的父元素
每个 HTML 标签都默认 inherits（继承）其 parent（父标签）的 CSS 属性。

例如，h3 标签 jQuery Playground 的父标签是

，而这个标签的父标签是 body。

jQuery 有一个 parent() 方法，可以访问被选取标签的父标签。

下面的代码展示了使用 parent() 方法把 left-well 标签的父标签背景色设置成蓝色（blue）：

$(“#left-well”).parent().css(“background-color”, “blue”)
把 #target1 元素的父元素背景色设置成红色（red）。

<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")
  });
</script>

14、使用 jQuery 选择元素的子元素
把 HTML 标签放到另一个级别的标签里，这些 HTML 标签被称为该标签的子标签（children element）。例如，本次挑战中文本为 #target1、#target2 和 #target3 的按钮都是

标签的子标签。

jQuery 有一个 children() 方法，可以访问被选取标签的子标签。

下面的代码展示了用 children() 方法把 left-well 标签的子标签的颜色设置成 blue（蓝色）：

$(“#left-well”).children().css(“color”, “blue”)
将 right-well 元素的所有子元素设置为橙色（orange）。

<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")
  });
</script>

15、使用 jQuery 选择元素的特定子元素
已经看到了 id 属性对于 jQuery 选择器选取标签的便利，但这并不适用于所有情景。

幸运的是，jQuery 有一些其他的方法可以选取正确的标签。

jQuery 可以用 CSS 选择器（CSS Selectors）选取标签。 target:nth-child(n) CSS 选择器可以选取指定 class 或者元素类型的的第 n 个标签。

下面的代码展示了给每个区域（well）的第 3 个标签设置弹跳（bounce）动画效果：

$(“.target:nth-child(3)”).addClass(“animated bounce”);
给 well 元素的第二个子元素添加弹跳（bounce）动画效果。你必须选择具有 target class 的元素子项。

<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");
    $(".target:nth-child(2)").addClass("animated bounce");
  });
</script>

16、使用 jQuery 选择偶数元素
也可以用基于位置的奇 :odd 和偶 :even 选择器选取标签。

注意，jQuery 是零索引（zero-indexed）的，这意味着第 1 个标签的位置编号是 0。这有点混乱和反常——:odd 表示选择第 2 个标签（位置编号 1），第 4 个标签（位置编号 3）……等等，以此类推。

下面的代码展示了选取所有 target class 元素的奇数元素并设置 sheke 效果：

$(“.target:odd”).addClass(“animated shake”);
尝试选取所有 target class 元素的偶数元素并给它们设置 animated 和 shake class。请记住，偶数指的是基于零系统的元素的位置。

<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");
  });
</script>

17、使用 jQuery 修改整个页面
目前，已经完成了 jQuery playground。把它移除吧。

jQuery 也能选取 body 标签。

这是使整个 body 淡出的代码：$(“body”).addClass(“animated fadeOut”);

来做一些更好玩的事。给 body 标签添加 animated 和 hinge class。

<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>