diff --git a/00-前端工具/WebStorm的使用.md b/00-前端工具/WebStorm的使用.md index d07d5d2..c4fb6b4 100644 --- a/00-前端工具/WebStorm的使用.md +++ b/00-前端工具/WebStorm的使用.md @@ -141,10 +141,10 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置 -## tab键的代码补齐 +## 代码的自动补齐 -（1）在html文档中，输入`div*10`，弹出的效果如下： +（1）在html文档中，输入`div*10`，按tab键后，弹出的效果如下： ```html
@@ -180,6 +180,23 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置 20180122_1045.png +（3）方法的注释： + +方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 + +比如： + +```javascript +/** + * 功能：给定元素查找他的第一个元素子节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getFirstNode(ele){ + var node = ele.firstElementChild || ele.firstChild; + return node; +} +``` ## 常用快捷键 @@ -202,3 +219,7 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置 ``` 如果直接按 【ctrl+C】的话，复制的是整行的内容，把前面的空格也包含进去了。如果不想复制空格，有另外一个办法：将光标放在行尾，然后按住【shift+home】，就能选中你想要的内容了。 + + + + diff --git a/03-JavaScript基础/07-JavaScript基础：DOM操作.md b/03-JavaScript基础/07-JavaScript基础：DOM操作.md index 8fc6f31..c61e6eb 100644 --- a/03-JavaScript基础/07-JavaScript基础：DOM操作.md +++ b/03-JavaScript基础/07-JavaScript基础：DOM操作.md @@ -1,5 +1,5 @@ -> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 以下是正文。 @@ -224,6 +224,7 @@ JavaScript基础分为三个部分： position: relative; } img { + display: block; width: 1210px; height: 80px; background-color: blue; @@ -266,8 +267,8 @@ JavaScript基础分为三个部分： //3.书写事件驱动程序 //类控制 // topBanner.className += " hide"; //保留原类名，添加新类名 - topBanner.className = "hide";//替换旧类名 -// topBanner.style.display = "none"; + topBanner.className = "hide";//替换旧类名（方式一） +// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同 } @@ -301,16 +302,14 @@ JavaScript基础分为三个部分： //1.获取事件源 var img = document.getElementById("box"); - //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) + //2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件) img.onmouseover = function () { //3.书写事件驱动程序(修改src) img.src = "image/jd2.png"; // this.src = "image/jd2.png"; } - //1.获取事件源 - var img = document.getElementById("box"); - //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) + //2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件) img.onmouseout = function () { //3.书写事件驱动程序(修改src) img.src = "image/jd1.png"; @@ -320,9 +319,8 @@ JavaScript基础分为三个部分： - + - ``` @@ -331,7 +329,7 @@ JavaScript基础分为三个部分： ### 什么是DOM -DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 +DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 @@ -527,17 +525,8 @@ JS中的**父子兄**访问关系： 子节点数组 = 父节点.children; //获取所有节点。用的最多。 ``` -### nodeType -这里讲一下nodeType。 - -- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。 - -- nodeType == 2 表示是属性节点 了解 - -- nodeType == 3 是文本节点 了解 - -## DOM节点操作（重要） +## DOM节点的操作（重要） 上一段的内容：节点的**访问关系**都是**属性**。 @@ -591,7 +580,7 @@ JS中的**父子兄**访问关系： 解释： - 在参考节点前插入一个新的节点。 -- 如果参考节点为null，那么他将在父节点最后插入一个子节点。 +- 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。 ![](http://img.smyhvae.com/20180127_1257.png) @@ -603,6 +592,31 @@ JS中的**父子兄**访问关系： 我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。 + + + +**特别强调：** + +关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构： + +```html +
+
生命壹号
+
+ +
+
永不止步
+ +
+``` + + +上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情： + +20180129_2125.png + + + ### 删除节点 格式如下： @@ -682,7 +696,7 @@ JS中的**父子兄**访问关系： ![](http://img.smyhvae.com/20180127_1340.png) -方式2：（推荐） +方式2： ```javascript 元素节点.getAttribute("属性名称"); @@ -711,7 +725,7 @@ JS中的**父子兄**访问关系： myNode.className = "image2-box"; //修改class的name ``` -方式2：（推荐） +方式2： ```javascript 元素节点.setAttribute(属性名, 新的属性值); @@ -725,6 +739,7 @@ JS中的**父子兄**访问关系： myNode.setAttribute("id","你好"); ``` + ### 3、删除节点的属性 格式： @@ -741,6 +756,154 @@ JS中的**父子兄**访问关系： ``` + +**总结：** + +获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。 + +- 方式一的`元素节点.属性`和`元素节点[属性]`:绑定的属性值不会出现在标签上。 + +- 方式二的`get/set/removeAttribut`: 绑定的属性值会出现在标签上。 + +这其实很好理解，方式一操作的是属性而已，方式二操作的是标签本身。 + +另外，需要注意的是：**这两种方式不能交换使用**，get值和set值必须使用用一种方法。 + +举例： + +```html + +
我爱你中国
+ + +``` + + + +## DOM对象的属性 + +DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。 + +### innerHTML和innerText的区别 + +- value：标签的value属性。 + +- **innerHTML**：双闭合标签里面的内容（识别标签）。 + +- **innerText**：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent） + + +**获取内容举例：** + +如果我们想获取innerHTML和innerText里的内容，看看会如何： + +![](http://img.smyhvae.com/20180127_1652.png) + +上图显示，因为innerText识别不出标签，所以把标签也给获取到了。 + + +**修改内容举例：** + +![](http://img.smyhvae.com/20180127_1657.png) + +上图显示，因为innerText识别不出标签，所以把标签也给添加进去了。 + +### nodeType属性 + +这里讲一下nodeType属性。 + +- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。 + +- nodeType == 2 表示是属性节点。 + +- nodeType == 3 是文本节点。 + +### nodeType、nodeName、nodeValue + +我们那下面这个标签来举例： + +```html +
+ 生命壹号 +
+``` + +上面这个标签就包含了三种节点： + +- 元素节点（标签） + +- 属性节点 + +- 文本节点 + +获取这三个节点的方式如下： + +```javascript + var element = document.getElementById("box1"); //获取元素节点（标签） + var attribute = element.getAttributeNode("id"); //获取box1的属性节点 + var txt = element.firstChild; //获取box1的文本节点 + + var value = element.getAttribute("id"); //获取id的属性值 + + console.log(element); + console.log("--------------"); + console.log(attribute); + console.log("--------------"); + console.log(txt); + console.log("--------------"); + console.log(value); +``` + +打印结果如下： + +![](http://img.smyhvae.com/20180128_1935.png) + +既然这三个都是节点，如果我想获取它们的nodeType、nodeName、nodeValue，代码如下： + +```javascript + var element = document.getElementById("box1"); //获取元素节点（标签） + var attribute = element.getAttributeNode("id"); //获取box1的属性节点 + var txt = element.firstChild; //获取box1的文本节点 + + //获取nodeType + console.log(element.nodeType); //1 + console.log(attribute.nodeType); //2 + console.log(txt.nodeType); //3 + + console.log("--------------"); + + //获取nodeName + console.log(element.nodeName); //DIV + console.log(attribute.nodeName); //id + console.log(txt.nodeName); //#text + + console.log("--------------"); + + //获取nodeValue + console.log(element.nodeValue); //null + console.log(attribute.nodeValue); //box1 + console.log(txt.nodeValue); //生命壹号 +``` + +打印结果如下： + +![](http://img.smyhvae.com/20180128_1939.png) + + ## 我的公众号 想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 diff --git a/03-JavaScript基础/08-JavaScript基础：BOM的常见内置方法和内置对象.md b/03-JavaScript基础/08-JavaScript基础：BOM的常见内置方法和内置对象.md new file mode 100644 index 0000000..2c11cd4 --- /dev/null +++ b/03-JavaScript基础/08-JavaScript基础：BOM的常见内置方法和内置对象.md @@ -0,0 +1,281 @@ + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8401662.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + + +## BOM的介绍 + +### JavaScript的组成 + +JavaScript基础分为三个部分： + +- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 + +- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。 + +- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。 + +### 什么是BOM + +BOM：Browser Object Model，浏览器对象模型。 + +**BOM的结构图：** + +![](http://img.smyhvae.com/20180201_2052.png) + +从上图也可以看出： + +- **window对象是BOM的顶层(核心)对象**，所有对象都是通过它延伸出来的，也可以称为window的子对象。 + +- DOM越是BOM的一部分。 + +**window对象：** + +- **window对象是JavaScript中的顶级对象**。 + +- 全局变量、自定义函数也是window对象的属性和方法。 + +- window对象下的属性和方法调用时，可以省略window。 + +下面讲一下 **BOM 的常见内置方法和内置对象**。 + +## 弹出系统对话框 + +比如说，`alert(1)`是`window.alert(1)`的简写，因为它是window的子方法。 + +系统对话框有三种： + +```javascript + alert(); //不同浏览器中的外观是不一样的 + confirm(); //兼容不好 + prompt(); //不推荐使用 + +``` + +## 打开窗口、关闭窗口 + +1、打开窗口： + +``` + window.open(url,target,param) +``` + +**参数解释：** + +- url：要打开的地址。 + +- target：新窗口的位置。可以是：`_blank` 、`_self`、 `_parent` 父框架。 + +- param：新窗口的一些设置。 + +- 返回值：新窗口的句柄。 + +**param**这个参数，可以填各种各样的参数（），比如： + +- name：新窗口的名称，可以为空 + +- featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。 + +- fullscreen= { yes/no/1/0 } 是否全屏，默认no + +- channelmode= { yes/no/1/0 } 是否显示频道栏，默认no + +- toolbar= { yes/no/1/0 } 是否显示工具条，默认no + +- location= { yes/no/1/0 } 是否显示地址栏，默认no。（有的浏览器不一定支持） + +- directories = { yes/no/1/0 } 是否显示转向按钮，默认no + +- status= { yes/no/1/0 } 是否显示窗口状态条，默认no + +- menubar= { yes/no/1/0 } 是否显示菜单，默认no + +- scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes + +- resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no + +- width=number 窗口宽度（像素单位） + +- height=number 窗口高度（像素单位） + +- top=number 窗口离屏幕顶部距离（像素单位） + +- left=number 窗口离屏幕左边距离（像素单位） + +各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里。 + +2、关闭窗口：window.close() + +（1）和（2）的代码举例： + +```html + + + + + + + +点击我打开一个新的页面 +点击我关闭本页面 + + + +``` + +3、新窗口相关： + +- 新窗口.moveTo(5,5) + +- 新窗口.moveBy() + +- 新窗口.resizeTo() + +- window.resizeBy() + +代码举例： + +```javascript + var newWin = window.open("demo.html", "_blank", json); + newWin.moveTo(500, 500); +``` + + +## location对象 + +`window.location`可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。 + +### location对象的属性 + +- **href**：跳转 + +- hash 返回url中#后面的内容，包含# + +- host 主机名，包括端口 + +- hostname 主机名 + +- pathname url中的路径部分 + +- protocol 协议 一般是http、https + +- search 查询字符串 + +**location.href属性举例**： + +**举例1：**点击盒子时，进行跳转。 + +```html + +
smyhvae
+ + +``` + +**举例2：5秒后自动跳转到百度**。 + +有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例： + +```html + +``` + + +### location对象的方法 + +- location.assign()：改变浏览器地址栏的地址，并记录到历史中 + +设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转。 + +- location.replace()：替换浏览器地址栏的地址，不会记录到历史中 + +- location.reload()：重新加载 + + +## navigator对象 + +window.navigator 的一些属性可以获取客户端的一些信息。 + +- userAgent：系统，浏览器) + +- platform：浏览器支持的系统，win/mac/linux + +举例： + +```javascript + console.log(navigator.userAgent); + console.log(navigator.platform); +``` + +效果如下： + +![](http://img.smyhvae.com/20180201_2140.png) + + +## history对象 + +1、历史记录管理 + +2、后退： + +- history.back() + +- history.go(-1)：0是刷新 + +3、前进： + +- history.forward() + +- history.go(1) + +用的不多。因为浏览器中已经自带了这些功能的按钮： + +![](http://img.smyhvae.com/20180201_2146.png) + + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + + diff --git a/04-前端基础练习/03-DOM操作练习：基础练习.md b/04-前端基础练习/03-DOM操作练习：基础练习.md new file mode 100644 index 0000000..6ed6e50 --- /dev/null +++ b/04-前端基础练习/03-DOM操作练习：基础练习.md @@ -0,0 +1,715 @@ + +## DOM操作练习 + +### 举例1：点击按钮时，显示和隐藏盒子。 + +代码实现： + +```html + + + + + + + + + + +
+ 生命壹号 +
+ + + + + + +``` + +代码解释： + +当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。 + +另外，这里用到了`innerHTHL`属性，它可以修改按钮上显示的文字。 + +代码最终显示的效果如下： + +20180127_1518.gif + +### 举例2：美女相册 + +这里推荐一个网站： + +- 占位图片生成的在线网站： + +好处是：素材做出来之前，先留出空位，方便以后换图。比如这个链接可以生成400*300的占位图片。 + +需求： + +- （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。 +- （2）让p标签的innnerHTML属性值，变成a标签的title属性值。 + + +为了实现美女相册，代码如下： + +```html + + + + + + + + + +

