Web组件化结构开发
JavaScript jQuery JSON AJAX Bootstrap
gegejiawei
啊
展开
-
ECMAScript 6 快速入门
两个命令 let constlet 不允许在同一作用域声明同名变量let 带来了块级作用域let 声明的变量没有变量提升,不允许在声明语句执行之前使用,哪怕外层作用域范围已经存在同名变量(该作用域范围内声明语句之前称之为叫暂时性死区)const 拥有 let 的一切功能const 用来声明常量,且声明的变量必须初始化const 声明的变量不允许修改栈地址或者基础类型的值变量的解构赋值数组结构对象解构字符串新的遍历方法 (for of) 用作遍历数组、字符串等一系列可迭代的..原创 2020-10-24 09:26:30 · 238 阅读 · 0 评论 -
Bootstrap框架介绍 学习打卡
思维导图界面准备工作开发工具:sublime intellij eclipse(jdk jre)使用技术:HTML + CSS + JavaScript需要引入的文件资源1、jQuery的文件资源2、bootstrap自身的文件资源官网Bootstrap官网https://www.bootcss.com/完整的bootstrap页面结构<!DOCTYPE html><html lang="en"><head> <meta原创 2020-06-19 15:53:11 · 283 阅读 · 0 评论 -
AJAX基础 项目实战
项目一:二级联动菜单实现jQuery对ajax的支持1、jQuery对ajax进行封装,提供了$.ajax();2、语法:$.ajax(options); – 传入json对象常用设置项及说明1、url 发送请求地址2、type 请求类型get | post3、data 向服务器传递的参数4、dataType 服务器响应的数据类型 text | json | xml | HTML | jsonp | scri原创 2020-06-18 16:54:24 · 1585 阅读 · 0 评论 -
AJAX基础 学习打卡
思维导图什么是Ajax?1、Ajax的全称:Asynchronous JavaScript and XML(异步的JavaScript和XML)他并不是新的编程语言,而是几种原有技术的结合体。2、ajax是一种无需重新加载整个网页的情况下,能够局部更新网页的技术。为什么要使用ajax – 优点1、通过异步刷新,提升了用户体验。2、优化浏览器和服务器之间的传输,减少不必要的数据返回,减少了带宽占用。3、ajax引擎在客户端运行,承担了一部分由服务器承担的工作,从而减少大量用户下的服务器负原创 2020-06-17 17:07:18 · 151 阅读 · 0 评论 -
JSON基础 学习打卡
思维导图JSON介绍1、JavaScript Object Notation(JavaScript对象表示法)2、JSON是轻量级的文本数据交换格式3、JSON独立于语言,具有自我描述性,更加容易理解语法{"sites":[ {"name":"渡课网","url":"www.dodoke.com"}, {"name":"百度网","url":"www.baidu.com"}, {"name":"网易","url":"www.163.com"}]}语法规则1、数据有键(k原创 2020-06-17 17:01:35 · 157 阅读 · 0 评论 -
jQuery动画基础 学习打卡
思维导图动画DOM以及css操作原理我们只需要以固定的时间间隔(例如0.1秒),每次DOM元素的css样式修改一点(例如:高度宽度增加10%),看起来就是动画的效果自定义动画animate()可以实现任意动画效果,需要传递的参数是DOM元素最终的css状态和时间(1) 例如:var div = $(‘#div’);(2) div.animate({opacity:0.25,width:’256px’,height:’256px’},3000);(3) 第一个参数:属性变化的对象(4) 第原创 2020-06-16 16:38:33 · 117 阅读 · 0 评论 -
jQuery事件 学习打卡
思维导图事件类型1、鼠标事件2、键盘事件3、其他事件4、事件参数5、事件绑定和取消鼠标事件鼠标事件 – 类型11、click 鼠标单击时触发2、dblclick 鼠标双击时触发总结1、双击事件是由两次单击完成,所以双击事件执行的时候必定会触发单击事件。2、一般情况下,单击双击分开执行,不会一起执行。鼠标事件 – 类型21、mousedown 鼠标按下时触发2、mouseup 按下鼠标放松时触发鼠标事件 – 类型31、mouseenter原创 2020-06-15 17:06:53 · 145 阅读 · 0 评论 -
jQuery选择器 学习打卡
思维导图选择器是jQuery的核心 $("")JavaScript:document.getElementById(“dom-id”);jQuery:$("#dom-id");返回的对象都是jQuery对象类似数组,每一个元素都是引用了DOM节点的对象基本选择器1、#id 根据给定的id匹配一个元素 优先级最高,效率最高2、element 根据给定的元素标签名匹配所有元素 效率相对较差,建议使用3、.class 根据给定的css类名匹配元素原创 2020-06-12 17:11:39 · 177 阅读 · 0 评论 -
jQuery入门 学习打卡
思维导图jQuery是什么?Write less,do more!jquery是一个快速,小巧而且功能丰富的JavaScript库。1、jQuery是一个JavaScript函数库2、jQuery是一个轻量级“写得少,做得多”的JavaScript库jQuery历史John Resig – jQuery的创始人和技术领秀2006.1.14 正式发布以jQuery发布自己的程序库2006.8 产生了第一个稳定版本 支持css选择符,事件处理和ajax交互jQuery的作用原创 2020-06-11 16:18:28 · 176 阅读 · 0 评论 -
JavaScript综合 注册案例
项目目标效果图表单验证1、用户名:一般由数字,字母,下划线组成2、手机号:一般是11位的阿拉伯数字3、数据有效性验证的2个途径:(1) Html4时期,通过js脚本验证一些表单元素;(2) Html5中,有些表单控件自带一些验证属性总结H5验证是存在的,但是有时候自己的需求进行验证,所以正则表达式必须存在的!拓展知识点elementList=document.querySelectorAll(selectors);1、elementList是一个静态的NodeList类型的对象2原创 2020-06-11 13:34:24 · 381 阅读 · 0 评论 -
JavaScript正则表达式 学习打卡
正则表达式的模式匹配模式:规则匹配:作比较 / 查找正则表达式都是操作字符串的什么是正则表达式1、普通字符(例如26个英文字母,数字等)2、特殊字符(有特殊含义的,例如\ . 等)创建正则表达式1、字面量或者直接量来创建2、通过构造函数创建正则表达式的模式修饰符1、i ignoreCase – 表示忽略大小写2、g global – 表示全局匹配3、m multiline – 表示对行匹配项目:正则表达式测试工具...原创 2020-06-08 21:46:24 · 181 阅读 · 0 评论 -
JavaScript面向对象2 学习打卡
思维导图封装概念把对象内部的数据和操作细节进行隐藏; private – 接口一般为调用方法1、JavaScript中没有专门封装的关键词 可以使用闭包创建这种模式 – 函数内部声明的变量外部是无法访问的2、能否被访问 取决于:公有和私有内容区别 – 能否在对象外部被访问特点1、这种模式有点消耗内存,一直return 创建对象;2、其实封装的本意就是局部的属性隐藏起来;// 封装 function A(){ function _xx(){ alert(111原创 2020-06-05 16:19:47 · 137 阅读 · 0 评论 -
JavaScript面向对象1 学习打卡
思维导图JavaScript面向对象(oop)Object Oritented Programming声明对象1、字面式声明2、用new操作符构造Object对象3、构造函数声明4、工厂方法声明5、原型模式声明6、混合模式声明遍历 继承遍历对象中的属性和方法,继承等方面内容1、遍历属性和方法2、封装,原型,原型链3、继承:原型继承,构造函数继承,call(),apply()4、对象冒充面向对象对代码的一种抽象,对外提供统一调用接口的编程思想。基于原型的面向对象基于原型原创 2020-06-04 16:02:55 · 121 阅读 · 0 评论 -
函数综合 简易计算器案例
项目说明名称:仿windows计算器功能1、实现单击按钮录入数字2、实现基础四则运算功能,并添加必要的异常处理,例如,除数为零3、实现小数点功能并添加异常处理:小数点只能出现一次4、实现正负号功能5、实现退位功能,已经是最后一位时,显示框显示为零6、清屏功能使用的知识点1、利用大量的自定义函数实现业务逻辑2、灵活运用事件及事件处理3、培养异常处理的编程方法4、培养并实践利用不同思路实现编程综合练习的目的1、将css、html和js有效的进行技术组合,实现业务功能2、锻炼和原创 2020-06-04 11:06:38 · 952 阅读 · 0 评论 -
JavaScript函数深入了解 学习打卡
思维导图课程介绍函数是什么玩意儿函数的定义和调用函数的参数和返回值对象的简单了解var cat = { // 基本数据类型 'name':'Tom', 'age':4, // 数组 'family':['father','mom'], // 放置函数 'speak':function(){ console.log('喵喵~'); }, // 继续存储对象 'friend':{ 'name原创 2020-06-02 16:36:41 · 122 阅读 · 0 评论 -
JavaScript变量和作用域 学习打卡
JavaScript基础回顾原创 2020-06-02 16:19:48 · 94 阅读 · 0 评论