jQuery

jQuery

http://jquery.com/ ：官网

js框架

jQuery的目的

用jQuery实现某些效果

学习jQuery的编程思想（隐式循环，异步机制）

了解到后面框架的走向

发起http请求：script标签对 css 所有有链接的地方

js语言的核心概念 ：单线程异步机制

如何优化HTML页面 加载 渲染速度

​ 1.将js文件中放到HTML的最后执行

​ 2.将HTML页面以及加载的其他内容（js内容）进行压缩和混淆

​ 3.压缩图片（png:无损压缩，带透明通道 jpeg:有损压缩 gif:带透明通道，带动态通道的有损压缩）

​ 4.图片背景（spring技术） 图片精灵

window.onload:页面中所有资源都加载完成

document.addEventListener(‘DOMContentLoaded’,function()) // html结构加载完 执行

绑定事件的方式：

​ 1.对象. on+event 同一个元素不能重复的执行同一个事件

​ 2.document.addEventListener(”,function()) //w3c规定 的新的方式

​ 3.直接写在html中/直接量的方式

​

​

现在浏览器中都能够识别

document.getElementByClassName（）

document.querySelector()

document.querySelectorAll()

document.getElementByTagName（） //所有的浏览器都支持

jQuery备注：

​ jQuery 1.x 版本 考虑IE8 以下的版本

​ jQuery 2. x 版本以上 不考虑IE8 以下的版本

IEtext

npm nodejs的包管理工具

-webkit-linear-gradient：设置渐变色

-webkit-radial-gradient(20px 20px,#fff,red 60%) 径向渐变

闭包的目的：记录局部变量的变化

闭包的形成

​ 1.当一个函数被另外一个函数包含，

​ 2.当里层的函数引用的外部函数的变量，

​ 3.当调用里层函数的时候

递归—容易导致死循环

​ 1.退出的条件

​ 2.执行的顺序

函数自己调用自己

jQuery原理

学习js目的，人机交互 动态的操作html页面

常用前端脚本语言，javascript

后台 php Java nodejs .net c++

html css 需要浏览器解析-webkit- -moz- -o- -ms-

jquery:解决浏览器兼容问题

通过${} 进行各种操作

jquery 构造了一个庞大的复杂的对象

特性

​ 1.链式调用

​ 2.隐式循环

为什么放在prototype上

​ 占用一定的空间去保存方法

jquery 称为 js 的框架 基于js所有的积累和认识 query_查询

更快 更方便，更不容易出错

trim() 只能使用在高版本的谷歌浏览器中

函数的作用

​ 1.正常的函数

​ 2.函数自己也是一个对像

​ 3.函数可以作为类

09-05

单线程异步机制的语言

$(function(){                 //表示在下列事件完成后执行函数

    $('div')

})

document.addEventListener（‘DOMContextLoaded’

Babel: 将低版本浏览器不识别的关键词 如class let 箭头函数编译成可识别的ECMA5的语法

对象是类的实例化 和实现

类是对象的抽象 是对事物的想象归纳总结

为什么放在原形函数上

​ 节省内存

for in——是用来遍历对象的，ES6 中的新方法

方法和属性

​ 1.jquery对象的

​ 2.jquery函数对象（工具方法0

1.实例化对象去调用（jquery的方法）

减少全局变量的污染

命名空间

函数的功能

1.函数 2.本身也是一个对象 3.可作为一个类

jquery的三大特性

​ 1.封装 对原有的属性方法进行封装

​ 2.实现了隐式的循环

​ 3.琏式的调用

​ 4.query 实现了简单极致的查询方式：一醉简单最多元的方式获取到我们指定的元素

$()可以传的对象

1. 选择器 将选择器指定的元素放到jquery对象里
2. 函数 当函数加载完执行
3. DOM对象 将dom对象放进jquery对象里
4. html标签 创建元素
5. 放入jquery对象
6. 空 返回一个什么元素也不包含的jquery对象

input type=file 上传文件 multiple 可上传多个

操作上 进行抽象和封装 编程思想

js 操作dom元素

IE浏览器中，在一行的元素，如果有浮动的元素，那么这一行的元素必须全部浮动，否则会换行，出现兼容性问题

jQuery查找

​ 依赖于现有的元素去查找东西

jQuery过滤

​ 基于现有的元素根据条件找东西

队列

js 单线程异步机制：单线程：同一时间处理一件事情

​ 用尽量少的资源做尽量多的事情

​ 不擅长密集的CPU计算

js中所有要耗费事件或者不确定执行的代码，都是异步执行的

​ 所有事件都是不确定的，都是异步的

​ 所有耗费时间的，都是异步的

​

多线程

不建议使用：回调地狱

jquery3种队列

​ 1.动画队列 头等队列 可自己实现出队和入队列

​ 2.‘fx’队列 2等队列 默认是fx 只有第一个会自己执行

​ 3.自定义队列 需要手动出队入队

插件：扩展功能

Auxure:操作鼠标键盘 快速s生成网页 可抛弃的

Ajax（async javascript and Xml）

本身就是异步执行的

async javascript :异步执行的js

xml html的祖先 html是xml的扩展

xml 存储信息 html 显示信息

并非缩写而是创体检的名字，是一种创建间交互式网页

xml t通过文档存储数据

应用

​ 1.表单的验证

​ 2.利用Ajax按需加载

​ 3.类似投票系统（页面不跳转，实时查看信息）

​ 4.文本输入提示

什么是Ajax（存在的意义）

​ 利用js的异步机制，无刷新的，或按需要来加载需要的数据

​ 提高用户的体验性，提高页面的加载速度，来达到模拟桌面端软件的操作模式

​ 基于 b/s 架构的软件实现 c/s 架构的软件操作的便利性，ajax

b/s c/s

​ 1.网络速度的提升 2.硬件的提升 3.浏览器速度的提升

​

1. ​ ps canvas 网页版ps

   硬件的制约，受网速限制-

Ajax如何发送数据/对方如何接受

• http协议:浏览器和服务器之间的通讯协议 https svn

  file协议:浏览器和本地文件之间通讯的协议

ajax基于http协议

phpstorm webstorm默认搭建 静态的服务器

服务器：

​ 能够实现一切http协议细节的模块，符合我们对服务器的理解

​ 需要一个中间语言 /php/（极简，优秀的语言） nodejs

动态服务器 Apache 默认占用 80 端口

wamp - 创建php运行的环境（window Apache mysql php ）

curl 访问