整理

代码/整理

术语整理

代码/整理

CSS:层叠样式表
CSS中的元素样式设置叫做类选择器：.be-text{color:blue;}
直接在元素当中添加属性的叫做内联样式（inline style）
类选择器的集合称为元素选择器
a标签链接的外部页面锚元素
* a标签链接的默认占位符#

HTML/CSS概念知识点整理

代码/整理/概括

文本属性 | html

无序号列表，例


    milk

    
cheese

    * 可以通过[list-style-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type)定义头部圆点样式；


    milk

    
cheese

Form表单 html

输入框标签
* placeholder输入框默认值（非标准语句，应减少使用），例
* action数据上传服务器，例
* required必填字段，伪类。例
* optional伪类提供可选外观样式
* radio单选按钮，例
* 所有关联的单选按钮都应该使用相同的 _name属性,例

                indr
                ggdr

                    * [](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)
    * `checkbox`**复选框**，例``
            * 嵌套在 ~中使用~
            * `checked`**默认选中**，[checked](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)。例`this button submit the form`
            * 会有一个默认的按钮样式，也可以通过CSS调整样式

常用标签 | html

盛装其他元素的容器包含所有的 _全局属性

全局属性
[[全局属性]]是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

border 边框 | CSS

border-color元素边框，例：.sye{boder-color:red;}
* 也可以写成类似border-top(方向)-color的形式,例.sye{border-color: red yellow green blue;}
border-width边框宽度，例：.sye{border-width: 1px;}。关于单位可以关注[[数值单位]]
border-style边框样式，具体样式参考[[边框样式]]，例：.sye{border-style:solid;}
* 一般情况下solid样式比较多；
border-radius圆角，例：.sye{border-radius:4px;}
* 有不同的写法例：
* border-radius: 30px; 四个角都是圆角
* border-radius: 25% 10%;第一个角和第三个角有圆角（左上角右下角）
* border-radius: 10% 30% 50% 70%;四个角不同的圆角（从左上角顺时针）
* border-radius:10% / 50%;解释
* 像素和百分比比较多
* 百分比作为单位出现时，语句应尽量在 _border-width后面，结果会根据先后顺序有不同样式展示

background 背景 | CSS

background可以直接写属性，例
* background: green; //绿色背景
* background: content-box radial-gradient(crimson, skyblue); //径向渐变
* background: no-repeat url("../../media/examples/lizard.png"); //图片背景
* background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); //重复图片
* //叠层图片

     background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),
            #eee 35% url("../../media/examples/lizard.png");

background-color背景色属性值为颜色值或者transparent关键词二选一。例background-color:red;
background-clip设置元素的背景（背景图片或颜色）是否延伸到边框下面background-clip.例
* background-clip: border-box //背景延伸到边框外沿（但是在边框之下）。
* background-clip: padding-box //边框下面没有背景，即背景延伸到内边距外沿。
* background-clip: content-box //背景裁剪到内容区 (content-box) 外沿。
* background-clip: TEXT //背景被裁剪为文字的前景色(只有chrome支持)。
* background-clip: inherit //继承
background-image为一个元素设置一个或多个背景图(在z轴上堆叠，第一个指定的图像最接近用户)
* 即使有图片情况下也应该绘制背景色———用于网络中断情况下使用
background-origin**规定了指定背景图片 _{background-image} 属性的原点位置的背景相对区域. **
* background-attachment 为fixed时，该属性将被忽略不起作用。
* background-origin: border-box //背景图片的摆放以border区域为参考
* background-origin: padding-box //背景图片的摆放以padding的区域为参考
* background-origin: content-box //背景图片的摆放以content的区域为参考
* background-origin: inherit //继承
background-position指定背景图片的初始位置（相对于 _{background-origin} 来说）例background-position: 25% 75%;
* 初始值：0% 0%
* 显示方式：positionX/Y=(容器的宽度-图片的宽度)* percentX/Y(百分比);
background-repeat定义背景图像的重复方式可以沿着水平方向/垂直方向/两个轴/不重复，例
* 单值语法
* background-repeat: repeat-x; //沿x轴重复，repeat-x等同与repeat no-repeat
* background-repeat: repeat-y; //沿y轴重复
* background-repeat：repeat； //沿着两个轴重复
* backround-repeat: space; //两端对齐的挤压伸缩适配
* background-repeat: round; //有足够空间添加下一个之前挤压拉伸
* background-repeat: no-repeat; //图像不会被重复
* background-repeat: inherit; //
* 双值语法
* background-repeat: repeat space //沿x重复，y轴两端对齐情况下挤压拉伸
* background

边框样式 border-style

代码/整理/细分概念 border-style

