JS——JavaScript 1995年 布兰登·艾奇发明 JS是一种弱数据类型语言 数据的类型区分的不是那么严格
css1、css2、css3，就目前的使用情况而言，css2使用的比较多，因为css1的属性比较少， 而css3有一些老式浏览器并不支持，所以大家在开发的时候主要还是使用css2。css1：id选择器、 类选择器、标签选择器css2标签选择器类选择器id选择器全局选择器组合选择器继承选择器伪类 选择器css3:nth-child属性选择器。
架构：简单的说架构就是一个蓝图，是一种设计方案，将客户的不同需求抽象成为抽象组件，并且能够描述这些抽象组件之间的通信和调用。 框架：软件框架是项目软件开发过程中提取特定领域软件的共性部分形成的体系结构，不同领域的软件项目有着不同的框架类型。框架不是现成可用的应用系统。而是一个半成品，提供了诸多服务，开发人员进行二次开发，实现具体功能的应用系统。 设计模式：是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结，它强调的是一个设计问题的解决方法。
前端开发市场发展趋势
1.前端处于工程化开发阶段 主流框架：vue、react、angular 自动化平台：webpack、gulp 协作工具：git
2.以H5为主的移动端开发正在代替传统的ios/android开发 Hybrid 混合开发模式 微信二次开发 微信小程序 ReactNative.js移动端开发框架
3.逐步成长的全栈开发（node.js）
4.拥抱虚拟现实VR/AR WebGL（Web Graphics Library）
前端开发常用的IDE及浏览器等 1.网页三剑客 Adobe Dreamweaver Adobe Fireworks(Adobe Photoshop) Adobee Flash 目前设计效果图，很多公司都在用sketch 2.Sublime Text （打开速度特别快） 3.Webstorm（推荐）功能强 4.Atom（编辑速度快，基于浏览器） 5.HBuilder
浏览器内核： 前端开发要会使用HTML/CSS/JS编写代码， 编写代码的时候要遵循一些规范(W3C) 开发浏览器就是为了按照W3C的规范识别出开发者编写的代码， 并且在页面中绘制出预想的页面和效果（CPU：显卡）
浏览器兼容： 1.W3c发布的规范都是开发者们不断尝试的结晶 2.每个浏览器为了彰显自己的不同，不按照标准来却把标准中规定的效果用其他方式实现
页面中导入js（三种方式） JS三种导入方式： 1、行内导入
（onclick是当点击div的时候，alert弹出框的意思） （这个方法慎重使用，不安全） 2、内嵌式(内嵌导入和外链导入 不能合并到一起，如果当前是外链导入， 那么在script脚本块中编写的所有代码都不会再执行)
页面中导入css（四种方式） 1.行内（不推荐，html和css混淆，代码结构乱）：
2.内嵌:css导入式和外链式区别是什么？ 两者最先实现的结果是一样的，都是将独立的css文件引入到网页文件中。但是两者还是有细微的差别的。
其中link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。
而@import则是先将网页文件加载，再加载布局文件，这时候如果网速过慢的话，则会先出现没有布局的网页效果，就会显得很难看。
但是导入样式可以避免过多的网页文件指向一个css布局文件，如果采用link的话，可能会导致由于过多的网页文件同时采用一个布局文件而导致速度下降。 但是使用好的硬盘基本不会出现这样的情况。
一般会把css放在body上面 js放在body末尾 body中编写的都是html的标签，js很多时候需要这些元素，所以要保证元素加载成功， 才可以在js中获取到（js放在结构之后加载，js放在body末尾） 如果js放在html标签前面， js：window.οnlοad=function(){}页面中所有资源文件都加载完成执行操作
js输出方式： 1.alert(‘66’)；在浏览器中弹出一个提示框 输出字符串
2.confirm(‘66’);弹窗有确认和取消 点击确定按钮时收到true，点击取消收到false
3.prompt(‘66’)：在confirm基础上增加让用户输出的效果(可以写入) 用户点击取消按钮，获取结果null， 用户点击确定，获取用户输入内容（用户没输入，获取空字符串） 一般提示框用自己封装插件和组件来实现，不用内置的（使用原生js封装模态框组件）
JavaScript使用控制台输出 方便开发人员调试 F12开启浏览器控制台 控制台输出（输出什么格式显示什么格式）console.log(1); console.dir(1)比log更详细 console.table(1) 显示表格格式
JavaScript输出到网页 document.writeln(“123”);
JavaScript
ECMA script（ES）规定了JS一些基础核心的知识（变量、数据类型、语法规范、操作语句等） 3/5==6/7
DOM：document object model 文档对象模型，里面提供了一些属性和方法， 可以让我们操作页面中的元素
BOM（字节顺序标记）：browser object model 浏览器对象模型，里面提供了一些属性和方法， 可以让我们操作浏览器
变量和常量： 变量：值可以改变 常量：值不可以改变
var 变量名 = 赋值；（ES6中定义变量使用let）
js中的命名规范： 1、js这种严格区分大小写 2、遵循国际命名规则 （驼峰命名法） 3、第一个单词首字母小写，其余每一个有意义单词首字母大写。 4、命名的时候可以使用$、_、数字、字母，但是数字不能作为名字的第一位。 var $xxx:一般都是引用jq获取到的值 var _xxx:一般这样的情况代表变量是一个全局或者公用的变量。 5、js中很多的词都是有特殊含义的，我们这些词叫做 关键字；现在没有特殊含义，以后可能会作为关键词的， 我们叫做 保留字；而关键字和保留字都不可以随便用来命名。
字符串中的常用方法： charAt charCodeAt substr substring slice
js中的数据类型： 基本数据类型（值类型）： number 数字 String 字符串 boolean：布尔类型 null 空 undefined 未定义
引用数据类型： object 对象数据类型 {} 普通对象 [] 数组 /^%/ 正则
function 函数数据类型
js中，单引号和双引号包起来都是字符串（单双引号没有区别）
true false =》布尔类型：只有两个值 null undefined
{name：‘zfpx’,age:8} /^-?(\d|([1-9]\d+))(.\d+)?$/ 正则 function fn(){} …
JS中检测数据类型 typeof: 检测数据类型的运算符 instanceof: 检测某个实例是否属于这个类 constructor 获取当前实例的构造器 Object.prototype.toString.call 获取当前实例所属类信息
typeof 使用typeof检测，返回的结果是一个字符串，字符串中包含的内容证明了值是属于什么类型的 【局限性】 1、typeof null不是‘null’而是‘object’：因为null虽然是单 独的一个数据类型，但是它原本意思是空对象指针，浏览器使用 typeof检测的时候会把它按照对象来检测 2、使用typeof无法具体细分出到底是数组还是正则，因为返回的结果都是‘object’
对象数据类型object 每一个对象都是由零到多组 属性名（key键）：属性值 （value值）组成的，或者说有多组键值对组成的，每一组 键值对中间用逗号分隔
属性：描述这个对象特点特征的
对象的属性名是字符串或者数字格式的，存储的属性值可以是 任何的数据类型
获取某个属性名对应的属性值： obj.name 忽略了属性名的单双引号 或者 obj[‘name’] 不能忽略单双引号
如果属性名是数字： obj【0】/obj【‘0’】 不可以用obj.0
如果操作的属性名在对象中不存在：undefined
删除： 假删除： 让属性值赋值为null，但是属性还在对象中obj.sex=null; 真删除： delete obj.sex; 把整个属性暴力移出
函数数据类型也是按照引用地址来操作的 函数：具备一定功能的方法
function 函数名（）{ //函数体：实现某个功能的具体JS代码 }
输入函数名输出函数本身； 输入函数名() 把函数执行
函数只创建不执行没有意义：因为空间中存储的都是毫无意义的字符串
fun（）函数运行把函数体中的代码执行 浏览器创建一个供函数中代码执行的私有环境= 私有作用域
形参：形式参数（变量） 函数的入口
实参：函数执行传递给函数的具体值就是实参
[context].getElementsByTagName(‘tr’) 指定上下文[context]中，通过元素标签名获得一组元素
DOM： document.getElementById 一个元素 [context].getElementsByTagName 元素集合 [context].getElementsByClassName 元素集合 document.getElementByName 节点集合 document.documentElement 获取整个HTML对象 document.bode 获取整个BODY对象
getElementById 此方法的上下文只能是document 一个html页面中元素的id理论上不能重复 如果id重复 获取第一个id对应的元素对象
在ie 7 及更低版本浏览器中，会把表单元素的name值当作id来使用
获取id值为box1的所有元素标签 var allList = document.getElementsByTagName(’*’),
getElementsByTagName 上下文可以自己来指定 获取到的结果是一个元素集合（类数组集合）
1.获取的结果是集合 哪怕集合中只有一项，我们想要这一项，也需要从集合中获取出来再操作
2、在指定上下文中，获取所有子子孙孙元素中标签名叫做这个的（后代筛选）
getElementsByClassName 1、getElementsByClassName
jquery的目的 1.简化js代码书写 2.简化js的兼容问题 jq提供了一个工厂函数–实参–实例化$对象 js方式获取文档对象 DOM对象 jq方式获取文档对象 $对象 js==jq
获取父类parent 子选择 children 后代选择 find var allp =$("#oDiv1".find(“p”)); console.log(allp); 下一个兄弟 next 下面所有兄弟 nextAl 所有兄弟 siblings
js： childNodes获取当前所有的子节点(节点集合：类数组) children获取所有的元素字节点（元素集合） (box.children) parentNode 获取当前元素的父节点 previousSibling获取当前节点的上一个哥哥节点 nextSibling获取当前节点的下一个弟弟节点 firstChild:当前元素所有子节点中的第一个(不一定是元素节点) lastChild:当前元素所有子节点中的最后一个
DOM的增删改： //添加 document.createElement() 在JS中动态创建一个HTML标签
容器.appendChild（新元素） 把当前创建的新元素添加到容器末尾
容器.insertBefore（新元素，老元素） 在当前容器中，把创建的元素添加到老元素之前 //删除 容器.removeChild(元素) 在当前容器中把某个元素移除掉
容器.replaceChild(新元素,老元素) 当前容器中，拿新元素替换老元素
元素.cloneNode(false/true) 把原有的元素克隆一份一模一样的,false:只克隆当前 元素本身，true：深度克隆，把当前元素本身以及元 素的所有后代都克隆
CSS: 1、选择器 优先级别 == 位置 – 就近原则（距离被修饰对象越近） !important 无条件优先 内嵌式 高 内联式 次 外联 低 注意:CSS出现靠后、优先级别高 覆盖前面的样式
<div style="width:20px;height:40px;...."> style-attr #id .class|伪类|属性 元素|伪元素 * 继承 1000 0100 0010 0001 解释顺序 从右向左 #Odiv .classname li{尽快过滤掉无效对象} 建议 div#Odiv .cls1##第一部分：JQ选择器== 部分采用CSS选择器 ，部分扩展 “查” 1、基本选择器 # . * , 2、层级选择器 > " " + ~ 3、过滤选择器 1）基本过滤 :first :last :not() :even :odd :header gt(index) lt(index) eq(index) 注意：index 从0开始 2）可见性过滤 :hidden :visible ==== display type 3）内容过滤 contains() has() empty parent 4）属性过滤 [attr=value] [attr|=value] [attr^=value][attr$=value][attr*=value] [attr~=value][…] 5）子元素过滤 父元素中所有子元素 :first-child == 获取所有父元素中的第一个子元素 :last-child == 获取所有父元素中的最后一个子元素 :only-child == 获取所有父元素中只有一个子元素的子元素 :nth-child(index) 从1开始 获取指定位置元素 :nth-last-child(index) 父元素中所有同类子元素 :first-of-type == 获取所有父元素中同一类子元素的第一个元素 :… 6)表单过滤器 基本过滤器 = 不是CSS选择器，扩展 CSS选择器.filter(":?") 元素标签 :input == 捕获表单中所有的input、select、textarea、button元素 :button 属性 type="?" :text == 捕获表单中所有input[type=“text”] :password :radio :checkbox :submit :image == 捕获所有[type=“image”] 注意:image??? :reset :button == 捕获所有button、[type=“button”] :file == 捕获
方法: show hide css find next nextall siblings parent children get //状态选择器 :enabled :disabled :checked :selected :focus == 获取焦点 注意: $(":enabled") *:enabled 第二部分： JQ的DOM操作 == js的增、删、改 addClass toggleClass attr val text append prepend empty clone each .... JQ链式编程 == 返回值： $ == 大部分情况（所有的设置不存在返回值 -- jquery对象） 获取属性 == 返回属性的字符串， 特点 : get set all in one 方法 set --- all get --- first JS == 集合 、对象 1)style attribute == 字符串 ，对象 一、标签 二、样式 css样式 js原生 访问 css 三种 方式 复习: 1、元素对象具有属性 == 标准属性 title html href.... DOM操作API实现 == 重画 === 影响网页性能 CSS访问 : 属性 . 性能好 API == IE 和 其他 重画 性能 根据引入样式的三种方式分别对应三种访问 第一种 style elementO.style == 访问到API, cssText --- 内嵌样式字符串 渲染的效果？？？？ width: 属性 parentRule: 捕获标准属性对象 -- border、margin、padding (简、分)、background.. 第二种 API window 访问了接口cssStyleDeclaration /* 通过以下三种方式可以访问API 1、元素节点的style属性 2、cssStyle对象的style属性 3、getComputedStyle() */ currentStyle CSSStyle CSSStyleList 第三种 API DOM //document 访问内联和外链 styelSheets : 属性 （类数组对象） 下标 (styleSheetList) cssRules:属性 (CSSRuleList) 下标 (CSSStyleRule) style:属性 (CSSStyleDeclaration对象) cssText:属性 （string对象） JS的增删改查DOM createElement appendChild append prepend remove clone createTextNode ......文档筛选函数
属性函数 — attr()
文档操作函数
CSS函数 — css()
事件 click、hover
position定位 == 默认static、绝对、相对、固定 脱离原文档流
float定位 == 浮动
offset() 获取或者设置匹配元素的第一个元素坐标(文档的原点左上角(0,0))left向右为正 top向下为正
position() 获取匹配元素的第一个元素坐标
（距离最近的定位的父元素的位置，如果该元素前边所有元素都是默认static，则position的返回值与offset一致）offset == 设置或者返回当前匹配元素相对于当前文档的偏移 left top
position == 设置或者返回当前匹配元素相对于已定位的最近的父元素的偏移 left top
offsetParent == 返回距离指定元素最近的已定位的父元素对象
scrollLeft == 获取或设置指定元素相对于滚动条左侧的偏移
scrollTop == 获取或设置指定元素相对于滚动条顶部的偏移
补充CSS1\CSS2\CSS3
传统布局
table 精细化布局
div 灵活性布局
div+table
属性
position = static(默认)、absolute(绝对)、relative(相对)、fixed(固定)、sticky(粘滞)
static == 页面流中都是static，浏览器解释，top、left失效 top left属性规定位置 relative = 相对自身的左上角，移位后的元素占位 absolute = 相对最近的已定位的父元素，移位后元素不占位 fixed = 相对浏览器的位置，元素位置固定 sticky = relative+fixedfloat = left、right 不占位
clear = left 、right、bothdisplay = 终端类型 == 响应式布局 弹性布局flex = 元素(容器)–子元素(项目)–方向(一维) 局部响应 网格布局grid = 行+列 全局响应
-val() == input \ textarea \ select option \button
创建节点 $()函数
js == createElement createTextNodejq == $(“selector”) $("html标签") == 创建标签并转换成jquery对象插入节点
父子关系
$(“selector”).append(ele) == 用于在匹配元素的最后一个子元素之后插入ele
$(“selector”).prepend(ele) == 用于在匹配元素的第一个子元素之前插入ele
$(ele1).appendTo(ele) == 将匹配的元素插入ele中的末尾
$(ele1).prependTo(ele) == ？ 将匹配元素插入ele中的开头
兄弟关系
$(“selector”).before(ele) == 在匹配元素之前插入ele元素
$(“selector”).after(ele) == 在匹配元素之后插入ele元素
$(ele).insertBefor(“selector”) == 同before
$(ele).insertAfter(“selector”) == 同after
删除节点
remove() 删除DOM节点，但是保留jquery对象，不保留相关数据信息 click等事件 ？
detach() 删除DOM节点，但是保留jquery对象，保留相关数据信息 事件-
empty() 清空指定元素的内容
复制节点
clone() 复制DOM节点
替换节点
replaceWith()replaceAll()*** 预习内容 *** API手册
包裹节点wrap()wrapAll()wrapInner()遍历节点隐式遍历 == 适合于按页面流顺序遍历each() == 适合有条件遍历练习2:添加删除工具菜单
注意：button 和 input type=button button 默认有提交功能 type= reset |submit
multiple:是否允许显示多个列表
append() 有剪切粘贴作用
prepend()
appendTo()
prependTo()
before(ele)
after()
insertBefore()
insertAfter(ele)
remove()
detach()
empty()
clone()
replaceWith()
replaceAll()
包裹节点
wrap(html/jquery/DOM/selector) 为每个匹配到的元素添加父元素
wrapAll() 为全部匹配元素添加一个父元素
wrapInner() 为么个匹配的元素添加子元素
隐式遍历
遍历节点
each(function(index,element))
index : 遍历元素的索引，从0开始
element:当前的元素，一般使用关键字this表示当前元素
span标记不允许包裹块标记 == 建议
change 元素内容发生变化后触发的操作 input text area、select、radio、checkbox等
绑定事件
例如 $(selector).click(f(){…});
on（） 适用于当前对象，适合于动态添加元素
语法
on(事件名称，可选子元素们，可选传入事件处理函数的参数，触发的函数)
提醒 : one() 和on方法一样，但是one方法单次绑定
解绑
off() 解除on方法绑定的事件
Ajzx:可以无刷新状态更新页面 异步提交
Get $(‘input’).click(function () { KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').load('tes…_GET[‘url’] == ‘ycku’) { echo ‘瓢城Web俱乐部’; } else { echo ‘木有！’; } POST $(‘input’).click(function () { KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').load('tes…_POST[‘url’] == ‘ycku’) { echo ‘瓢城Web俱乐部’; } else { echo ‘木有！’; }
$(‘input’).click(function () { $.getScript(‘test.js’); });
