前端知识点总结——jQuery(下)

Posted guchengnan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端知识点总结——jQuery(下)相关的知识,希望对你有一定的参考价值。

1. 排队和并发

1.并发: 多个css属性同时变化
放在一个animate函数内的多个css属性默认并发变化

2.排队: 多个css属性先后变化
对同一个元素,先后调用多个动画API,都是排队执行
原理: 所有动画API起始并不是立刻开始动画,而仅是将当前动画函数加入元素的动画队列中等待执行。

停止动画: $(...).stop();
默认: 仅停止动画队列中,当前正在播放的一个动画,队列中后续动画,依然执行
如何停止动画,并清空队列: .stop(true)

选择器: :animated 可选择或判断一个正在播放动画的元素

 

2. 类数组对象操作

遍历
$(...).each(function(i,elem){
//this->当前elem
})
鄙视: $(...).each() vs $.each(数组/集合,fun)

查找
var i=$(...).index(要找的DOM元素/jq对象)
简化: 如果在一个父元素内查找子元素:

$(子元素).index();

 

 

3. 为jquery添加自定义方法

1.添加在jQuery.fn中
强调: jQuery.fn.自定义方法=function(){

    //this->将来调用该方法的jq对象
   }

2.调用时: $(...).自定义方法()

 

 

4. 插件: 为标准函数库或框架添加功能的第三方库

官方插件jQuery UI
使用jQueryUi:
先引入jquery.js,因为jQuery UI是基于jQuery开发的
再引入jquery-ui.js
再编写自定义脚本
包括: 
交互: 自学
效果:

a. 重写了三类简单动画API,添加了新的动效

b. 为addClass/removeClass/toggleClass,也添加了动效

c. 重写了animate方法,支持颜色动画

部件
什么是部件: 具有完整样式和行为的小功能
如何使用: 

1. 引入: jquery-ui.css
2. 按照部件约定,编写html内容结构
3. 引入jquery.js和jquery-ui.js
4. 在自定义脚本中,找到插件的父元素,调用插件API

原理:

侵入性: 在开发者不知情的情况下,自动添加class和行为
优点: 简单 缺点: 不可维护

jQuery UI   vs   bootstrap

jQuery UI 傻瓜式,侵入式
优点: 简单 

缺点: 不可维护

bootstrap 少量手动添加样式和行为(自定义扩展属性)
缺点: 相比jQuery UI,稍微麻烦
优点: 可定制

 

5. 第三方插件

文件上传
富文本编辑器
masonry: 彩砖墙/瀑布流

 

6. 自定义插件

何时: 只要希望复用一块功能和样式时,都要封装为插件
前提: 必须已经用原生的html,css,jss实现了插件的功能

2种封装插件的风格: 
jQuery侵入式——

1. 将插件所需的css提取出来,保存在单独的css文件中

2. 定义插件的js文件: 
    先检查是否提前引入了jQuery
    定义插件函数,保存在jQuery的原型对象jQuery.fn中

侵入: 根据插件需要,为子元素自动添加class      为子元素绑定事件处理函数

3. 使用插件: 
    引入插件的css文件
    在body中按插件的规定,编写html内容
    引入jquery.js和插件的js文件
    在自定义脚本中,查找要应用插件的父元素,调用插件函数

Bootstrap DIY式——

1. 将css拷贝到独立的css文件中

2. 编写js:
    先验证是否提前加载了jQuery
    查找自定义扩展属性,为其绑定事件

3. 使用插件:
    引入插件的css
    按照插件的HTML格式要求,编写内容
    为插件的HTML元素手动添加class
    为触发事件的元素添加指定的自定义扩展属性

 

 

7. jQuery的ajax API

$.ajax({
type:"get/post",
url:"xxx",
data:"rawData"/{ 变量名:值, ...}
dataType:"json",
beforeSend(){

//在发送之前触发

}
completed(){

//只要请求完成,无论成功还是失败,都触发

}
success(data){

//请求成功触发

}
error(){

//发生错误时触发

}
}).then(data=>{
... ...
}).catch(err=>{ ... })

简写

专门发送get请求

$.get(url,data,dataType).then(data=>{ ... })

专门发送get请求,接收JSON响应,并自动转为js对象

$.getJSON(url,data).then(data=>{ ... })

专门发送get请求,接收js语句响应,并执行

$.getScript(url,data)

专门发送get请求,获取一段html代码片段的响应,并自动填充到前面的父元素中

$(父元素).load("xx.php/xx.html")
强调: 不支持then!

专门简化post请求的: 
$.post(url,data,dataType).then(data=>{ ... })

 

8. 跨域请求

跨域: 
从http://store.company.com/dir/...

允许跨域请求: link, img, script
不允许跨域: xhr对象 (ajax请求)
变通: script 需要服务器返回一段可执行的js语句

服务器应该返回包含数据的一条可执行的js语句

如何实现?
客户端实现: JSONP (填充式json)

1. 在客户端定义处理函数

2. 在按钮单击事件中,动态创建script元素,src设置为服务端地址,并携带请求参数callback=函数名

3. 在服务器端,接收请求参数中的函数名,将函数名和要返回的数据,拼接为一条可执行的js语句

4. 客户端script,请求服务端php,获得可执行语句,自动调用提前定义好的函数处理数据

5. 在客户端处理函数结尾,要动态删除script

起始jQuery的ajax api都可用, 只不过,dataType必须都写成jsonp,原理同上。

服务端: header("Access-Control-Allow-Origin:*");
允许客户端使用xhr对象跨域请求!

以上是关于前端知识点总结——jQuery(下)的主要内容,如果未能解决你的问题,请参考以下文章

前端工程化之webpack打包知识总结

Web前端: JQuery最强总结(每个要点都附带完全案例 详细代码!)

Web前端: JQuery最强总结(每个要点都附带完全案例 详细代码!)

web前端开发JQuery常用实例代码片段(50个)

前端知识点总结——jQuery(上)

jQuery 基础学习笔记总结