none和 _hidden 类似，不显示边框，重叠情况下优先级最低
[image:2D11AA56-BD08-4F76-A400-BF52F01DBBCD-294-00017510B2BA5D90/3A06FF2E-2BF3-4A5F-B2B7-7506EC06FB2E.png]
hidden类似 _none，不显示边框，重叠情况下优先级最高
[image:F44D96FB-AA3A-4304-835C-E45E66E82A01-294-00017510B2CA3F11/FD4B6476-7626-488C-8727-A58A03E5EBC0.png]
dotted显示为一系列圆点。标准中没有定义两点之间的建个大小，圆点半径是 _border-width 计算值的一半
[image:FF35EF3C-357A-4BE9-A4F0-EC7A599FF4A8-294-00017510B2D95E74/69B59C86-775E-40E5-8F60-8753CA7B6E9A.png]
dashed显示为一系列短的方形虚线。没有定义线段长度和大小，需要视不同实现而定
[image:6C57B15C-4BAB-4EED-86B1-B32093AC4E1E-294-00017510B2F47CC8/80506E16-309A-4BF0-AB22-6C3905720A32.png]
solid显示为一条实线
[image:1195804E-14AD-4AB2-AEFB-D65B4AEAC4B4-294-00017510B3384644/E52CC47E-011F-4F8A-A088-3692665B4FF5.png]
double显示为一条双实线，宽度= _border-width
[image:E4C64A9A-DD24-474B-AD7A-5B60692AA21C-294-00017510B3589B44/6B017AC1-963F-48FD-A2BC-22DA0A738ACB.png]
groove显示为有雕刻效果的边框，样式与 _ridge 相反
[image:EA285A02-A354-4642-BFD4-37A9F1453BF4-294-00017510B37F2F29/CE423011-F327-4A3D-AC41-855EABE9398B.png]
ridge显示为有浮雕效果的边框，样式与 _groove 相反
[image:295ACF67-6A6F-4DD4-BA1C-6A367A101F3A-294-00017510B3915675/6735DFC0-AE63-40EB-BC2C-AFAA0F2D7623.png]
inset显示为陷入效果的边框，与 _outset相反。当指定到 _{border-collapse}为 _collapsed的单位格时，会显示为 _groove的样式
[image:7EC4C7C9-70B3-4646-82AF-144C99636B2A-294-00017510B3A0FA52/F247DB22-A22F-47F2-9DA2-3460D11F7A15.png]
outset显示为有凸出效果的边框，样式与 _inset相反。当它指定到 _{border-collapse}为 _collapsed的单元格时，会显示为 _ridge的样式
[image:484BA383-2E67-4687-AD04-EA57AAE66023-294-00017510B3B31EBB/13A5DE03-2E03-4856-AF69-C643A882041E.png]

数值单位

代码/整理/细分概念

绝对长度单位

px每英寸96个左右，1px在不同设备上代表不同的数量的像素点
mm毫米
cm厘米（10毫米）
in英寸（2.54厘米）
pt榜（1/72英寸）
pc12点活字（1pc=12点）
mozmm一个实验单位，无论显示器的尺寸或分辨率如何，都会尝试在一毫米处进行渲染。很少会用到，但可能在移动设备特别有用。
1in=96px; 3pt=4px; 25.4mm=96px;

相对长度单位相对字体大小单温

em一般用来自动适应用户所使用的字体。1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。
ex1ex ≈ 0.5em是字体的x-height（相当于字体尺寸的一半）
rem相当于父级元素的font-size大小，单位前的数值与父级元素的大小成倍数关系，如2rem相当于父级元素的大小的2倍
lh等于元素行高l _line-height 的计算值
rlh等于根元素的行高 _line-height 的计算值

窗口比例的长度单位

vh相当于窗口高度的1%
vw相当于窗口宽度的1%
viEqual to 1% of the size of the initial containing block, in the direction of the root element’s inline axis（axis:轴）.
vbEqual to 1% of the size of the initial containing block, in the direction of the root element’s block axis（axis:轴）.
vmin相当于窗口高度宽度之间的最小值的1%
vmax相当于窗口高度宽度之间的最大值的1%

练习

检查回文字符串

代码/案例讲解 #其他/

案例：检查回文字符串 Check for Palindromes

如果给定的字符串是回文，返回true，反之，返回false。

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

注意你需要去掉字符串多余的标点符号和空格，然后把字符串转化成小写来验证此字符串是否为回文。

函数参数的值可以为"racecar"，"RaceCar"和"race CAR"。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function palindrome(str) {
  // 请把你的代码写在这里
  return true;
}
palindrome("eye");

提示可用的语句：

替换字符串中的字符String.replace()
将字符串中的字母转换为小写String.toLowerCase()

步骤解析：