+ 美女画廊 +

+注册 + + + +
+ + + +

选择一个图片

+ + + + +``` + +代码解释： + +（1）获取事件源：我们通过`ul.getElementsByTagName("a")`来获取ul里面的a元素。 + +（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定 + +（3）【重要】书写事件驱动程序：这里是用`img.src = this.href`，而不是用`img.src = aArr[i].href`。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。 + +（4）代码的最后一行：`retrun false`表示：阻止继续执行下面的代码。 + +实现的效果如下： + +20180127_1630.gif + +工程文件： + +- [2018-01-27-美女相册demo.rar](http://download.csdn.net/download/smyhvae/10227161) + +### 举例3：鼠标悬停时，显示二维码大图 + +```html + + + + + + + + + + + +
+ + +
+ + + + +``` + + +实现效果： + +20180127_1800.gif + + +## 表单元素的属性 + +表单元素的属性包括：type、value、checked、selected、disabled等。 + + +### 举例1：禁用文本框/解禁文本框 + + +```html + + +账号:

+密码: + + + + +``` + +当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。 + + +上方代码可以看到，**禁用文本框**的代码是： + +```javascript + inp.disabled = "no"; //让disabled属性出现，即可禁用 +``` + +我们的目的时让`disabled`这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。 + + + +**解禁文本框**的代码是： + + +```javascript + inp.disabled = false; // 方法1：让disabled属性消失，即可解禁。 + inp.removeAttribute("disabled"); //方法2：推荐 + +``` + + +我们的目的是删除`disabled`属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。 + +实现效果： + + + + + +### 举例2：文本框获取焦点/失去焦点 + +细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。 + +京东： + +20180127_2000.gif + +淘宝： + +20180127_2005.gif + +其实，**淘宝的提示文字，是用一个绝对定位的单独的标签来做的**。 + +京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。 + + +我们现在来实现一下。代码如下： + +```html + + + + + + + + +京东:

