2019年12月14日
导读 在导航项目介绍里,介绍了用的技术,以及在上的文章里实现了 Mobile 的界面以及行为.这边文章优于只是在 PC 的布局方面(添加一些样式)行为上添加了删除的功能,以及 event 事件、阻止冒泡的行为。还有优化了一些细节.
查看效果图 主要添加功能如下：
删除功能 0-9 的热键功能 当我在 input 输入时,阻止冒泡行为(阻止 0-9 的热键功能) 不能添加一样的网站(例如：baidu.com 不存在两个 baidu.com (但可以存在 www.baidu.com)) 只能添加 10 个快捷方式图标 我觉得有点没有做到满意的是，只有 5 or 10 个图标时，布局很好看。(由于经验上的关系。这个项目我只能做到这里啦)主要原因是外面的宽度是写死的.flex 掌握的还不是很熟练 加油！figting！
……
阅读全文
2019年12月13日
前言 这篇文章实现适配 Mobile 端的页面,搜索功能以及添加网站快捷方式.(效果如下图)
预览：效果图 我们分成 3 个部分讲
HTML 视图 CSS 样式 JavaScript 行为 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no,viewport-fit=cover" /> <!--不用背,宽度=设备的宽度，最初的比例和最大和最小比例=1.防止用户双指扩大以及缩小填充设备显示可以 借鉴淘宝--> <title>前端导航网站</title> <!-- 加入通用css代码iconfont.cn用 --> <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> <link rel="stylesheet" href="style.css" /> </head> <body> <header class="globalHeader"> <form method="get" action="https://www.baidu.com/s" class="searchForm"> <input name="wd" type="test"> <button>搜索</button> </form> </header> <main class="globalMain"> <ul class="siteList"> <!……
阅读全文
2019年12月13日
前言： 项目预览：前端导航
预备知识
jQuery：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库 console.log(调式)：向 Web 控制台输出一条消息。 flex 布局：flex 是一个 CSS 的 display 属性中新添加一个值 媒体查询(@media)：@media CSS @规则 可根据一个或多个 媒体查询 的结果应用样式表的一部分。 Git&Github：代码版本管理&代码托管平台 新增知识
window.localStorage：只读的 localStorage 属性允许你访问一个 Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 SVG Symbol：可缩放矢量图形 iconfont.cn：阿里巴巴矢量图标库 阻止冒泡：阻止事件调用函的发生, JSON 序列化：JSON 是一种语法,用来序列化对象、数组、数值、字符串、布尔值和 null。 思路 首先我们要有一个设计稿(先有设计稿再做)
用figma.com来做设计稿查看设计稿
实现 Mobile 端 前端导航项目——上之 Mobile
实现 PC 端 前端导航项目——下之 PC
发布到 GitHub
写完之后我们需要上传 GitHub。上传之前我们需要 parcel 一键部署一下.……
阅读全文
2019年12月7日
前言本文是 jQuery 的设计模式——上的续篇.在上篇我们实现 jQuery 函数的实现.还有很多细节的问题需要我们来完善。
问题
我觉得 jQuery 这个名字太长了,我可不可以换一个符号来代替?可以. 我应该如何创建元素?用重载. 如果我调用了两次以及多次 jQuery 的返回的对象。是不是太占用内容了？是的,可以使用原型. 如果我把 jQuery 构造函数的实例对象当作实参传进去,该怎么区别它是一个 jQuery 实例？我们可以给它添加一个属性,值为 true.这样的话我们只需要判断这个属性是不是为 true。 注：整体大概思路是这样的,不过跟 jQuery 相比我们只是阐述了调用 jQuery()函数之后的链式操作和一些节约内存的问题以及如何重载的问题.学习 jQuery 的 DOM 操作有助于我们学习 vue react 等框架,如果看完你有所疑惑请看 jQuery 中文文档
1. 用\$代替 jQuery window.$ = window.jQuery= function() = { } //这样声明之后呢,我们就可以用$()来调用了。 2. 创建元素(用重载) window.$ = window.jQuery = function(selectorOrArrayOrTemplate){ let elements if(selectorOrArrayOrTemplate === 'string'){ if(selectorOrArrayOrTemplate.trim()[0] === '<'){ elements = createElement(selectorOrArrayOrTemplate) //创建一个元素 }else{ elements = document.……
阅读全文
2019年12月6日
前言:本文章的目的是介绍 jQuery 的基本功能,如果你想了解 jQuery 基本的思路可以去看 jQuery 的设计模式上和下的 blog。希望能帮助到你
目录
jQuery 如何获取元素 jQuery 链式操作是怎样的 jQuery 如何创造元素 jQuery 如何移动元素 jQuery 如何修改元素的属性 jQuery jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库,jQuery 是目前使用最广泛的 JavaScript 库
1. jQuery 如何获取元素 <!doctype html> <html> <head> <title>jQuery之获取元素</title> </head> <body> <div id="test"></div> </body> </html> $('#test') //利用id值来获取元素 //上述代码用ID的值去获取元素,$()函数执行完后,会返回一个对象。这个对象包含了对元素进行各种操作的方法 jQuery 基本思想和主要用法：就是当我获取一个元素之后,我可以直接进行各种操作。jQuery 的构造函数简写为\$
2. jQuery 链式操作是怎样的 <!doctype html> <html> <head> <title>jQuery之链式操作</title> </head> <body> <div id="test"> <div class="child">child1</div> <div class="child">child2</div> <div class="child">child3</div> </div> </body> </html> $("#test").……
阅读全文
2019年12月5日
前言：上篇 blog 我们用对象的风格进行了 DOM 操作的封装,跟原生 DOM API 操作相比很明显在调用时极大的减少开发者的时间,这次我们用著名 jQuery 设计模式来重新封装 DOM 操作(称之为链式风格)。
在你阅读本篇之前谨记三点：
第一次出现的 API 会注解,当第二次时还不明白不要回头看。去 MDN 里搜索相关 API 整个代码运行过程在最后有注释,不过先不要去看.思考这个部分谁都不能代替,莫要自欺欺人。最好能形成一个逻辑写一遍 如果你看了代码运行过程的注释,记住一定要要自己照着自己的逻辑写一遍,没写顺在看注释.再形成逻辑.第三遍还没顺,再看代码 1. 添加全局函数 //下面时一个函数,请注意 window.jQuery = (selectorOrArray){ //参数有可能是单个选择器或多个元素(数组形式) let elements //保存元素or多个元素(数组) if(typeof selectorOrArray === 'string'){ elements = document.querySelectorAll(selectorOrArray) }else if(selectorOrArray instanceof Array){ elements = selectorOrArray } return { } //注意了！本函数返回一个对象！我们会在对象实现addClass、find、each、parent、child、print、end //document.querySelectorAll() :查找指定选择器的全部元素 //typeof ：返回其类型 //instanceof:判断是否属于该构造函数的实例 } 当我们在调用 jQuery 时,会返回一个对象！并且根据指定选择器来寻找元素并且赋值给 elements 变量。
2. addClass():添加类名 <!……
阅读全文
2019年11月30日
前言 上篇 blog,我们学习了 DOM (Document Object model)操作.但是每个 API 的名字实在是有点长.这次我们把哪些 JS 本身的 API 给封装成一个库供大家便利。,
全局对象 window.dom = {} //我们提供一个全局对象供我们调用 增(Create) dom.create = (node){ //新增节点 const container = document.createElement('template'); container.innerHTML = node.trim() return template.content.firstChild } //Document.createElement() 方法 :创建由tagName指定的HTML元素 //<template></template> 内容模板元素,改内容在加载页面时不会呈现,但随后可以在运行时使用JavaScript实例化 //Element.innerHTML 属性：设置或获取HTML语法表示的元素的后代 //String.prototype.trim() 方法：会从一个字符串的两端删除空白字符.上下文中的空白字符是所有的空白字符(space,tab,no-break space等) //HTMLTemplateElement.content 属性 :返回<template>元素的模板内容 //Node.firstChild : 只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回null dom.after = (node,node2){ //新增弟弟 node.parentNode.insertBefore(node2,node.nextSibling) } //Node.parentNode 属性 : 返回指定的节点在DOM树中的父节点 //Node.insertBefore() 方法 ：方法在参考节点之前插入一个拥有指定父节点的子节点.如果给定的子节点是对文档中现有节点的引用,insertBefore()会将其从当前位置移动到新位置 //Node.nextSibling : 返回与该节点同级的下一个节点Node,如果没有返回null dom.before=(node,node2){ //新增哥哥 node.parentNode.insertBefore(node2,node); } //Node.……
阅读全文
2019年11月28日
title: “DOM编程” date: 2019-11-28T15:09:36+08:00
draft: false title: “DOM编程” date: 2019-11-28T15:09:36+08:00
draft: false 前言 //在进行认识DOM开始之前呢,希望你有如下知识: 1. JS语法,如变量、if else、循环 2. JS的其中数据类型: Number String Bool Symbol Null Undefined Object 3. 五个falsy值: 0 NaN '' null undefined 4. 函数是对象,数组也是对象 5. div和span标签 6. Css布局：flex 什么是 falsy 值？ 在 Bool 上下文中认定为 false 的值
1. 什么是 DOM(Document Object Model 文档对象模型) 1 . 网页里的各种标签按照数据结构来看是一个树的结构.(Document)
<!doctype html> <html> <head> <title>我是第三层</title> </head> <body> <div>我是第三层</div> </body> </html> <!……
阅读全文
2019年11月25日
数据结构(上) 队列 栈 链表 哈希表 树 队列(Queue)(FIFO):First-In First-Out 先入先出 队列实例 : 取号先进叫号先出
取号 1 ){document.querySelector('#screen').innerText = `请 ${queue.shift.call(queue)}号就餐`;document.querySelector('#queue').innerText = JSON.stringify(queue)}else if(queue.length === 1){document.querySelector('#screen').innerText = `请 ${queue.shift.call(queue)}号就餐`;document.querySelector('#queue').innerText = JSON.stringify(queue);document.querySelector('#newNumber').innerText=n=0}else{document.querySelector('#newNumber').innerText=0;}"叫号 当前号码：0 当前队列： let n = 0 let queue = [] console.log(queue); //const : 常量块级作用域,很像使用let语句定义的变量。常量的值不能通过重新赋值来改变,并且不能重新声明 //document.querySelector() : 返回文档中与指定选择器或选择器匹配的第一个html元素element。如果找不 // 到匹配项,则返回null //innerText : 属性表示一个节点及其后代的“渲染”文本内容 //JSON.stringify() ：方法将一个JavaScript值(对象或者数组)转换为一个JSON字符串, //Array.prototype.push() : 方法是将一个或多个元素添加到数组的末尾,并返回数组的新长度 栈(stack)(LIFO):Last In First Out 后进后出 let result = 0 let recursion = numbers =>{ if(numbers<=100){ return recursion((result+=numbers,++numbers)) }else{ return result } } recursion(1) //5050 //递归的步骤是怎么做的？调用函数时,在一个数组里进行压栈直到numbers等于101时。 //返回result并且把之前调用函数栈逐一释放,后进后出 链表(Linked List) 链表在 JS 里主要体现在对象里……
阅读全文
2019年11月23日
四种排序 选择排序 快速排序 归并排序 计数排序
选择排序(循环) 思路:每次查找最小值,拿最小值的索引下标跟数组升序下标逐步交换.
//交换 let swap = (array,i,j) =>{ let temp = array[i]; array[i]=array[j]; array[j]=temp; } //寻找最小值索引 let minIndex = (numbers) =>{ let index = 0; for(let i=1;i<numbers.length;i++){ if(numbers[i]<numbers[index]){ index = i; } } return index; } //选择排序(从小到大) let sort = (numbers) =>{ for(let i=0;i<numbers.length-1;i++){ let index = minIndex(numbers.slice(i))+i if(index!==i){ swap(numbers,index,i) } } return numbers; } //slice()：方法是 Array.prototype.slice();返回一个新对象, //这一对象是由一个begin和end决定的原数组的浅拷贝(包含begin,不包含end)。原始数组不会被改变 快速排序(quick sort)(递归) let quickSort = arr =>{ if(arr.……
阅读全文
-
上一页
-
1
-
2
-
3
-
4
-
下一页