web前端

一、 前端基础篇

推荐w3cschool，前端实战学习。
1.Css样式优先级：
！important —— 内敛样式 —— id的样式 ——class的样式顺序

JavaScript

在计算机科学中, data(数据)大于一切，因为它对于计算机的意义重大。JavaScript提供七种不同的data types(数据类型)，它们是undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。
变量命名：采用驼峰命名法 来设置一个 Javascript 变量，在 驼峰命名法 中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母均为大写。
转义字符列表：
Code Output
’ 单引号
" 双引号
\ 反斜杠符
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

JavaScript 使用索引操作多维数组
可以把 多维 数组理解成是一个 数组中的数组。当使用[]去访问数组的时候，第一个[index]访问的是该数组中的第N个子数组，第二个[index]访问的是第N个子数组的第N个元素。

例如

var arr = [
[1,2,3],
[4,5,6],
[7,8,9],
[[10,11,12], 13, 14]
];
arr[0]; // 等于 [1,2,3]
arr[1][2]; // 等于 6
arr[3][0][1]; // 等于 11

移除最后一项：array.pop();
移除第一项： array.shift();
添加到数组头：array.unshift();

删除对象属性：
delete 对象.属性名;
添加对象属性：
1.对象.属性名=值；
2.对象[属性名]=值；
*属性名可以为一个字符串或者变量

有时检查一个对象属性是否存在是非常有用的，我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true，反之返回 false。
举例

var myObj = {
top: “hat”,
bottom: “pants”
};
myObj.hasOwnProperty(“top”);// true
myObj.hasOwnProperty(“middle”); // false

JavaScript Object Notation 简称 JSON，它使用JavaScript对象的格式来存储数据。JSON是灵活的，因为它允许 数据结构 是 字符串，数字，布尔值，字符串，和 对象 的任意组合。

这里是一个JSON对象的示例：

var ourMusic = [
{
“artist”: “Daft Punk”,
“title”: “Homework”,
“release_year”: 1997,
“formats”: [
“CD”,
“Cassette”,
“LP” ],
“gold”: true
}
];

JavaScript 获取JSON属性值
通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。

下面是一个嵌套的JSON对象：

var ourStorage = {
“desk”: {
“drawer”: “stapler”
},
“cabinet”: {
“top drawer”: {
“folder1”: “a file”,
“folder2”: “secrets”
},
“bottom drawer”: “soda”
}
}
ourStorage.cabinet[“top drawer”].folder2;// “secrets”
ourStorage.desk.drawer; // “stapler”

将变量转为JSON格式：
var collectionCopy = JSON.parse(JSON.stringify(collection));

向下取整：0-19
Math.floor(Math.random() * 20);

在两个特定数字范围内的随机数间:
Math.floor(Math.random() * (max - min + 1)) + min

Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。
例如：如果我们想要找到字符串The dog chased the cat中单词 the，我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段：
/ 是这个正则表达式的头部
the 是我们想要匹配的模式
/ 是这个正则表达式的尾部
g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。
i 代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。

特殊选择器中的一种就是数字选择器\d，意思是被用来获取一个字符串的数字。
在JavaScript中, 数字选择器类似于: /\d/g。
在选择器后面添加一个加号标记(+)，例如：/\d+/g，它允许这个正则表达式匹配一个或更多数字。
尾部的g是’global’的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。

我们也可以使用正则表达式选择器 \s 来查找一个字符串中的空白。
空白字符有 " " (空格符)、\r (回车符)、\n (换行符)、\t (制表符) 和 \f (换页符)。
空白正则表达式类似于：/\s+/g
正则表达式选择器的大写版本来反转任何匹配（相反意思）。
例如：\s 匹配任何空白字符，\S 匹配任何非空白字符。

Bootstrap

以下是Bootstrap的12列网格布局如何工作的图：

函数 lookUpProfile 有两个预定义参数：firstName值和prop属性 。
该函数应检查firstName是实际联系人的firstName，给定的属性（prop）是该联系人的属性。
如果它们都存在，函数返回prop属性对应的值。

如果firstName 值不存在，返回 “No such contact”。

如果prop 属性不存在，返回 “No such property”。
var contacts = [
{
“firstName”: “Akira”,
“lastName”: “Laine”,
“number”: “0543236543”,
“likes”: [“Pizza”, “Coding”, “Brownie Points”]
},
{
“firstName”: “Harry”,
“lastName”: “Potter”,
“number”: “0994372684”,
“likes”: [“Hogwarts”, “Magic”, “Hagrid”]
},
{
“firstName”: “Sherlock”,
“lastName”: “Holmes”,
“number”: “0487345643”,
“likes”: [“Intriguing Cases”, “Violin”]
},
{
“firstName”: “Kristian”,
“lastName”: “Vos”,
“number”: “unknown”,
“likes”: [“Javascript”, “Gaming”, “Foxes”]
}
];

function lookUpProfile(firstName, prop){
// Only change code below this line
var hasName = false;//用来记录first是否存在
for(var i=0;i<contacts.length;i++){
if(contacts[i].firstName == firstName){
hasName=true;//存在该firstname
//查找是否存在属性prop
if(contacts[i].hasOwnProperty(prop)){
return contacts[i][prop];
}else{
return “No such property”;
}

}
}
if(!hasName){
return “No such contact”;
}
// Only change code above this line
}

