Free Code Camp 学习笔记
4 min readJun 18, 2020
jQuery
使用jQuery也要在script中标明引用库，否则无法使用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>JQuery是一种javascript的library，在client side发挥作用，不是服务器端，而是浏览器端。用于创建animation，handle input这类的事。
- 所有的jquery应该在html load 完成之后进行，所以script应该有一个：$(document).ready(function() { statements; }); 这么一行命令/
<script> $(document).ready(function() {console.log("hello world")});
//这行代码在浏览器load这个html时就会执行。如果不加这个document ready function，代码可能在浏览器load html之前就开始执行，这会有问题。
//所有待执行的jquery code都应该写在这个function里面
$("button").addClass("animated bounce");</script>animate.css: https://animate.style想使用animate.css的话，也需要在head中调用这个库，否则无法使用
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
</head>animated shake
animated bounce
animated fadeOut
2. addClass ： 为某一个selector （body/h4）或是class（.class-name)，或是id（#target-id-name) 添加某个特定的class，这个和bootstrap配合会很好用。
3. removeClass: 作用和addClass相反，移除自身的某个class；
4. $(“selector”).css(“key”, “value”);直接修改某个/类元素的css。
5. $(“selector”).prop(“property”, “change_to”);和修改css相对应
6. $(“selector”).remove() 清除所有selector
7. $(“selector”).appendTo(“.another-class-name”); 这个其实是一个move的过程，把这个selector选中的东西，转移到“.another-class-name”之下作为其子元素。
8. 如果不想move，而是copy，那就需要用到clone：
$("selector").clone().appendTo(".another-class-name");9. 取某个元素的parent level的元素：
$("selector").parent().addClass(".new-class-added");10. 当然也可以取children：
$("selector").children().css("color", "red");
$("selector:nth-child(ranking)").addClass("new-class-name");
$("selector:even/odd).prop("checked", true);注意，这个nth-child没有0th，从1开始的。even/odd就是选择所有的双数child或是单数child。
11. 所有元素：body
$("body").addClass("animated fadeOut");
