前端学习之路（一）

下面是一些小知识的总结，觉得以博客的形式记录下来会对自己有所帮助，故在此推出前端学习系列，希望看到这篇博客的人也有所收获。废话不多说下面上硬菜。

1.引入谷歌字体

Import a Google Font

"https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

你可以将Lobster作为 font-family属性 的值应用到你需要的元素上。

2.将你的Input框设置为必填项

如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：

type="text" required>

3.使用BootStrap

你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>

使用JQueary

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

jQuery有一个.prop()的方法让你来调整元素的属性.
可以这样来让按钮不可选:

$("button").prop("disabled", true);

jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉
通过em[emphasize]标签来重写和强调标题文本：

$("h3").html("jQuery Playground");

jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能修改标记。换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示。

jQuery 用CSS选择器来选取元素，target:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。

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

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

注意：:nth-child(n)选择器与:eq(index)选择器的不同之处在于：
:eq(index)选择器只匹配一个元素，并且是所有匹配到的元素中的第index + 1个元素(索引index从0开始算起)；
:nth-child(n)选择器则需要判断匹配到的元素是否是其父元素的第n个子元素或符合其他特定要求(序号n从1开始算起)，如果是就保留，否则将被舍弃。

我们让整个body都有淡出效果

(fadeOut)： $("body").addClass("animated fadeOut");

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