达内2016前端开发知识点总结--jquery--4天
Jquery day01
正课:
1. 什么是jQuery
2. 查找
1. 什么是jQuery
jQuery是快速的，简洁的第三方javascript库
为什么:
1. DOM操作的终极简化:
DOM的问题: 核心DOM: 万能，繁琐
HTML DOM: 简洁，不是万能
jQuery在DOM操作的4个方面提供了终极简化:
1. 查找元素, 操作元素(添加，删除，修改(内容,属性,样式))
2. 事件处理:
3. 动画效果: (了解)
4. AJAX操作:
2. 屏蔽了绝大多数浏览器兼容性问题:
只要jQuery让我们用的，都是兼容的
何时: 今后绝大多数公司的项目和绝大多数前端框架都是使用jQuery开发的。
如何:
1. 关于版本:
1.x: 兼容旧浏览器
未压缩: jquery-1.11.3.js ——可读性好，便于学习，大
压缩: jquery-1.11.3.min.js ——生产环境使用，小
三方面: 去掉注释, 去掉换行和空字符, 极简化变量名
2.x: 不再兼容旧浏览器
2. 手册:
day1 核心和选择器
day2 选择器,属性，文档处理和css样式
day3 事件和动画
3. 开始使用:
Step1: 下载jquery.js 保存在项目js文件夹下
Step2: 在页面用<script src 引入jquery.js文件
向window中添加了jQuery对象
jQuery对象是封装所有简化版DOM操作API的全局对象
window.jQuery=window.$=jQuery
Step3: 使用jQuery简化版API执行DOM操作
$("选择器") 查找元素
$底层其实使用的还是:
getElementById
getElementsByTagName,ClassName,...
querySelectorAll
问题: 使用DOM API返回的结果不能使用jQuery简化版API
$的返回值: jQuery结果集对象——类数组对象
只有$返回的结果，才能使用简化版API
普通DOM API返回的是标准DOM对象，不能使用简化版API。
jQuery API和DOM API 不能混用，也不通用
$(...).click(function(){...})
鄙视题: DOM对象 vs jQuery对象
DOM对象: W3C的DOM标准规定，浏览器厂商已经实现的现成的对象。能使用DOM API——繁琐
jQuery对象: 由jQuery库创建的，由第三方实现的。
本质: 一个封装找到的一组DOM对象的类数组对象—集合
并在父对象中提供了简化版API
要想使用jQuery简化版API，必须先获得jQuery结果集合对象:
如何: 1. 用$("选择器")直接查找对象，返回的就是
2. 如果已经获得一个DOM对象:
用$(DOM对象), 创建一个结果集合对象，并将DOM对象放入其中。
jQuery结果集合对象的核心API:
$(...).size() => $(...).length 找到的元素个数
$(...).get(i) => $(...)[i] 从jQuery结果中取出DOM对象
何时: 如果有jQuery实现不了的功能
就要见DOM对象从jQuery结果中取出
继续使用DOM API
$(...).index($("要查找的元素"))
返回要查找的元素在整个结果集中的位置
2. 查找:
按选择器查找: jQuery支持所有css选择器
只要jQuery允许使用的css选择器，都屏蔽了兼容性问题
包括:
基本选择器: 同CSS
#id .class element * selector1,selector2,...
规律: $("...")返回的jQuery结果集合的所有API都自带forEach
后续的修改操作，会自动作用到每个找到的元素上
层次选择器: 同CSS
select1 select2 后代
select1>select2 直接子代
select1+select2 紧邻的下一个兄弟
select1~select2 之后所有符合条件的兄弟
过滤选择器:
基本过滤: 位置过滤: 根据元素在结果集中的下标位置选择
:first/last : 在结果集中选择第一个和最后一个元素
*以下选择器下标从0开始！*
:even/odd: 选择结果集中*下标*为偶数/奇数的元素
:eq/gt/lt(i): 选择下标=,>或<i位置的其他元素
何时: 只要根据元素在结果集合中的下标位置选择元素
子元素过滤: 选择在父元素下指定位置的子元素
强调: 参照的不是在结果集合中的位置
而是在父元素下的位置
:first-child/last-child
*以下选择器下标从1开始*
:nth-child(n/odd/even/2n/2n+1)
:not(selector): 同css， 否定选择器,可否定一切选择器
正课:
1. 查询:
1. 查询:
练习:
$(...).API() : 规律: 1. 自带forEach
2. 每个API都返回原结果集合
内容过滤: (了解) 根据元素的内容查找
:contains(text)： 查找内容中包含指定文本的元素
span:contains("购物车"): 找内容中包含"购物车"的span
:empty : 查找不包含任何内容的空元素
:parent : 查找只要包含内容的父元素
:has(selector) : 选择包含满足selector要求的子元素的父元素
比如: div:has(.active) 包含class为active的子元素的div
可见性过滤: 同CSS (了解)
:visible : 匹配所有可见的元素
:hidden : 匹配所有不可见的元素display:none
和type="hidden"的
属性过滤选择器: 同CSS
[属性] : 查找拥有该属性的元素
[属性="值"] : 查找指定属性的值为"值"的元素
[属性!="内容"] : 查找指定属性的值不为"值"的元素
[属性^="内容"] : 查找指定属性的值以"内容"开头的
[属性$="内容"] : 查找指定属性的值以"内容"结尾的
[属性*="内容"] : 查找指定属性的值包含"内容"的
[条件1][条件2]... : 查找同时满足条件1,2...的元素
按节点间关系查找:
1. 父子关系:
$(parent).children() 查找parent下所有直接子元素
.children(selector) 查找parent下符合条件的元素
$(parent).find(selector) 查找parent下所有后代元素中符合条件的
$(child).parent() 获得child的父元素
2. 兄弟关系:
$(...).next/prev([selector]) 获得下/前一个兄弟元素
$(...).nextAll/prevAll([selector]) 获得之后/之前所有的兄弟元素
$(...).siblings([selector]) 获得前后所有的兄弟元素
练习:
获取css样式属性的值:
var 属性值=$(...).css("css属性名")
.css默认获取的就是计算后的完整样式！
.css默认设置的是内联样式
问题: css样式属性修改，代码量大
解决: 用class代替单独修改css样式
$(...).addClass("类名") 向选中的元素添加类名
$(...).removeClass("类名") 从选中的元素上移除类名
$(...).hasClass("类名") 判断选中的元素上是否包含指定类名
如果希望在有/没有"类名"之间切换:
$(...).toggleClass("类名");
Jquery day02
正课:
1. 查找:
表单过滤
状态
2. 修改
3. 添加，删除，替换，复制
1. 查找:
表单过滤: 利用表单中的元素名和type属性来选择表单中元素
强调: 只能选择表单元素
何时: 今后只要在表单中查找表单元素时
包括: :input 可匹配: input textarea select button
如果希望单独匹配select input textarea...
可用元素选择器
按type属性选择:
:text :password :radio :checkbox
:submit :reset :button
:image :file
状态选择器: :enabled :disabled :checked :selected
2. 修改:
属性: 鄙视: attr vs prop
$("...").attr("属性名"[,值])
相当于attribute: 即可访问HTML标准属性，又可访问自定义扩展属性
问题: 不能修改三大状态
解决: $("...").prop("属性名"[,值]) 可读取内存对象中的属性
比如: 可访问HTML标准属性，又可访问状态属性
不能访问自定义扩展属性
无论attr还是css返回的属性值，都是字符串类型。要计算，必须先转为数字。
内容: 3种:
DOM: innerHTML textContent value
$(...).html([html片段]): 获取或设置元素的innerHTML内容
$(...).text([文本]): 获取或设置元素的textContent内容
$(...).empty(): 清除元素的内容
$(...).val([值]): 获取或设置表单元素的value内容
样式: 2种:
1. 直接修改css属性
$(...).css("css属性名") => getComputedStyle(elem).css属性
只修改一个css属性
$(...).css("css属性名",值) => elem.style.css属性=值
批量修改多个css属性:
$(...).css({
css属性:值,
... : ...
})
强调: css属性名强烈建议使用去横线变驼峰
修改css属性值时, 不用加单位也行
问题: 代码量大
2. 通过修改class批量修改一套css属性:
$(...).hasClass();
$(...).addClass("class1","...",...); $(...).removeClass();
$(...).toggleClass();
正课:
1. 添加，删除，替换，复制
2. 事件
1. 添加，删除，替换，复制
添加: 2步:
1. 创建节点: var $elem=$(html代码片段)
2. 将节点添加到DOM树:
$(parent).append/prepend($elem)
将$elem添加到parent的结尾/开头
$(child).before/after($elem)
将$elem插入到现有子元素child之前/之后
删除: $(...).remove();
替换: $(oldElem).replaceWith("html代码片段")
用html代码片段创建新元素，替换现有旧元素 右替换左
$("html代码片段").replaceAll("selector")
用html代码片段创建新元素，替换所有符合有边选择器要求得旧元素。左替换右
克隆: var $elem_copy=$(...).clone();
问题: 浅克隆: 仅复制属性，不复制事件行为
解决: 深克隆: 即复制属性，又复制事件行为
如何: $(...).clone(true);
2. 事件:
鄙视: jQuery中共有几种绑定事件的方式
1. $(...).bind("事件名",fn) =>addEventListener()
.unbind("事件名",fn) => removeEventListener();
重载: .unbind("事件名") 解除指定事件上绑定的所有处理函数
.unbind() 解除当前元素上所有事件处理函数绑定
优点: 不必非要使用有名的函数。
同样可以移除匿名函数的绑定！
优化: 在删除任何DOM元素前，都要先解绑元素上所有事件监听
2. $(...).one("事件名",fn) 只触发一次事件后，就自动解除绑定
3. 简化版: $(...).事件名(fn) 只对部分最常用的事件提供了简化
4. 利用冒泡:
DOM: parent.addEventListener("事件名",function(e){
//this->parent
//难题1: 获得目标元素: e.target DOM
//难题2: 判断是否想要的目标元素
//e.target.nodeName 或 e.target.属性
});
jQuery: $(parent).delegate("selector","事件名",function(){
//简化1: this->e.target->$(this)
//简化2: 用预定义的selector，代替了手写的if判断
})
5. $(...).live/die("事件名", fn) 废弃: 因为将所有事件集中绑定到document上。
6. $(...).on(): 统一了之前所有绑定方式:
2种用法:
1. 代替bind，直接为子元素绑定事件:
$(child).on("事件名", fn)
.off("事件名", fn)
只有一种重载: .off("事件名")
2. 代替delegate, 用于利用冒泡:
$(parent).on("事件名", "selector", fn)
Jquery day03
正课:
1. 事件:
模拟触发
页面加载后执行
hover
2. 动画:
1. 事件:
模拟触发: 用代码模拟触发另一个元素的事件
如何: $(...).trigger("事件名")
页面加载后执行: 鄙视题: onload vs $(document).ready()
页面加载过程:
.html -> .css
-> .js↓
DOMContentLoaded
DOM内容(.html和js)加载完成
-> .图片 ↓
loaded: 所有页面内容加载完成
通常: DOMContentLoaded先于loaded
何时: 如果一些操作(事件绑定)不需要等待所有内容加载完成，就可提前执行时，都要在DOMContentLoaded中执行。
为什么: 让用户无需等待css和图片加载，就可提前使用功能
如何:
DOMContentLoaded: $(document).ready(function(){...})
$().ready(function(){...})
$(function(){...})
实际开发中，只要将script放在body结尾，默认就在DOM内容加载后执行。
Loaded: window.οnlοad=function(){...}
特殊事件: hover: 其实是一对儿mouseover和mouseout的组合
何时: 只要对一个元素同时绑定鼠标进入和鼠标移出事件时
就可用hover简化绑定
如何:
$(...).mouseover(function(){...})
$(...).mouseout(function(){...})
可简写为:
$(...).hover(
function(){...}, //处理over
function(){...} //处理out
)
如果进出的操作可统一为一个函数:
$(...).hover(function(){...}); 进出都执行同一函数
2. 动画: (了解)
简单动画:
3种效果:
1. 显示和隐藏
$(...).show/hide/toggle() 立刻显示隐藏: display:none/block
$(...).show/hide/toggle(speed,easing,callback)
speed: "slow","normal", or "fast"
ms
callback:一个函数对象，在动画播放完，自动执行
2. 上下滑动 $(...).slideDown/slideUp/slideToggle(s,e,fn)
3. 淡入淡出 $(...).fadeIn/fadeOut/fadeToggle(s,e,fn)
万能动画: 控制任意css属性的在规定时间内均匀变化
何时: 只要控制多个css属性均匀变化时
如何: $(...).animate({//目标样式
css属性:值,
... : ... ,
}, speed, easing, callback)
//所有属性，从当前状态，同时均匀变化到指定的目标样式
问题: 只能对数值类型的css属性提供动画
比如: css3: transition: 可以提供背景颜色渐变的
jq: .animate()不支持颜色动画
动画的并发和排队:
并发: 多个属性同时修改:
1种: 在一次animate调用中同时修改多个css属性
排队: 多个动画，先后执行:
2种: 对同一个元素
1. 分两次调用animate，第二个animate必须在第一个animate执行后，才开始执行
2. 通过链式操作，先后调用animate，也是排队
停止动画: $(...).stop();
问题: 默认只能停止正在执行的一个动画
如果后续有排队的动画，依然会继续触发
解决: $(...).stop(true); //1. 停止当前动画，2. 清除队列
正课:
1. 类数组操作
2. jQueryUI
1. 类数组操作
类数组对象本来不能使用数组的任何API: 比如: forEach, indexOf
arr.forEach(function(val,i))
jQuery为类数组对象提供了专门的遍历/查找API
$(...).each(function(i[,elem])){
//对结果集合中每个元素执行相同操作
//this->elem->DOM->$(this)
}
var i=$(...).index(elem/$(elem)); //查找elem在结果集中的下标
鄙视题: 页面上多个按钮，点每个按钮提示点的是第几个（下标）
2. jqueryUI:
UI: User Interface
UI库: 完整的js,css组成的独立功能/效果的集合
jqueryUI: 是jquery官方出的UI库
基于jquery, 但是极简化
为什么: 实际开发中，很多功能(样式和行为)会反复使用
解决: 使用现成的UI库中的插件——复用
新技术: 上官网 -> DEMO/Start/Guide -> API Document
分三部分: Effects 动画效果
Interactions 交互组件
Widgets: 小部件
Effects动画效果:
基于jquery提供了更丰富的动画效果:
1. 为add/remove/toggleClass，添加动画效果:
jquery: add/remove/toggleClass默认没有动画，不能加时间
jquery-ui: 可以为add/remove/toggleClass添加时间
2. 为show/hide/toggle，添加了更多动效
3. 让.animate支持颜色动画
Interactions: 交互组件
1. $(...).draggable() 将找到的元素变为可拖拽
<ANY>
<title class="ui-dialog-titlebar"> 让标题变拖拽图标
2. $(...).selectable() 让目标元素可选中
<ul>
<li class="ui-selectee ui-selected"></li>
侵入性: API根据自身的需要，向元素默默添加class
有的class已经定义好，可直接使用
有的class需要使用者自行定义
3. $(...).sortable() 让目标元素可调整位置
<ul >
<li class="ui-sortable-handle ui-sortable-helper"
Widget: 小部件:
Accordion:
html:
<div>
<hn>
<div>
css:
js: $(...).accordion();
问题: 主题颜色是固定的
解决: 官网->主题画廊/颜色筒->先选择主题风格/定制风格->下载
Jquery day04
正课:
1. jQuery UI
2. 第三方插件: 日期，验证，照片墙
3. ***封装自定义插件
1. jQuery UI
autocomplete 自动完成:
为什么: 减少输入
如何: html : <input />
js: 2件事:
1. 数组: 保存所有备选词
2. $(...).autocomplete({source: 数组})
button 将a, input, button都转为统一的样式 -boot中也有
为什么: 统一样式
如何: $(...).button();
datapicker: 日期选择:
html: 普通的input文本框
js: $(...).datepicker()
dialog: 对话框 - boot中有
为什么: 普通的alert,confirm,prompt 样式不可修改,且兼容性问题
何时: 今后，在页面中只要弹窗就用dialog
如何: html: 容器元素包含提示内容
容器元素的title属性作为对话框的标题
js: $(容器元素).dialog(); //让元素变成对话框的样子
$(容器元素).dialog({autoOpen:false}); //默认隐藏
$(容器元素).dialog("open"); //弹出对话框
tabs: -boot中有
html : div
>ul>li>a href="#div"
+div id="..." *n
js: $(父容器).tabs();
tooltip: 工具提示: ——boot中有
何时: 只要提示用户按钮或输入项的意义时
其实就是title属性
为什么: 不同浏览器的title显示样式不一样
如何: $(document).tooltip(); //对整个页面统一tooltip的样式
2. 第三方插件: 日期, 验证, 照片墙
日期: layDate 不依赖于jquery
引入css: "laydate/skins/default/laydate.css"
html: <input class="laydate-icon"/>
js:
跟换主题: laydate.skin("dahong或molv")
2种调用:
1. 在input的单击事件中调用: laydate();
2. 在页面加载后调用: laydate({elem: "#input的id"})
验证: jquery.validator
js: $(表单).validate({
rules:{
name1: "required", //name1的内容必填
name2: {
规则名:值,
规则名:值,
}
},
messages:{
name1: "name1验证失败",
name2:{
规则名:"name2的规则1验证失败",
规则名:"name2的规则1验证失败",
}
}
})
规则名: jquery.validate.js的327行
添加自定义验证规则: 其实就是为jquery.valicator添加一个验证函
数
jQuery.validator.addMethod(规则名,fn,msg)
fn:function(val){//自动获得要验证的元素内容
return 验证结果
}
自定义的规则，遇到空val，直接返回true，不做验证
正课:
1. 第三方插件: masonry
2. ***封装自定义插件
1. masonry: 彩砖墙
html: <div class="container">
<div class="block"> *n
js: $(".container").masonry();
2. ***封装自定义插件:
2种:
1. 扩展jQuery全局函数:
jQuery全局对象: window.jQuery 或 window.$
jQuery全局函数: 在jQuery对象内添加的函数
vs ES的全局函数: 在window下添加的函数
如何: jQuery.方法名=function(){...}
$.方法名(); 可以调用
$().方法名(); X
鄙视: $.each() vs $(...).each(function(){...})
$.each()是jQuery的全局函数,不需要任何查找结果就可直接调用
保存在: 直接保存在jQuery对象上
$(...).each()是jQuery的实例函数,必须要在查找结果上才能调用
保存在: jQuery查询结果集合的原型对象中
何时: 只要复用一个基于jQuery的函数时，就将函数添加到jQuery全局对象中。
2. 封装自定义部件:
1. myAccordion插件
在使用jQuery已经实现功能和样式的基础上:
//制作插件
1. 所需的所有样式，放入专门的css文件中
2. 所需的js，放入专门的js文件中:
1. 判断是否先引入jQuery
2. 为jQuery添加实例方法
为元素侵入class和行为
//制作完成
如何: 1. 引入自定义插件的css
2. 引入jQuery
3. 引入自定义插件的js
4. 按照插件要求，编写html内容
5. 在自定义脚本中直接找到父元素，调用插件函数