jquery知识点
Day 01
正课:
1. 什么是jQuery:
2. 如何使用jQuery:
3. 选择器:
1. 什么是jQuery: 快速的，简洁的JavaScript库
为什么:
1. DOM操作的终极简化:
核心DOM: 万能，API繁琐
HTML DOM: 简洁，不是万能
jQuery: 终极简化:
1. 增删改（内容,属性,样式）查
2. 事件处理: 简化和兼容性
3. 动画操作:
4. AJAX操作:
2. 屏蔽浏览器兼容性问题:
何时:
总结: 终极简化——write less, do more
2. 如何使用:
1. 版本:
1.11.x: 兼容IE8
jquery-1.11.3.js 未压缩版本-可读性好，便于学习
但文件大，不便于网络传输
jquery-1.11.3.min.js 压缩版本-文件小，便于网络传输，但是可读性差，不便于学习——开发用
2.xx.x: 不在兼容IE8
2. 手册:
3. 编程步骤: 2步:
1. 将jquery-1.11.3.js文件保存在当前项目的文件夹下
2. 在html页面的body元素底部引入jquery-1.11.3.js文件
强调: 在自定义脚本之前引入
4. jQuery对象:
什么是: 封装找到的DOM对象
并提供操作DOM对象的简化版的API
的类数组对象
鄙视题: DOM对象 vs jQuery对象的
DOM对象: 由W3C标准规定的，浏览器厂商已经实现的，使用DOM API的标准对象
优: 万能 缺: 繁琐
jQuery对象: 由jQuery.js函数库定义的第三对象/API
DOM对象的API和jQuery对象的API不通用！
今后，只要使用jquery，都要先获得jquery对象:
如何获得jquery对象: 2种
1. 先获得DOM对象，再用$函数封装到jQuery对象
var $jQuery=$(DOM对象);
2. 直接使用$函数查找到的DOM对象，被自动封装到一个jQuery对象中。
var $jQuery=$("selector");
强调: 只有放入jQuery对象中的DOM对象，才能使用简化版API。
特殊: 万一jQuery对象不支持某项功能:
从jQuery对象中取出DOM对象，使用原生DOM API
$jQuery[i] -> $jQuery.get(i) 获得i位置的DOM对象
3. 选择器: jQuery支持几乎所有CSS选择器
提前:
绑定: DOM: elem.addEventListener("事件名",fn);
jq: $("selector").事件名(fn);
修改样式: DOM: elem.style.css属性名=值
jq: $("selector").css("css属性名",值)
回顾:
1. 基本选择器:
#id .class 元素 * 群组
2. 层次选择器:
选择器1 选择器2
parent>child
前一个兄弟+后一个兄弟
前一个兄弟~之后所有兄弟
新选择器:
3. 过滤选择器: 通过特定的过滤规则选出所需的DOM元素
包括: 基本过滤(新), 内容过滤, 可见性过滤, 属性过滤
子元素过滤， 表单过滤
基本过滤: 也称为位置过滤:
强调: 位置: 指DOM元素在jQuery元素中的下标位置
包含: :first, :last,
:not(selector),
:even, :odd,
:eq(i)
:gt(i) :lt(i)
何时: 只要选择查询结果中指定位置的元素时
vs first-child/last-child/nth-child(n)
何时: 只要选择指定父元素下的第几个子元素时
内容过滤: （了解）
:contains(text) 比如: span:contains("购物车")
:empty 比如: span:empty 选择内容为空的span
:parent 比如: span:parent 选择包含子内容或元素的span ——是:empty的反义
:has(selector) 比如: div:has(.active) 选择包含class为active的子元素的父元素div
可见性过滤: （了解）
:visible 匹配所有可见的元素
:hidden 所有不可见元素
4种: css: display:none; visibility:hidden; opacity:0
html: type="hidden"
强调: :hidden只能匹配 display:none; 和type="hidden"
回顾: 属性过滤——其实就是css中的属性选择器
[属性名] 匹配包含指定属性的元素
[属性名=值] 匹配指定属性的值为指定值得元素
[属性名!=值] 匹配指定属性的值不是指定值得元素
[属性名^=值] 匹配指定属性的值以指定内容开头的元素
[属性名$=值] 匹配指定属性的值以指定内容结尾的元素
[属性名*=值] 匹配指定属性的值包含指定内容的元素
[属性选择器1][属性选择器2]... 匹配同时满足属性选择器1，,2的元素
回顾: 子元素过滤:
包括: :first-child :last-child :nth-child(n) :only-child
选择在父元素下作为指定为位置的子元素
位置相对于父元素而言。
vs 位置过滤: 选择查询结果集合中指定下标位置的元素
和元素在其父元素下的位置无关
表单选择器: 利用表单中元素标签和type属性选择表单中的元素
何时:今后，只要选择表单中的元素，都要用表单元素选择器:
为什么: 代替DOM中的form.name
包括:
:input 选择所有input textarea select button
vs input: 仅选择input元素
:text 选择type为text的元素
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden
不仅选择type="hidden"，还选择display="none"
:image 选取所有图形按钮
表单属性过滤选择器:
:enabled 选择所有可用的元素
:disabled 选择所有不可用的元素
:checked 选择被选中的checkbox
:selected 选择被选中的option
课堂练习:
修改标准属性: $("selector").attr("标准属性名","值")
等效: getAttribute和setAttribute
所有这类方法，只要省掉第二个参数，就是读取属性值
***问题: attr只能获取或设置元素开始标签中的attribute
无法获取或设置不在开始标签中的property
解决: prop方法专门读取内存中对象的属性
比如: checked属性只能用prop读取
*******************************************************************************
Day 02
正课:
1. jQuery中基本操作: 操作元素
1. 操作元素:
属性(attr prop)
attr: 在开始标签中显式定义的属性
读: $("selector").attr("属性名")=>getAttribute("属性名")
改: $("selector").attr("属性名",值)
=>setAttribute("属性名",值);
问题: 无法访问不在开始标签中的内存中的prop属性
比如: checked selected disabled
解决:
prop: 读取不在开始标签中定义的内存中的元素属性prop
两用:
读: $("selector").prop("属性名")=>elem.属性名
改: $("selector").prop("属性名",值)
移除属性(了解):$(...).removeAttr("属性名")
=>removeAttribute("属性名");
总结: jquery中很多方法都是两用:
如果不提供新值，就读取；如果提供新值，就修改
内容:
html原文:
读: $(...).html() elem.innerHTML
改: $(...).html('html片段') elem.innerHTML='html片段'
简便: 清空元素内容:
$(...).empty(); elem.innerHTML="";
纯文本
读: $(...).text() elem.textContent/innerText
改: $(...).text('文本')
表单元素的value
读: $(...).val()
改: $(...).val(值)
样式:
1. 直接操作CSS属性:
$(...).css("css属性名") => getComputedStyle()
$(...).css("css属性名",值) => elem.style.css属性名=值
总结: css()能读所有属性，但只能改内联样式中的属性
简化: 同时修改多个属性值
$(...).css({属性名1:值1, 属性名2:值2, ...})
强调: 属性名都要去横线变驼峰
2. 修改class属性:
完整修改class属性: $(...).attr("class","类名")
追加class属性: $(...).addClass("类名")
class="cell" : $(...).addClass("n8") => class="cell n8"
移除class属性: $(...).removeClass("类名")
class="cell n8": $(...).removeClass("n8")=>class="cell"
清除class: $(...).attr("class","")或$(...).removeClass();
判断是否包含指定class: $(...).hasClass("类名")
技巧: 因为class有时容易发生变化
所以，如果class有可能发生变化时，尽量不要用class查找。
解决: 可使用自定义属性来保存固定值作为查找条件
练习: 补: 获得父元素: DOM: elem.parentNode
elem.parentElement
jq: $(...).parent()
获得兄弟元素: DOM: elem.nextElementSibling
elem.previousElementSibling
jq: $(...).next(); $(...).prev();
过渡: transition
3步: 1. 定义开始样式: 同时定义transition属性
2. 定义结束样式:
3. 用addClass将结束样式追加到class属性中
正课:
1. 修改:
样式：
2. 遍历:
3. 插入,删除,替换
4. 事件:
1. 修改:
样式: 1. 修改css属性: $(...).css()
2. 修改class:
$(...).addClass() $(...).removeClass() $(...).hasClass()
$(...).toggleClass("类名"): 在有或没有指定类名之间切换。
2. 遍历节点: 节点间关系
1. 父子关系:
$(...).parent()
$(...).children([selector]) 只获得直接子元素
$(...).find(selector) 获得所有子代元素
强调: children可不加selector，但find必须加selector
2. 兄弟关系:
$(...).next([selector]) 下一个兄弟元素
$(...).prev([selector]) 前一个兄弟
强调: 如果加selector，必须满足:
1. 必须是相邻，2. 必须满足selector的要求
$(...).siblings([selector]) 其它兄弟
3. 添加，删除，替换:
添加:
DOM: 3步:
1. 创建空元素对象，
2. 设置关键属性,
3. 添加到父元素下
jq: 2步:
1. 创建节点: var $elem=$("完整html元素代码段");
2. 将节点添加到指定父元素下:
追加: $(parent).append($elem); 追加到parent下的所有子节点末尾——appendChild
插入: $(parent).prepend($elem); 作为parent下的第一个子节点插入
$(child).after($elem); 插入到child之后
$(child).before($elem); 插入到child之前
删除: $(要删除的元素).remove();
强调: 删除时，不必查找父元素
替换和复制(clone):
替换: $(old).replaceWith(新元素)
$(新元素).replaceAll(old)
复制: var $clone=$(...).clone()
浅克隆: 仅复制普通属性，不复制事件处理函数
$(...).clone(true)
深克隆: 不但复制普通属性，而且还复制事件处理函数
总结: jQuery是对DOM操作的终极简化函数库
学jQuery，其实还是在学DOM
查找——选择器
修改:
属性: attr() prop()
内容: html() text() val() empty()
样式: css()
addClass() removeClass() hasClass() toggleClass()
添加: 2步:
1. 创建: var $elem=$(html代码段)
2. 追加: $(parent).append($elem); ...
删除: remove();
克隆: clone([true])
以上是jQuery的核心和本质
以下是jQuery的扩展部分: 1. 事件绑定，2.动画, 3.AJAX封装
4. 事件处理:
鄙视题: jQuery有几种绑定事件处理函数的方法，有什么区别:
1. $(...).bind("事件名",fn)->addEventListener
特点: 为同一个元素的事件处理函数绑定多个函数对象
$(...).unbind("事件名",fn)->removeEventListener
强调: 如果有可能移除事件处理函数，则绑定时，必须用有名的函数绑定，不能用匿名函数。
重载1: 不带任何参数: 移除元素上所有事件处理函数绑定
重载2: 只带一个事件名称参数: 移除元素上指定事件名称绑定的所有函数对象
重载3: 带两个参数: 仅移除事件元素上指定事件名称绑定的执行的一个函数对象。
问题: 只能为页面上现有的元素绑定事件
动态新添加的元素无法自动绑定事件处理函数
解决: delegate
2. 事件代理: 让指定父元素下，所有符合要求的子元素，都能使用事件处理函数。（包括已有的元素和新生成的元素）
原理: 利用冒泡:
1. 仅将事件处理函数绑定在父元素上一次
2. 获得目标元素: e.target
3. 仅响应符合条件的元素的事件
优: 减少事件监听的个数
可让后生成的新元素自动响应事件
何时: 只要希望一个父元素下指定的所有子元素都能响应事件时
如何使用:
$(parent).delegate("selector","事件名",fn)
将事件绑定到parent上（利用冒泡）
只有符合selector条件的元素才能响应事件
其中: fn: function(e){e.target//获得目标元素}
$(parent).undelegate("selector","事件名",fn)
delegate vs bind:
1. 优化: 创建事件监听对象的个数
delegate: 仅在父元素创建一个事件监听，所有子元素公用
bind: 为每个子元素分别创建事件监听
2. 效果:
delegate: 新生成的子元素也可自动共享父元素的事件
bind: 新生成的子元素无法自动获得事件处理函数
3. 一次性事件: $(...).one("事件名",fn)
只能执行一次事件处理函数，执行后，自动解除绑定
4. $(...).live("事件名",fn), 本质:同delegate
问题: 极端，将所有元素的所有事件集中绑定到document
$(...).die("事件名",fn), 本质:同undelegate
5. 终极简化:
问题: 仅为一个元素绑定事件处理函数: bind
利用冒泡: delegate
解决: 统一成了on
1. 仅为一个元素绑定事件处理函数:
$("target").on("事件名",fn)
2. 利用冒泡:
$("parent").on("事件名","selector",fn)
解除绑定: off(...)
6. 简写: $(...).事件名(function(){...})
问题: 仅少量常用的事件，可简写
如果遇到无法简写的事件，就要用on
*******************************************************************************
Day 03
正课:
1. 事件
2. 动画
3. jQuery UI
1. 事件:
模式触发事件:
DOM: elem.onxxx();
问题: 只能触发直接用onxxx绑定的事件处理函数
用addEventListener添加的事件监听，无法模拟触发
jq: $(...).trigger("事件名")
其实可简写为: $(...).事件名
页面加载后执行:
特殊: $(document).ready(function(){...})
鄙视题: vs DOM: window.onload=function(){...}
ready的底层事件: DOM中的ondocumentcontentloaded
只要DOM树加载完成，js执行完毕就会触发。
而onload: 必须等到html,css,js,img全部加载完成才触发
优化: 可将原来在load之后才执行的任务(事件绑定，修改DOM树)，提前到ready之后执行，可缩短页面整体加载时间。
如何使用: $(document).ready(function(){...})
简: $().ready(function(){...})
更简: $(function(){...});
其实: 只要将script放在body的结尾，就可实现DOM加载后立刻执行。
一个事件: hover: 其实就是mouseover和mouseout的合体
所以,hover要绑定两个事件处理函数
何时使用: 只要同时响应mouseover和mouseout时，就可简写为hover
2. 动画: 高级函数: 基于底层函数又进行了封装
两大块: 简化版动画函数 和 万能动画函数
简化版动画函数:
显示/隐藏: $(...).show(); $(...).hide(); $(...).toggle()
强调: 无参数的show()/hide()使用的是display属性
瞬间隐藏和显示
动画: 参数: speed:
2种: 1. 三档: fast normal slow
2. 用毫秒数自定义动画时长
动画的速度变化: 参数: easing: linear swing
伸缩: slideUp() slideDown() slideToggle()
淡入淡出: fadeIn() fadeOut() fadeToggle();
问题: 效果受局限
解决: 万能动画函数: animate()
animate()可对数值类型的CSS样式执行定时器动画
包括: 宽高,位置,透明度,边框宽度,字体大小,
强调: 不能对非数值类型属性做动画
包括: (颜色,背景图片,字体,display)
如何:
$(...).animate(params,speed,easing,fn)
其中: params: 所有变化的css属性的目标值:
比如: {css属性1: 值1, css属性2:值2,...}
强调: css属性名要去横线变驼峰
值要加单位
speed: 动画持续时间/速度
easing: 速度变化效果
fn: 动画结束后，自动调用的回调函数
动画中的排队和并发:
排队: 多个动画顺序，先后执行
$(...).animate({属性1:值1,...},ms).animate({属性2:值2,...})
先对属性1执行动画效果，再对属性2执行动画效果
并发: 多个动画同时执行
$(...).animate({属性1:值1,属性2:值2},ms)
同时修改属性1和属性2
正课:
1. 类数组操作:
2. jQuery UI:
1. 类数组操作:
.each(function(i){ i->当前元素的下标; this->当前元素})
.each vs forEach
原理是一样的
forEach是原生js中Array类型的方法
each是jquery中第三方定义的类数组对象的方法
$("要查找的元素").index("所有元素")
返回，要查找的元素在所有元素中的下标位置
2. jQuery UI: 一组可复用的更简化版API或插件库
何时: 如果觉得jQuery还不够简化，或需要复用一些插件时
比如: 日历选择框 验证
插件: 官方插件 第三方插件: 自定义插件
什么是jQuery UI: 基于jquery编写的一套UI组件库，专用于PC端浏览器。
jQuery Mobile: 基于jquery编写的一套UI组件库, 专门用于移动端浏览器的网页
官网: jqueryui.com
问题: 公司要使用一项新的技术或库，如何快速上手:
官网->什么是->DEMO->API 手册
下载: jQuery UI: 默认的色调是蓝色
希望获得自定义主题的UI库: 官网->Themes->Gallary
需要更细致的定制主题: Gallary->edit
正式学习jquery UI: 三部分: Effects interactions Widgets
Effects: 动画效果
addClass/removeClass/toggleClass() 默认没动画，现在有
show/hide/toggle 扩展了动画效果
color animation: 实现颜色动画
练习:
强调: 因为jquery ui依赖于jquery，所以必须先引入jquery.js，再引入jquery ui.js。
jquery ui中的$(...).animate(): 支持颜色动画
jquery ui中的$(...).toggle(Effects,speed)
toggle的effects参数:
blind(遮蔽) bounce(弹跳) clip(缩短) drop(丢弃)
explode(爆炸) fold(折叠) highlight(高亮) puff(膨胀)
pulsate(心跳) shake(震动) size slide
Interactions:交互
1. 拖拽: $(...).draggable()
问题: API会悄悄的为元素添加class->侵入性
对于有侵入性API，不但要引入js，还要引入css
2. 可选中: $(...).selectable();
问题: 可自动向选中的li添加ui-selected类，但jquery ui并未定义该类的样式
解决: 必须手动定义同名样式类ui-selected，定义选中项的样式
3. 可排序: $(...).sortable();
总结: jquery ui中的很多API具有侵入性:
通常都要引入jquery ui附带的css文件
有的还需要自己补充同名的样式类
要求: 对jquery ui不但要知道表面现象，更要知道Element中的变化原理。
Widget: 小部件: (小重点)
1. Accordion(手风琴部件)
何时: 节约页面空间
如何使用:
引入: jquery-ui.css
HTML: 父元素>标题+内容div
js:$(父元素).accordion();
2. AutoComplete(自动完成)
何时: 避免重复输入,减少键入次数
如何:
html: input文本框
js: 一个保存所有备选向的数组
$(文本框).autocomplete({source:数组})
3. datepicker:（日期选择框）
如何使用:
html: input文本框
js中: $(文本框).datepicker({dateFormat:'yyyy年mm月dd日'})
vs h5中<input type="date"...
h5有兼容性问题，且不能修改样式
4. dialog:对话框:
为什么: BOM中的alert,confirm,prompt样式死板，无法定制
何时: 今后，只要弹窗，都用dialog部件
如何:
html中:定义外层元素，包含提示信息
其中外层元素要定义title属性
title属性会出现在对话框的左上角
js: $("外层元素").dialog();
强调: 不带参数的dialog(), 只负责将容器变成对话框
不控制显示与否
如何隐藏，再弹出:
配置对话框:
$(...).dialog({
autoOpen:false,//默认隐藏
buttons:[
{text:"文本",click:function(){this->dialog}},//按钮
...
]
});
打开: $(...).dialog("open");
关闭: $(...).dialog("close");
5. 按钮部件: $(button/input/a).button();
6. tabs: 标签页:
如何:
html: 父级div>标签页ul>li>a href="#id"
内容页div#id
说明: li>a的href中的#id是为了匹配div的#id
js: $(父元素).tabs();
7. tooltip: 工具提示
为什么: 普通的title属性，浏览器之前有不一致
何时: 只要希望所有浏览器统一title提示的样式时
如何: tooltip，必须应用到document上
*******************************************************************************
Day 04
正课:
1. 第三方插件:
日期，验证，瀑布流
2. ***开发自定义jQuery插件
1. 第三方插件:
日期: jquery ui datepicker
h5 input type="date"
My97
layDate
layDate: 不依赖于jquery
如何:
html: <input class="laydate-icon"
css: 引入laydate/skins/default/laydate.css
js: laydate({
elem:"selector",
format:"YYYY年MM月DD日",
其他属性
})
表单验证: jquery.validator 依赖于jquery
如何使用:
$(表单).validate({
rules: {//规则
name1: "required",//必填,如果只有一个简单规则时
name2: {//如果一个字段，需要多个规则验证时
规则1: 值,
规则2: 值,
},//所有规则列表: https://jqueryvalidation.org/documentation/
List of built-in Validation methods
},
message:{//提示信息
name1: "name1验证失败的信息",
name2:{
规则1: "name2的规则1验证失败的信息",
规则2: "name2的规则2验证失败的信息",
}
}
});
如何添加自定义验证规则:
jQuery.validator.addMethod(规则名,method[,默认提示])
使用自定义规则: field: "规则名"
Masonry: 瀑布流
特点: 不规则大小的砖块，拼凑成完整的砖墙
什么是Masonry: 是一个javascript网格布局库.
作用: 在一个垂直区域内，将元素按最优化的空间利用率自动摆放。
如何使用: $(容器父元素).masonry();
2. ***自定义jquery插件:
需求: 添加一个专门的函数sum，来计算数组中所有元素的和
问题: 直接定义在全局，易被污染
解决: 定义在一个自定义的对象中: 2步:
1. 定义一个全局对象;
2. 在自定义的全局对象中添加自定义方法
优: 不易被污染
html如何使用自定义方法: 2步:
1. 先引入方法所在的js文件
2. 用库对象.自定义方法()
添加jquery全局函数:
正课:
1. ***自定义jQuery插件:
jQuery的全局方法
添加jQuery的对象方法——自定义插件
1. jQuery 全局方法:
jQuery库对象: window.jQuery=window.$=jQuery
向jQuery库中添加全局方法: 2步:
1. jQuery.命名空间={}
2. jQuery.命名空间.方法名=function(){...}
原生js的全局方法 vs jQuery的全局方法
原生js的全局方法: 直接定义在window下，不需要任何对象即可直接访问。
jQuery的全局方法: 定义在jQuery对象内部，必须用jQuery对象才能调用
2. 添加jQuery 对象方法:
为所有jQuery查找结果对象添加的方法——插件
vs jQuery全局方法:
全局方法: $.xxx.方法名()
对象方法: $(selector).方法名()
何时: 如果希望对查找结果对象调用方法时
如何定义: $(...)的原型对象是jQuery.fn
鄙视题: $.each(arr,function(i,val){...})
arr.forEach(function(val,i,arr){...})
vs $(...).each(function(i,elem){...})
$.each()是jQuery全局方法，存储在jQuery全局对象上
主要用于遍历普通数组
$(...).each()是jQuery对象方法，存储在原型对象jQuery.fn上
主要用于对查询结果中的每个DOM元素执行操作
3. 自定义jQuery插件:
何时: 如果一个效果需要反复使用，就要封装为插件
优: 重复利用, 提高发开效率
1. dropdown:
