美文网首页
四 继承

四 继承

作者: Gorden_x | 来源:发表于2017-08-25 17:21 被阅读0次

1.每个HTML元素根据继承属性都有父parent元素。
举个例子,h3 元素的父元素是 <div class="container-fluid">,<div class="container-fluid">的父元素是 body。
jQuery有一个方法叫parent(),它允许你访问指定元素的父元素。

举个例子:让left-well 元素的父元素parent()的背景色变成蓝色。
$("#left-well").parent().css("background-color", "blue")

试试让#target1元素的父元素的背景色变成红色。
<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>


image.png

2.每个人都继承了自己的父母的一些属性,譬如:DNA、相貌、血型、体型等等,HTML也不例外。
许多HTML元素都有children(子元素),每个子元素都从父元素那里继承了一些属性。
举个例子,每个HTML元素都是 body 的子元素, 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。

jQuery有一个方法叫children(),它允许你访问指定元素的子元素。

举个例子:让left-well 元素的子元素children()的文本颜色变成蓝色。
$("#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>


image.png

3.你已经看到了当用jQuery选择器通过id属性来选取元素的时候是多么方便,但是你不能总是写这么整齐的id。
幸运的是,jQuery有一些另外的技巧可以达到同样的效果。
jQuery 用CSS选择器来选取元素,target:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。

示例:你可以给目标元素的第三个子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");

任务:确保给目标元素的第二个子元素添加animated和bounce class,你可以通过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>


image.png

4.示例:获取class为target且索引为奇数的所有元素,并给他们添加class。

$(".target:odd").addClass("animated shake");

记住,jQuery里的索引是从0开始的,也就是说::odd 选择第2、4、6个元素,因为target#2(索引为1),target#4(索引为3),target6(索引为5。

任务:获取class为target且索引为偶数的所有元素,也就是target#1(索引为0),target#3(索引为2),target5(索引为4),并给它们添加class animated 和 shake。

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

5.我们已经玩了这么久的jQuery游乐场,是时候结束这一节了。

我们让整个body都有淡出效果(fadeOut): $("body").addClass("animated fadeOut");

让我们做一些更为激动人心的事情,给body添加class animated 和hinge 。

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

相关文章

  • 四 继承

    1.每个HTML元素根据继承属性都有父parent元素。举个例子,h3 元素的父元素是 , 的父元素是 body...

  • (四)继承

    1.原型链 javascript中没有类的概念,需要利用原型链来模拟。我们知道,构造函数、原型对象、实例之间有如下...

  • 四、继承

    继承已存在的类就是复用(继承)这些类的方法和域。在此基础上,还可以添加一些新的方法和域,以满足新的需求。 类、超类...

  • JavaScript 继承(四)原型式继承

    借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。 在 object() 函数内部,先创建了一个...

  • 第十三章 类继承(4)c++的三种继承方式

    (四)c++的三种继承方式 c++有三种继承方式,分别是公有继承,私有继承和保护继承。 (1)公有继承 这是最常用...

  • JAVA语言第二课

    JAVA面向对象——四大特征 继承篇——extendsJava 继承继承的概念继承是java面向对象编程技术的...

  • javascript继承之原型式继承(四)

    借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型 创建一个对象 通过object方法原型式继承...

  • 08. 纯虚函数、抽象类、多继承、菱形继承、虚

    一.虚函数 二.纯虚函数 三,虚析构函数 四.纯虚函数 五,多继承 六.多继承-虚函数 七.菱形继承 八. 虚继承...

  • 面向对象(七)组合优于继承?

    组合优于继承,多用组合少用继承。 1、为什么不推荐使用继承? 继承是面向对象的四大特性之一,用来表示类之间的 is...

  • Python-面向对象(二)

    四、继承方法 1、单继承 子类在继承的时候,在定义类时,小括号()中为父类的名字父类的属性、方法,会被继承给子类 ...

网友评论

      本文标题:四 继承

      本文链接:https://www.haomeiwen.com/subject/lsvudxtx.html