排除字符串中的所有非单词字符；
统一所有字母的大小写;
定义一个变量用来承载倒序文本[[reverse]];
判断倒序文本与未倒序的文本是否相等，并输出结果；

function Palindrome(str) {                  //定义一个函数为Palindrome，需要输入参数str
  var a=str.replace(/\W+/g,'');             //把str参数中的所有非单词字符排除赋值给参数a
  a=a.replace(/\_+/g,'');                   //把a参数中所有下划线字符排除并赋值给a本身
  a=a.toLowerCase();                            //把a参数中所有字母转换为小写并赋值给a本身
  b=a.split("").reverse().join("");     //把a参数中所有字母倒序导出给b
  if(b==a){                                     //判断a是否等于b，并输出结果
    return true;
  }else{
    return false;
  }  
}

找出最长单词

代码/案例讲解

找出最长单词 Find the Longest Word in a String

找出最长单词

在句子中找出最长的单词，并返回它的长度。

函数的返回值应该是一个数字。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'

function findLongestWord(str) {
  // 请把你的代码写在这里
  return str.length;
}

findLongestWord("The quick brown fox jumped over the lazy dog");

提示可用的语句：

通过检索到的字符将字符串分割为数组String.split()
检索字符串长度/数组长度String.length

步骤解析1：

检索字符串中的空格并通过空格将字符串分割为数组；
检索数组每个字符串的长度并把最长长度赋值给变量；
输出变量；