// Change these values to test your function
lookUp(“Akira”, “likes”);

JQuery

$("#target1").addClass(“test”);
$("#target1").removeClass(“test”);
$("#target").css(“color”, “red”);
$("#target").prop(“disabled”,true);设为不可用
$("#target").remove();移除target元素
jQuery有一个.html()方法，可以让你在元素中添加HTML标签和文字，而元素中之前的内容都会被方法中的内容所替换掉。
以下代码显示如何重写和强调标题文本（使用em标签）：
$(“h3”).html(“jQuery Playground”);
jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能添加标签。换句话说，这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。

jQuery有一个appendTo()方法，可以让你把选中的HTML元素附加到其他元素中。
比如，我们想让target4从right-well移动到left-well，我们用以下代码：$("#target4").appendTo("#left-well");

jQuery有一个clone()方法，可以复制元素。
例如，如果我们想把target2从left-well复制到right-well，我们用以下代码：$("#target2").clone().appendTo("#right-well");

jQuery有一个parent()方法，可以允许你访问选定元素的父元素。
以下例子显示如何使用parent()设定left-well元素的父元素的背景色为蓝色：$("#left-well").parent().css(“background-color”, “blue”)

jQuery有一个children()方法，可以让你访问选定元素的子元素。
以下例子显示如何使用children()方法设置left-well元素的子元素的文本颜色为蓝色：$("#left-well").children().css(“color”, “blue”)

jQuery用CSS选择器来获取元素，target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素。
以下代码显示如何给jQuery Playground中的每个井中（left well和right well）的第三个子元素添加bounce类：
$(".target:nth-child(3)").addClass(“animated bounce”);

获取所有偶数/奇数（even/odd）元素。
以下代码显示如何通过targetclass获取所有奇数元素，并给它们添加class：
$(".target:odd").addClass(“animated shake”);
注意，jQuery里的索引是从0开始的，也就意味着会与直觉相反：:odd选择的是第2、4、6……个元素，因为索引是1、3、5……。

二、前端算法篇

1.翻转字符串算法

function reverseString(str) {
    const arr=str.split("");
   //var arr=str.split("");
return arr.reverse().join("");
}
reverseString("hello");

2.阶乘算法

5!=1x2x3x4x5=120
function factorialize(num) {
    var result=1;
    for (var i = 1; i <= num; i++) {
        result*=i;
    }
return result;
}
factorialize(5);

3.回文算法

palindrome(回文)是指一个字符串忽略标点符号、大小写和空格，正着读和反着读一模一样。

function palindrome(str) {
  // 先把字符串转化成小写
  str = str.toLowerCase();
  // 去除多余的标点符号和空格
  var re = /[\W_]/g; // 或者 var re = /[^A-Za-z0-9]/g;
  str = str.replace(re,""); 
  // 使用之前的反转字符串方法来反转字符串
  var reverseStr = str.split("").reverse().join(""); 
  return reverseStr === str;
}
palindrome("eye");

4.寻找最长的单词算法

function findLongestWord(str) {
    var arr=str.split(" ");
    var re=arr[0].length;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].length>re) {
            re=arr[i].length;
        } 
    }
return re;
}
findLongestWord("The quick brown fox jumped over the lazy dog");

5.设置首字母大写算法

function titleCase(str) {
    var arr=str.toLowerCase().split(" ");
    for (var i =0; i <arr.length; i++) {
        var ar=arr[i].split("");
        ar[0]=ar[0].toUpperCase();
        arr[i]=ar.join("");
    }    
return arr.join(" ");
}
titleCase("I'm a little tea pot")

6.寻找数组中的最大值算法

function largestOfFour(arr) {
// You can do this!
var array=[];
for ( i = 0; i<arr.length; i++) {
     var max = 0;
    for ( j = 0; j < arr[i].length; j++) {
       if (arr[i][j]>max) {
           max=arr[i][j];
       } 
    }
    array[i]=max；
}
return array;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

7.确认末尾字符算法

function confirmEnding(str, target) {
// "Never give up and good luck will find you."
// -- Falcor
  if(target.length > str.length){
    return false;
  } else{
    if(str == target || str.substr(str.length- target.length) == target){
      return true;
    }else{
      return false;
    }
  }
}
confirmEnding("Bastian", "n");
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

8.重复操作算法

循环拼接一个指定的字符串 num次，如果num是一个负数,则返回一个空字符串。

function repeat(str, num) {
// repeat after me
var result="";
if (num>0) {
for (var i =0; i < num; i++) {
   result+=str;
}
}
return result;
}
repeat("abc", 3);

9.字符串截取算法

function truncate(str, num) {
// Clear out that junk in your trunk
if (str.length>num) {
    if(num>3){
         str=str.slice(0,num-3)+"...";
    }else{
        str=str.slice(0,num)+"...";
    }
} 
return str;
}
truncate("A-tisket a-tasket A green and yellow basket", 11);