+淘宝:

+placeholder: + + + + +``` + + +实现效果如下： + +20180127_2010.gif + +如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。 + + +### 举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。 + +代码实现： + + + +```html + + + + + + + + + +账号：

+密码： + + + + +``` + +代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。 + + +实现效果： + +20180127_2035.gif + + +### 举例4：全选和反选 + + +对应的代码如下： + + +```html + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + 菜名饭店
+ + 菜品1木屋烧烤
+ + 菜品2蒸菜馆
+ + 菜品3海底捞火锅
+ + 菜品4面点王
+
+ + + +``` + +注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。 + +实现的效果如下： + +20180127_2320.gif + + + + +```javascript + +``` diff --git a/04-前端基础练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md b/04-前端基础练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md new file mode 100644 index 0000000..eb740ab --- /dev/null +++ b/04-前端基础练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md @@ -0,0 +1,453 @@ + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8371782.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +京东网页上，可以看到下面这种tab栏的切换： + +![](http://img.smyhvae.com/20180128_1750.gif) + +我们把模型抽象出来，实现一下。 + +## 举例引入：鼠标悬停时，current元素的背景变色 + +> 本段我们先举一个例子，因为这里用到了**排他思想**（先干掉 all，然后保留我一个）。对于理解tab切换，很有帮助。 + +完整的代码实现： + +```html + + + + + + + + + + + + + + + + + + +``` + +代码解释： + +鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是： + + +```javascript + //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current + //排他思想和for循环连用 + for(var j=0;j + + + + + + + + + + +
+
    +
  • 鞋子
    • +
  • 袜子
    • +
  • 帽子
    • +
  • 裤子
    • +
  • 裙子
    • +