function findLongestWord(str) {
  str = str.split(" ");                 //通过空格符分割字符串为数组
  var zc = 0;
  for(var i=0; i

 
 步骤解析2： 
  
  检索字符串中的空格并通过空格将字符串分割为数组； 
  
  
  通过Array.sort()对数组进行长度排序； 
  
  
  输出数组最后一位的长度； 
  
 function findLongestWord(str){
    str = str.split(" ");                   //通过空格符分割字符串为数组;
    var zc=str.sort(function(a, b) {        //通过Array.sort()对数组进行长度排序；
      return a.length - b.length;
    });
    return zc[zc.length-1].length;      //输出数组最后一位的长度；
}
findLongestWord("The quick brown fox jumped over the lazy dog");
 
 句中单词首字母大写 
 代码/案例讲解 
 句中单词首字母大写 Title Case a Sentence 
 确保字符串的每个单词首字母都大写，其余部分小写。 
 像'the'和'of'这样的连接符同理。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function titleCase(str) {
  // 请把你的代码写在这里
  return str;
}
titleCase("I'm a little tea pot");
 
 提示可用的语句： 
 String.split() 
 步骤解析1： 
  
  将字符串调整为纯小写并通过空格符分割成单词组成的数组； 
  把分割的数组首字母大写+其他字母； 
  组合单词字符串为语句字符串 
  
 function titleCase(str) {
  var a=str.toLowerCase();          //将字符串转变为小写
  a=a.split(" ");                       //通过空格将字符串分割为数组
  var zh=[];
  for (var i=0; i
 
 找出多个数组中的最大数 
 代码/案例讲解 
 找出多个数组中的最大数 Return Largest Numbers in Arrays 
 右边大数组中包含了4个小数组，分别找到每个小数组中的最大值，然后把它们串联起来，形成一个新数组。 
 提示：你可以用for循环来迭代数组，并通过arr[i]的方式来访问数组的每个元素。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function largestOfFour(arr) {
  // 请把你的代码写在这里
  return arr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
 
 提示可用的语句： 
 Comparison Operators 
 步骤分析： 
  
  对对象中每一个数组进行检索并使它们按照从大到小的顺序排序 
  读取每一个数组中的第一个添加到新定义的数组当中 
  
 function largestOfFour(arr) {
  var c=[];
  for (var i=0; i
 
 简短写法： 
 function largestOfFour(arr) {
  for (var i=0; i
 
 重复输出字符串 
 代码/案例讲解 
 重复输出字符串 Repeat a string repeat a string 
 （重要的事情说3遍） 
 重复一个指定的字符串 num次，如果num是一个负数则返回一个空字符串。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function repeat(str, num) {
  // 请把你的代码写在这里
  return str;
}

repeat("abc", 3);
 
 提示可用的语句： 
 Global String Object 
 步骤分析： 
  
  判断num是否为负数，是则输出空内容 
  否则，循环num次，每一次对对象a追加字符串str 
  合并数组a为字符串并输出 
  
 function repeat(str, num) {
  var a=[];
  if (num<0){           //判断num是否为负数，是则输出空内容
    return "";  
  }else{                    //否则循环num次，每次追加str到a对象上
    for (var i=0; i
 
 后期理解简化版 
 function repeat(str, num) {
  var a="";
  if(num<0){
    return "";
  }else{
    for(var i=0; i
 
 检查字符串结尾 
 代码/案例讲解 
 检查字符串结尾 Confirm the Ending 
 判断一个字符串(str)是否以指定的字符串(target)结尾。 
 如果是，返回true;如果不是，返回false。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function confirmEnding(str, target) {
  // 请把你的代码写在这里
  return str;
}

confirmEnding("Bastian", "n");
 
 提示可用的语句： 
 String.substr() 
 步骤分析： 
  
  获得target的长度 
  通过target的长度获得字符串str字符串结尾相同长度的字符串 
  比对target与str结尾的字符串输出结果 
  
 function confirmEnding(str, target) {
  var a=target.length;      //获得target的长度为a
  var b=str.length;         //获得str字符串的长度为b
  str=str.substr(b-a);      //将str结尾与a等长的字符串为第(b-a)到a位通过substr赋值给str
  if(target==str){              //比对缩短后的str与target获得结果
    return true;
  }else{
    return false;
  }
}
confirmEnding("Bastian", "n");
 
 简化版： 
 function confirmEnding(str, target) {
  return str.substr((str.length-(target.length)),str.length-1)===target;
}
confirmEnding("Bastian", "n");
 
 截断字符串 
 代码/案例讲解 
 截断字符串 Truncate a string 
 用瑞兹来截断对面的退路） 
 如果字符串的长度比指定的参数num长，则把多余的部分用...来表示。 
 切记，插入到字符串尾部的三个点号也会计入字符串的长度。 
 但是，如果指定的参数num小于或等于3，则添加的三个点号不会计入字符串的长度。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function truncate(str, num) {
  // 请把你的代码写在这里
  return str;
}

truncate("A-tisket a-tasket A green and yellow basket", 11);
 
 提示可用的语句： 
 String.slice() 
 步骤分析： 
  
  判断字符串长度是否小于num值，是则直接输出 
  判断字符串长度或num是否小于等于3，是则输出输出字符串的0到num位+”…“；否则输出字符串的0到Num-3位+”…“ 
  
 function truncate(str, num) {
  var a=str.length;
  if(a<=num){                       //判断字符串长度是否小于num值，是则直接输出
    return str;
  }else if(num<=3){             //判断num是否小于等于3，是则输出输出字符串的0到num位+”…“
    return str.substring(0,num)+"...";
  }else{                                //否则输出字符串的0到Num-3位+”…“
    return str.substring(0,num-3)+"...";
  }
}
truncate("A-tisket a-tasket A green and yellow basket", 11);
 
 猴子吃香蕉, 分割数组 
 代码/案例讲解 
 猴子吃香蕉, 分割数组 Chunky Monkey 
 （猴子吃香蕉可是掰成好几段来吃哦） 
 把一个数组arr按照指定的数组大小size分割成若干个数组块。 
 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; 
 chunk([1,2,3,4,5],2)=[[1,2],[3,4],[5]]; 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function chunk(arr, size) {
  // 请把你的代码写在这里
  return arr;
}

chunk(["a", "b", "c", "d"], 2);
 
 提示可用的语句： 
 Array.push()
 Array.slice() 
 步骤分析： 
  
  通过arr的长度/size得出最终会输出数组数量b 
  得出每一次的数组内容并把内容追加到a上，循环b次 
  输出a 
  
 function chunk(arr, size) {
  var a=[];
  var b=arr.length/size;                            //通过arr的长度/size得出最终会输出数组数量b
  for(var i=0; i
 
 简化版本 
 function chunk(arr, size) {
  var newArr=[];
 for(var i=0; i
 
 截断数组 
 代码/案例讲解 
 截断数组 Slasher Flick 
 返回一个数组被截断n个元素后还剩余的元素，截断从索引0开始。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function slasher(arr, howMany) {
  // 请把你的代码写在这里
  return arr;
}

slasher([1, 2, 3], 2);
 
 提示可用的语句： 
 Array.slice()
 Array.splice() 
 步骤分析： 
  
  直接输出arr中的第howMany到最后一位即可 
  
 function slasher(arr, howMany) {
  return arr.slice(howMany);
}
slasher([1, 2, 3], 2);
 
 splice方法版： 
 function slasher(arr, howMany) {
  arr.splice(0, howMany);
  return arr;
}
slasher([1, 2, 3], 4);
 
 比较字符串 
 代码/案例讲解 
 比较字符串 Mutations 
 （蛤蟆可以吃队友，也可以吃对手） 
 如果数组第一个字符串元素包含了第二个字符串元素的所有字符，函数返回true。 
 举例，["hello", "Hello"]应该返回true，因为在忽略大小写的情况下，第二个字符串的所有字符都可以在第一个字符串找到。 
 ["hello", "hey"]应该返回false，因为字符串"hello"并不包含字符"y"。 
 ["Alien", "line"]应该返回true，因为"line"中所有字符都可以在"Alien"找到。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function mutation(arr) {
  // 请把你的代码写在这里
  return arr;
}

mutation(["hello", "hey"]);
 
 提示可用的语句： 
 String.indexOf() 
 步骤分析： 
  
  将所有字符串转换为小写 
  检测第二个字符串中的字符在第一个数组中是否存在，不存在即输出false，循环第一个字符串的长度次 
  循环未输出false即输出true 
  
 function mutation(arr) {
  arr[0]=arr[0].toLowerCase();          //将所有字符串转换为小写
  arr[1]=arr[1].toLowerCase();
  for(var i=0; i
 
 过滤数组假值 
 代码/案例讲解 
 过滤数组假值 Falsy Bouncer 
 过滤数组假值 
 （真假美猴王） 
 删除数组中的所有假值。 
 在JavaScript中，假值有false、null、0、""、undefined 和 NaN。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask' 
 function bouncer(arr) {
  // 请把你的代码写在这里
  return arr;
}

bouncer([7, "ate", "", false, 9]);
 
 提示可用的语句： 
 Boolean Objects
 Array.filter() 
 步骤分析： 
  
  没太明白，之后有时间再回顾  
  
 function bouncer(arr) {
  return arr.filter(Boolean);
}
bouncer([7, "ate", "", false, 9]);
 
 摧毁数组 
 代码/案例讲解 
 摧毁数组 Seek and Destroy 
 金克斯的迫击炮！ 
 实现一个摧毁(destroyer)函数，第一个参数是待摧毁的数组，其余的参数是待摧毁的值。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function destroyer(arr) {
  // 请把你的代码写在这里
  return arr;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);
 
 提示可用的语句： 
 Arguments object
 Array.filter() 
 步骤方法： 
 function destroyer(arr){
  var a=arguments;
  function pt(abt){
    for(var i=0; i<=a.length;i++){
      if(abt==a[i]){
        return false;
      }
    }
  return true;
  }
  return arr.filter(pt);
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
 
 数组排序并找出元素索引 
 代码/案例讲解 
 数组排序并找出元素索引 Where do I belong 
 我身在何处？ 
 先给数组排序，然后找到指定的值在数组的位置，最后返回位置对应的索引。 
 举例：where([1,2,3,4], 1.5) 应该返回 1。因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3,4]，而1.5对应的索引值就是1。 
 同理，where([20,3,5], 19) 应该返回 2。因为数组会先排序为 [3,5,20]，19插入到数组[3,5,20]后变成[3,5,19,20]，而19对应的索引值就是2。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function where(arr, num) {
  // 请把你的代码写在这里
  return num;
}

where([40, 60], 50);
 
 提示可用的语句： 
 Array.sort() 
 步骤分析： 
  
  将num加入到数组arr中 
  为数组arr重新排序 
  检索num在与arr[i]相等的情况时输出i 
  
 function where(arr, num) {
  arr.push(num);                                //将num加入到数组arr中
  arr.sort(function(a,b){return a-b;}); //为数组arr重新排序
  for (var i=0; i
 
 步骤优化： 
  
  循环语句可以用indexOf()代替 
  
 function where(arr, num) {
  arr.push(num);
  arr.sort(function(a,b){return a-b;});
  return arr.indexOf(num);
}
where([40, 60], 50);
 
 凯撒密码 
 代码/案例讲解 
 凯撒密码 Caesars Cipher 
 凯撒密码 
 （让上帝的归上帝，凯撒的归凯撒） 
 下面我们来介绍风靡全球的凯撒密码Caesar cipher，又叫移位密码。 
 移位密码也就是密码中的字母会按照指定的数量来做移位。 
 一个常见的案例就是ROT13密码，字母会移位13个位置。由'A' ↔ 'N', 'B' ↔ 'O'，以此类推。 
 写一个ROT13函数，实现输入加密字符串，输出解密字符串。 
 所有的字母都是大写，不要转化任何非字母形式的字符(例如：空格，标点符号)，遇到这些特殊字符，跳过它们。 
 当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。 
 function rot13(str) { // LBH QVQ VG!
  // 请把你的代码写在这里
  return str;
}

rot13("SERR PBQR PNZC");  // 你可以修改这一行来测试你的代码
 
 提示可用的语句： 
 String.charCodeAt()
 String.fromCharCode() 
 步骤分析： 
  
  此处需要通过获取字符的UTF-18(即ACSII码),大写字母的UTF-18码区间在65-90之间，不在此区间的可以不进行运算 
  大于中间值(77)的可以-13并输出相应字符追加到新字符串当中 
  小于或等于中间值(77)的可以+13并输出相应字符追加到新字符串中 
  合并字符串并输出 
  需要注意的点： 
    
    .charCodeAt()方法的一般格式是：字符串.chartCodeAr(字符串索引) 
    .fromCharCode()方法一般格式是：字符类型.fromCharCode(UTF-18编码) 
   
  
  
 function rot13(str) {
  var tem=[];
  for(var i=0; i90){                    //首先把UTF-18不在65-90区间的原样输出
      tem.push(String.fromCharCode(ix));
    }else if(ix>77){                        //大于UTF-18中间值的-13并输出相应字符
      tem.push(String.fromCharCode(ix-13));
    }else{                                  //否则+13并输出相应字符
      tem.push(String.fromCharCode(ix+13));
    }
  }
  return tem.join("");
}
rot13("SERR PBQR PNZC");
 
 自动生成文本案例 
 代码/案例讲解 
 HTML 
 
  
  
    
       My 66 year old son rates this colour very gorgeous :-\)
      -Copy it to your clipboard to use it.
      
        
        
        New Quote
      
    
  

 
 CSS 
 bd{
  width:100%;
  height:100%;
}
.bgcl{
  position:absolute;
  width:100%;
  height:100%;
  transition: all 1s;
}
.tcbg{
  position:absolute;
  width:550px;
  position: absolute;
  left:50%;
  margin-left:-275px;
  top:200px;
  padding:40px 50px;
  background: #FFFFFF;
  box-shadow: 0 30px 150px 0 rgba(0,0,0,0.10);
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
}
.icon{
  font-size:38px;
  transition: all 1s;
}
.color1{
  color:#22d4b6;
  transition: all 1s;
}
.txt{
  font-size:30px;
  font-family:DIN-Bold;
  text-align: center;  
  transition: all 1s;
}
.designer{
  font-family: DINCond-BoldAlternate;
  font-weight:200;
  text-align:right;
  font-size:20px;
  margin-top:24px;
  transition: all 1s;
}
.twitter{
  float:left;
  text-align:center;
  width:40px;
  height:40px;
  font-size:20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:4px;
  color:#fff;
  transition: all 1s;
}
.twitter:hover{
  opacity:0.7;
  transition: all 1s;
}
.tumblr{
  margin-left:16px;
  transition: all 1s;
}
.newQuote{
  font-family:DIN-Bold;
  font-size:16px;
  width:auto;
  padding:16px;
  position:absolute;
  right:50px;
  transition: all 1s;
}
 
 JavaScript 
 function randomColor()
{
  var col=["#333","#7f92ab","#a88a4d","#6993c3","#f9824c","#4c80a8","#44a7b5","#0f52df"];
  var flo=Math.floor(Math.random() * col.length);
      
  return col[flo];
}

function randomTxtx()
{
  var jj=["It's sleek not just amazing!","This design has navigated right into my heart.","Found myself staring at it for minutes.","I want to learn this kind of hero! Teach me.","Amazing shapes!","Delightful, friend. I like the use of typography and layers!","Nice use of space grey in this shot =\)","So cool and fun =\)","Such radiant.","My 50 year old son rates this colour very beastly, friend.","Navigation, layers, shot, spaces – incredible mate","Revolutionary work you have here.","Ahhhhhhh...","Ivory. Engaging. It keeps your mind occupied while you wait."];
  var flo=Math.floor(Math.random()*jj.length);
  
  return jj[flo];
}


function abbr()
{
  c=randomColor();
  d=randomTxtx();
  
  var div1=document.getElementById('bbttnn');
  var txtx=document.getElementById('txtx');
  var designer=document.getElementById('designer');
  var twitter=document.getElementById('twitter');
  var tumblr=document.getElementById('tumblr');
  var bdcl=document.getElementById('bdcl');
  
  bdcl.style.background=c;
  txtx.style.color=c;
  txtx.innerHTML=d;
  designer.style.color=c;
  div1.style.background=c;
  twitter.style.background=c;
  tumblr.style.background=c;
  
}
 
 九月第三周学习笔记 
 代码/每周笔记 #now 
 CSS 
  
  并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。 
   float:left样式相当于是让div对象靠左，自然失去了本身宽度样式。 
  设置居中的一些方式：
 * 绝对定位方式（通过设置margin为自动，并把四个方向的绝对定位值设置为相等）： 
  
 position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 
     * 设置外边距（距离侧边50%-本身宽度/高度的一半）：
 
 position: relative;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;  
}
/*外边距为自身宽高的一半 未知容器的宽高，margin换transform：transform: translate(-50%, -50%)*/
 
     * 通过设置容器的flexbox居中方式
 
 display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
 
     * 文字垂直居中
 
 #content {
   line-height: 200px; /*等于其height*/
 }
 #content span {
   display: inline-block; /*设置为行内块*/
   width: 200px;    
   overflow: hidden; /*防止内容溢出*/
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 HTML 
  
   加粗  
  
 BootStrap 
  
   是Bootstrap专属标签/元素
 * class="btn-primary"原始按钮样式（未被操作）
 * class="btn-block"可用于, 
 
   class="btn-default"默认标准按钮 
   class="img-responsive"使图片变成响应式 
   class="text-center"文本居中 
   class="container-fluid"用于100%宽度，占据全部视口的容器 
 
 
 jQuery 
  
  jQuery通过选择器来选择一个元素的，然后操作元素做些改变。 
  需要在后台引入jQuery库 
   $(docment).ready(function{方法});添加jQuery方法  
   所有jQuery方法都是以$开始的，简称bling 
  ::引用:: ：
 * 引用元素的方式(“button”) (“div”) (h1)等
 * 引用相同class元素输入元素名并在之前加点(.well)
 * 引用id输入id并在之前加# (#well)
 * 按照索引顺序(1开始)引用目标元素的第n个子元素(.元素:nth-child(n))
 * 搜索class元素且索引为奇数的所有元素 (".元素:odd").
 * 索引为偶数的所有元素 (".元素:even").
 * 引用整个页面"body"
 * 检索结果的第n个$($(".slot")[n])
 * 
  ::方法::：
 * 添加class效果:.addClass("")
 * 去掉class效果：.removeClass("")
 * 改变CSS样式：.css("属性","属性值")
 * 调整元素的属性（如可选状态）.prop("属性",属性的状态)
 * 添加HTML标签和文字到元素.html()
 * 元素之前的内容都会被方法的内容所替换掉
 * 只修改标题不改变标记.text()
 * 移除HTML元素.remove()
 * 把元素移动到其他元素当中.appendTo()
 * 把元素拷贝到其他元素中.clone().appendTo().clone只有复制作用，不会产生实际效果，需要复合使用
 * 访问指定元素的父元素parent()，需要复合使用,例parent().css("color","red")
 * 访问指定元素的子元素children()，需要复合使用，例children().css("color","red")
 * *点击效果 .click(function(){});  
  ::效果::：
 * ("animated bounce") 回弹动画需要在后台Animate.css库(.addClass(“”)/.removeClass(""))
 * ("animated shake") 抖动效果需要在后台Animate.css库(.addClass(“”)/.removeClass(""))
 * ("animated fadeOut")渐隐效果需要在后台Animate.css库(.addClass(“”)/.removeClass(""))
 * ("disabled", true)使样式不可选(.prop("disabled", true))
 * ()重写和强调标题文本.html(文本)
 * ("animated fadeOut")悬挂退出需要在后台Animate.css库(.addClass(“”)/.removeClass("")) 
   点击事件$("元素").on("click", function(){});  
   调取接口： 
  
 $.getJSON("链接地址", function(json) {
  $("元素").html(JSON.stringify(json)); //?
});
 
  
   以文本形式显示JSON内对象的所有属性及值 一般用于引用JSON文件之前检查一下JSON提供的数据内容  
  
  $("#getMessage").on("click", function()
      {
        $.getJSON("JSON地址", function(参数1)
          {
            var 参数2 = "";
            参数1.forEach(function(参数3)
              {
                var keys = Object.keys(参数3); 
                参数2 +=""; 
                keys.forEach (function(参数4)
                  {
                    参数2 +="" + 参数4 + ": " + 参数3[key] +"
";
                  });
                参数2 += "

";
              })
              $(".message").html(参数2);
            });
        });
    }); 
 
 JavaScript 
  
  函数可以有自己的私有属性和私有方法
 * 私有属性var a;在函数内部直接定义即可
 * 私有方法 var a=function(){};不用命名直接跟在定义后面 
  对象拥有自己的特征，称为属性，对象还有自己的函数，称为方法 。 
  当函数需要结束但不想输出内容时return null  
  字符串想要加入特殊字符时，以图片格式为例
 * .html(''可以理解为三段：
 * '' 
  构造函数var 函数名 = function() {this.属性1 =值;this.属性2=值;this.属性3=值;};
 * 构造函数也可以添加参数用以快速修改属性。
 * 例var 函数名=function(参数1，参数2){this.参数1=值; 参数2=值2}
 * 调用构造函数是传入参数的方式就可以是var 新函数名=new 函数名(值1,值2);
 * 调用构造函数var abc = new Car();car()为旧的构造函数
 * 这里的myCar我们也叫做car的一个实例，但是跟普通对象没有区别
 * 构造函数加属性函数名.属性=值  
  
 针对数组的运算 
  
   .map方法迭代运算数组，例数组名2 = 数组名1.map(function(val){return val * 4;});对数组每个字符*4
 * 不会改变原数组
 * 函数内应该是个数学运算 
   .filter方法筛选数组，例数组名2 = 数组名1.filter(function(val){return val<5;});会筛选出小于5的字符
 * 不会改变原数组
 * 函数内应该是布尔运算 
   .sort方法按字母顺序或数字顺序排序，例数组名.sort(function(a,b){retunrn b-a});
 * 会改变原数组
 * 函数有两个参数一般是(a,b)函数内应该是return a-b从小到大排序或return b-a从大到小排序
 - [ ] 函数左侧也可以有等号用以赋值 
   .reverse方法翻转数组例数组名.reverse()
 * 会改变原数组  
   .concat方法可以把两个数组的内容合并到一个数组写法数组3=数组1.concat(数组2);
 * 不会改变原数组？
 * 以写法为例，新数组的排序是先数组1后数组2 
   .split方法使用指定字符将字符串 分割为数组例数组名=字符串名.split('分割字符');
 * 不会改变原数组？ 
   .join方法使用指定字符将数组 合并为字符串例字符串名=数组名.join('中间字符');
 * 不会改变原数组？ 
   .forEach对数组中的每个元素执行指定函数，例数组.forEach(function(参数){})  
  
 针对对象的运算 
  
   Object.keys()返回一个包含所有给定对象自身可枚举属性名称的数组。例Object.keys(对象名)
 * 返回对象的所有属性组成的数组  
  
 正则表达式 
  
   \d数字选择器  
   +允许正则表达式匹配一个或更多数字，例\d+  
   g在结尾加g(global的简写)，允许正则表达式找到所有匹配而不是仅仅找到第一个例/\b/g  
   转换大写可以匹配非小写形式的结果例\d选择数字 \D选择非数字 
   \s选择字符串中的空白例：/\s+/g空字符包含：
 * " "空格符
 * \r回车符
 * \n换行符
 * \t制表符
 * \f换页符 
  
 其他 
  
  字符 -> 字符串(多个字符的组合) -> 数组(多个数组或字符的集合) -> 对象(拥有不同的属性，每个属性对应不同的值) -> JSON(多个对象的集合)
 * 每个对象的属性和属性值的组合叫：键值对(key-value pairs)"。 
  通过浏览器获取当前位置 
  
 if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(function(position)
      {
        $("#data").html("latitude: " + position.coords.latitude + "
longitude: " + position.coords.longitude);
      });
  }   
 
  
   
    
     
    
   
  
    九月第三周学习笔记.jpg 
   
  
  
   
     
    
   
  
    练习.jpg 
   
  
  
   
    
     
    
   
  
    整理.jpg

九月第三周学习笔记分享

整理

代码/整理

术语整理

代码/整理

HTML/CSS概念知识点整理

代码/整理/概括

文本属性 | html

Form表单 html

常用标签 | html

border 边框 | CSS

background 背景 | CSS

边框样式 border-style

代码/整理/细分概念 border-style

数值单位

代码/整理/细分概念

绝对长度单位

相对长度单位 相对字体大小单温

窗口比例的长度单位

练习

检查回文字符串

代码/案例讲解 #其他/

案例：检查回文字符串 Check for Palindromes

提示可用的语句：

步骤解析：

找出最长单词

代码/案例讲解

找出最长单词 Find the Longest Word in a String

提示可用的语句：

步骤解析1：

步骤解析2：

句中单词首字母大写

代码/案例讲解

句中单词首字母大写 Title Case a Sentence

提示可用的语句：

步骤解析1：

找出多个数组中的最大数

代码/案例讲解

找出多个数组中的最大数 Return Largest Numbers in Arrays

提示可用的语句：

步骤分析：

简短写法：

重复输出字符串

代码/案例讲解

重复输出字符串 Repeat a string repeat a string

提示可用的语句：

步骤分析：

后期理解简化版

检查字符串结尾

代码/案例讲解

检查字符串结尾 Confirm the Ending

提示可用的语句：

步骤分析：

简化版：

截断字符串

代码/案例讲解

截断字符串 Truncate a string

提示可用的语句：

步骤分析：

猴子吃香蕉, 分割数组

代码/案例讲解

猴子吃香蕉, 分割数组 Chunky Monkey

提示可用的语句：

步骤分析：

简化版本

截断数组

代码/案例讲解

截断数组 Slasher Flick

提示可用的语句：

步骤分析：

splice方法版：

比较字符串

代码/案例讲解

比较字符串 Mutations

提示可用的语句：

步骤分析：

过滤数组假值

代码/案例讲解

过滤数组假值 Falsy Bouncer

提示可用的语句：

相对长度单位相对字体大小单温