+ 鞋子 + 袜子 + 帽子 + 裤子 + 裙子 +
+ + + +``` + +实现效果如下： + +![](http://img.smyhvae.com/20180128_1610.gif) + +上方代码的核心部分是： + +```javascript + for(var i=0;i + + + + + + + + + + +
+
    +
  • 鞋子
    • +
  • 袜子
    • +
  • 帽子
    • +
  • 裤子
    • +
  • 裙子
    • +
+ 鞋子 + 袜子 + 帽子 + 裤子 + 裙子 +
+ +
+
    +
  • 鞋子
    • +
  • 袜子
    • +
  • 帽子
    • +
  • 裤子
    • +
  • 裙子
    • +
+ 鞋子 + 袜子 + 帽子 + 裤子 + 裙子 +
+ +
+
    +
  • 鞋子
    • +
  • 袜子
    • +
  • 帽子
    • +
  • 裤子
    • +
  • 裙子
    • +
+ 鞋子 + 袜子 + 帽子 + 裤子 + 裙子 +
+ + + +``` + +注意，通过函数fn的封装之后，我们是通过参数element获取元素，而不再是document了。这样可以达到“抽象性”的作用，各个tab栏之间相互独立。 + +上方代码中，我们是通过给 liArr[i]一个index属性：` liArr[i].index = i`，然后让下方的span对应的index也随之对应显示：`spanArr[this.index].className = "show"`。 + +这样做比较难理解，根据上一段的规律，当然还有一种容易理解的方法是：**给liArr[i]增加index属性时，通过attribute的方式**，因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。 + +### 方式二：通过attribute设置index的值 + +基于上面方式一中的代码，我们修改一下js部分的代码，其他部分的代码保持不变。js部分的代码如下： + +```html + +``` + +不过，方式一的写法应该比方式二更常见。 + +**总结**：通过函数封装的形式，可以保证各个tab栏之间的切换互不打扰。最终实现效果如下： + +![](http://img.smyhvae.com/20180128_1651.gif) + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + diff --git a/04-前端基础练习/05-DOM操作练习：访问关系的封装.md b/04-前端基础练习/05-DOM操作练习：访问关系的封装.md new file mode 100644 index 0000000..5e4b7c4 --- /dev/null +++ b/04-前端基础练习/05-DOM操作练习：访问关系的封装.md @@ -0,0 +1,206 @@ + + + +## 访问关系的函数封装 + +（1）函数封装 + +新建一个文件名叫`tools.js`，然后在里面封装访问关系。代码如下。 + + + +tools.js: + +```javascript +/** + * Created by smyhvae on 2018/01/28. + */ + +function getEle(id){ + return document.getElementById(id); +} + +/** + * 功能：给定元素查找他的第一个元素子节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getFirstNode(ele){ + var node = ele.firstElementChild || ele.firstChild; + return node; +} + +/** + * 功能：给定元素查找他的最后一个元素子节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getLastNode(ele){ + return ele.lastElementChild || ele.lastChild; +} + +/** + * 功能：给定元素查找他的下一个元素兄弟节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getNextNode(ele){ + return ele.nextElementSibling || ele.nextSibling; +} + +/** + * 功能：给定元素查找他的上一个兄弟元素节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getPrevNode(ele){ + return ele.previousElementSibling || ele.previousSibling; +} + +/** + * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回 + * @param ele 元素节点 + * @param index 索引值 + * @returns {*|HTMLElement} + */ +function getEleOfIndex(ele,index){ + return ele.parentNode.children[index]; +} + +/** + * 功能：给定元素查找他的所有兄弟元素，并返回数组 + * @param ele + * @returns {Array} + */ +function getAllSiblings(ele){ + //定义一个新数组，装所有的兄弟元素，将来返回 + var newArr = []; + var arr = ele.parentNode.children; + for(var i=0;i + + + + + + + + +
    +
  • +
  • +
  • +
  • +
  • +
+ + + + + +``` + +注意：上方代码中，我们引用到了`tools.js`这个工具类。 + + + + + +``` + + +``` + + + + + + + + +``` + + +``` + + + + +``` + + +``` + + diff --git a/04-前端基础练习/06-DOM操作练习：通过style对象设置样式.md b/04-前端基础练习/06-DOM操作练习：通过style对象设置样式.md new file mode 100644 index 0000000..ab0304b --- /dev/null +++ b/04-前端基础练习/06-DOM操作练习：通过style对象设置样式.md @@ -0,0 +1,408 @@ + + +## style属性的设置和获取 + +在DOM当中，如果想设置样式，有两种形式： + +- className（针对内嵌样式表） + +- style（针对行内样式） + +这一段就来讲一下style。 + +需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如： + +```html + + + + + Title + + + + +
+ + + + +``` + +打印结果： + +20180129_1407.png + +上图显示，因为border属性不是行内样式，所以无法通过style对象获取。 + +## style属性的注意事项 + +style属性需要注意以下几点： + +- （1）样式少的时候使用。 + +- （2）style是对象。 + +我们在上方已经打印出来，typeof的结果是Object。 + +- （3）值是字符串，没有设置值是“”。 + +- （4）命名规则，驼峰命名。和css不一样。 + +- （5）只能获取行内样式，和内嵌和外链无关。 + +本段最开始的时候讲到的。 + +- （6）box.style.cssText = “字符串形式的样式”。 + + +`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例： + +```html + +``` + +打印结果： + +20180129_1410.png + +## style的常用属性 + +style的常用属性包括： + +- backgroundColor + +- backgroundImage + +- color + +- width + +- height + +- border + +- opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx)) + +注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，`-`不能作为标识符。比如： + +- DOM中：backgroundColor + +- CSS中：background-color + + +## style属性的举例 + +我们针对上面列举的几个style的样式，来举几个例子： + +- 1、改变div的大小和透明度 + +- 2、当前输入的文本框高亮显示 + +- 3、高级隔行变色、高亮显示 + +- 4、百度皮肤 + +- （继续下面PPT） + +- 显示隐藏/关闭广告/显示二维码（隐藏方法） + +- 提高层级 + +下面来逐一实现。 + + + +### 举例1：改变div的大小和透明度 + +代码举例： + +```html + +
+ + + +``` + + +### 举例2：当前输入的文本框高亮显示 + +代码实现： + +```html + + + + + + + + + + +
    + + + + + +
+ + + +``` + + + +### 举例3：高级隔行变色、高亮显示 + +```html + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
序号姓名课程成绩
+ 1 + 生命壹号语文100
+ 2 + 生命贰号日语99
+ 3 + 生命叁号营销学98
+ 4 + 生命伍号数学90
+ 5 + 许嵩英语96
+ 6 + vae体育90
+
+ + + + + + +``` + +实现的效果如下： + +20180129_1520.gif + +代码解释： + +上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码） + +```html + + +``` + +这种错误的代码，实现的效果却是：（未达到效果） + +20180129_1525.gif + + + diff --git a/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md b/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md new file mode 100644 index 0000000..891f302 --- /dev/null +++ b/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md @@ -0,0 +1,510 @@ + + +## 动态创建DOM元素的三种方式 + +- `document.write();` 不常用，因为容易覆盖原来的页面。 + +- `innerHTML;` 用的比较多。绑定属性和内容比较方便。(节点套节点) + +- `document.createElement;` 用得也比较多，指定数量的时候一般用它。 + + +**1、方式一：** + +```javascript +document.write(); +``` + +这种方式的好处是：比较随意，想创建就创建，可以直接在`write`里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。 + + +举例： + +```html + + + + + Title + + +
    + smyhvae +
+ + + + +``` + +效果如下： + +20180129_1908.png + + +**方式二：**innerHTML + + +举例如下： + +```html + + + + + Title + + +
    + smyhvae +
+ + + + +``` + +注意，上方代码中，是用是用符号`+=`，不是`=`，前者是在原来的基础之上增加，后者是替换。 + + +效果如下： + +20180129_2017.png + + + +**3、方式三：**利用DOM的api创建 + +利用DOM的api创建节点，有很多种： + +比如： + +- createElement() + +- appendChild() + +- removeChild() + +- insertBefore() + +- replaceChild() + + +这个我们在上一篇文章的`DOM节点的操作`这一段中已经讲到了。 + +```html + +``` + + +## innerHTML举例：在线用户的获取 + +现在要做下面这样一个页面： + +20180129_2151.png + +上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。 + +它的结构是：div > ul > li。每一个li就是一个头像。 + +如果在本地直接添加几个头像的话，代码是： + +```html + //往ul中添加li元素以及li元素中的内容 + ul.innerHTML += '
  • '+ + '生命壹号'+ + '

    生命壹号

    '+ + '
    • '; + ul.innerHTML += '
  • '+ + '生命壹号'+ + '

    生命壹号

    '+ + '
    • '; + ul.innerHTML += '
  • '+ + '生命壹号'+ + '

    生命壹号

    '+ + '
    • '; + +``` + +上方代码有两点比较重要： + +- 我们是通过`ul.innerHTML += 元素节点`的方式来不停地往ul里面加内容，比`createElement`的方式要方便。 + +- 元素的内容本身有双引号`"`，所以我们要用单引号`'`进行字符串的连接。 + +但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示： + +```html + ul.innerHTML += '
  • '+ + ''+users[i].name+''+ + '

    '+users[i].name+'

    '+ + '
    • '; + +``` + +这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下： + +```html + + + + + + + + + +
    +
    +
    +
    当前在线用户
    +
    +
    +
    +
    +
    +
      + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + + + +``` + + +## innerHTML举例2：模拟百度搜索的下方提示 + +要求实现的效果如下： + +20180201_2030.gif + +在这之前，我们先实现这样一个例子：**判断字符串以某个字符串为开头**。 + +**判断字符串是否以某个字符串为开头：** + + +```javascript + var str = "smyhvae"; + + //判断str是否以sm为开头？（给定字符串，然后他的索引值为0） + var num = str.indexOf("sm"); + //只有返回值为0，那么字符串才是以参数为开头 + //如果在任何位置都查询不到参数，则返回值为-1； + +``` + + +代码解释：我们可以通过`indexOf("参数")`来实现。如果返回的索引值为0，说明字符串就是以这个参数开头的。 + +为了实现上方gif图的搜索功能，完整版代码如下： + +```html + + + + + + + + +
    + + + + + + + +
    + + + + +``` + + + +## 动态操作表格 + + +方式1： + +``` + createElement() +``` + +方式2： + +- rows (只读，table和textarea能用) + +- insertRow() (只有table能调用) + +- deleteRow() (只有table能调用) + +- cells (只读，table和textarea能用) + +- insertCell() (只有tr能调用) + +- deleteCell() (只有tr能调用) + + +PS：括号里可以带index。用的不多。 + + + + + + + + + + + + + + + + + + + + + diff --git a/04-前端基础练习/08-JavaScript基础：定时器.md b/04-前端基础练习/08-JavaScript基础：定时器.md new file mode 100644 index 0000000..45ebc8a --- /dev/null +++ b/04-前端基础练习/08-JavaScript基础：定时器.md @@ -0,0 +1,214 @@ + + + +## 定时器的常见方法 + +- setInterval()：循环定时器。周而复始的执行（循环执行） + +- setTimeout()：定时炸弹。用完以后立刻报废（只执行一次） + + +### 定义定时器的方式 + +**方式一：**匿名函数 + +每间隔一秒打印一次： + +```javascript + setInterval(function () { + console.log(1); + },1000); +``` + + +**方式二：** + +每间隔一秒打印一次： + + +```javascript + setInterval(fn,1000); + + function fn(){ + console.log(1); + } + +``` + + +### 定时器高级：清除定时器 + +定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。 + +setTimeout()的道理是一样的。 + +代码举例： + + + +```html + + +``` + + +## 定时器举例 + + +### 举例一：5秒后关闭网页两侧的广告栏 + +假设网页两侧的广告栏为两个img标签，它们的样式为： + + +```html + + +``` + +5秒后关闭广告栏的js代码为： + +```html + +``` + + + +### 举例二：关闭京东顶部广告栏（带动画效果关闭） + +我们在[之前的文章](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/07-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9ADOM%E6%93%8D%E4%BD%9C.md)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。** + +我们可以用定时器来做。完整版代码如下： + +```html + + + + + + + + +
    +
    + + × +
    +
    +
    + +
    + + + + +``` + + +代码解释： + +注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。 + +定时器的返回值其实是number类型的，但我们习惯性地设置初始值为null。 + +实现效果： + + +20180201_2240.gif + + + + + + diff --git a/05-CSS进阶/01-CSS的一些小知识.md b/05-CSS进阶/01-CSS的一些小知识.md index 50a2ca6..5d0cfc2 100644 --- a/05-CSS进阶/01-CSS的一些小知识.md +++ b/05-CSS进阶/01-CSS的一些小知识.md @@ -1,8 +1,7 @@ -## CSS -### 隐藏盒子的几种方式 +## 隐藏盒子的几种方式 隐藏盒子，有以下几种方式： @@ -25,6 +24,8 @@ display: none; 隐藏盒子，而且不占位置(用的最多) ``` visibility: hidden; //隐藏盒子，占位置。 +visibility: visible; //让盒子重新显示 + ``` （4）方式四： @@ -48,7 +49,6 @@ margin-left: 1000px; - ### 设置盒子的半透明 方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明 diff --git a/05-CSS进阶/02-JS的小知识.md b/05-CSS进阶/02-JS的小知识.md index 3a82b98..69dc74e 100644 --- a/05-CSS进阶/02-JS的小知识.md +++ b/05-CSS进阶/02-JS的小知识.md @@ -6,7 +6,29 @@ JS的小知识.md ### 方法的注释 -方法写完之后，我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 +方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 + +比如： + + + +```javascript +/** + * 功能：给定元素查找他的第一个元素子节点，并返回 + * @param ele + * @returns {Element|*|Node} + */ +function getFirstNode(ele){ + var node = ele.firstElementChild || ele.firstChild; + return node; +} +``` + + + + + + ### 断点调试 diff --git a/推荐链接.md b/推荐链接.md index 4f7ce59..a16b1ac 100644 --- a/推荐链接.md +++ b/推荐链接.md @@ -107,4 +107,29 @@ 一般阿里社招都是招3-5年的P6+高级工程师。面试官明知道作者只有一年工作经验，在面了这么多轮之后却来一句：“我们只要高工”。这是不是太欺负人了？ +### 2018-01-28 + +- [WEB前端工作五年了，我来告诉你如何系统的学习现在的JAVASCRIPT](http://www.cnblogs.com/gongyue/p/8073235.html) + + + +### 2018-01-29 + +- [最棒的 JavaScript 学习指南（2018版）](https://www.cnblogs.com/lhb25/p/8361799.html) + + +- [我们为什么选择Vue.js而不是React](http://www.infoq.com/cn/news/2016/12/why-Vue-js-no-react) + + +- [【长文慎入】通信十年—通信行业分析与跳槽之路](【长文慎入】通信十年—通信行业分析与跳槽之路) + + +- [我在深圳南山写代码：是在改变世界还是养家糊口](https://news.cnblogs.com/n/588481/) + + +### 2018-01-31 + +- [我所理解的前端](https://www.cnblogs.com/Smiled/p/8377188.html) + + diff --git a/面试相关/个人感悟.md b/面试相关/个人感悟.md new file mode 100644 index 0000000..80d08ec --- /dev/null +++ b/面试相关/个人感悟.md @@ -0,0 +1,8 @@ + + + +### 2018-01-29 + +长期写博客的人，最少能证明他是一个善于思考和总结的人。 + +这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html) \ No newline at end of file diff --git a/面试相关/面经/面经链接推荐.md b/面试相关/面经/面经链接推荐.md index 461262f..091685e 100644 --- a/面试相关/面经/面经链接推荐.md +++ b/面试相关/面经/面经链接推荐.md @@ -12,3 +12,23 @@ 八年前的面经，咋记得这么清楚？ +### 2018-01-27 + +- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html) + + + + + + + + + + + + + + + + +