day01
JQUERY DAY01:
* JAVASCRIPT类库
* javascript类库,简称为JS库
* 作用 - 为了简化javascript的开发
* 目的 - 预定义了很多对象(属性和方法)和函数
* 特点 - 兼容各大浏览器
* JQUERY
* 概述
* jQuery其实就是一个JS文件
* 分类
* jQuery - Web版本(最主要)
* jQuery UI(User Interface) - 集成UI内容
* jQuery Mobile - 移动版本(WebApp)
* QUnit - 用于测试
* 版本
* 1.4.2版本 - 企业开发使用
* 1.8.3版本 - 企业使用最新
* 1.11.3版本 - 目前jQuery最新
* 2.x.x版本 - 不再支持IE浏览器(8以前)
* 特点：HTML结构与内容的分离
* HTML代码(结构) - 标签
* HTML内容 - 浏览器运行页面后显示的
* 如何使用jQuery
* 在HTML页面中引入jQuery文件
* 使用jQuery的选择器定位(获取)页面元素
* 利用jQuery的API方法完成需求
* 基本内容
* $(selector) - jQuery的工厂函数
* 该函数返回jQuery对象
* jQuery的约定 - jQuery对象前增加"$"符号
* DOM对象与jQuery对象
* DOM对象 - 通过DOM获取的元素,称之为DOM对象
* jQuery对象 - 通过jQuery包装DOM后产生的对象
* jQuery对象的底层还是DOM对象
* DOM对象与jQuery对象的转换
* DOM对象转换为jQuery对象
* $(DOM对象)
* jQuery对象转换为DOM对象
* jQuery对象是数组对象 - 角标
* jQuery对象提供get(index)方法
* 注意 - DOM对象与jQuery对象之间不能相互调用
* jQuery事件
* jQuery将DOM的事件封装成对应的方法
*
* 选择器 - 是jQuery的根基
* 基本选择器
* 层级选择器
* 过滤选择器
* 基本过滤选择器
* 子元素过滤选择器
* 内容过滤选择器
* 可见性过滤选择器
* 属性过滤选择器
* 表单对象属性过滤选择器
* 表单选择器
* 扩展内容
* 方法与函数的区别
* 方法 - 定义对象时,对象的方法(出现在对象中)
* 函数 - 函数其实也是方法
* Web2.0
* Web1.0 - 以内容为主的网站(门户网站)
* Web2.0 - 以人的关系为主的网站(社交网站)
* Web3.0 - 基于移动互联网的社交网站(微信)
* Web前端 - 全端开发(javascript)
* 客户端 - PC端和移动端
* 服务器端 - NodeJS
* 数据库端 - MySQL
* 浏览器(内核 - javascript引擎)
* IE - IE6/7/IE8 IE9/10/11
* 其他浏览器(WebKit-Apple)
* Safari浏览器
* Chrome浏览器
* Firefox浏览器
* 众多国内浏览器
* QQ浏览器 - 号称自主内核X5|V5
* 百度浏览器 - 号称自主内核X5
* 遨游浏览器 - 号称自主内核
*
PM:
JQUERY DAY01:
* 讲师简介
* 姓名 - 金云龙
* 负责第三阶段课程 - JQUERY|HTML5|SERVER|AJAX
* 从事企业级开发(JavaEE)
* JAVASCRIPT类库
* javascript类库,简称为JS库
* 作用 - 为了简化javascript的开发
* 目的 - 预定义了很多对象(属性和方法)和函数
* 特点 - 兼容各大浏览器
* JQUERY
* 概述
* jQuery其实就是一个JS文件
* 分类
* jQuery - Web版本(最主要)
* jQuery UI(User Interface) - 集成UI内容
* jQuery Mobile - 移动版本(WebApp)
* QUnit - 用于测试
* 版本
* 1.4.2版本 - 企业开发使用
* 1.8.3版本 - 企业使用最新
* 1.11.3版本 - 目前jQuery最新
* 2.x.x版本 - 不再支持IE浏览器(8以前)
* 特点
* HTML代码(结构) - 标签
* HTML内容 - 浏览器运行页面后显示的
* 如何使用jQuery
* 在HTML页面中引入jQuery文件
* 使用jQuery的选择器定位(获取)页面元素
* 利用jQuery的API方法完成需求
* 基本内容
* $(selector) - jQuery的工厂函数
* 该函数返回jQuery对象
* jQuery的约定 - jQuery对象前增加"$"符号
* DOM对象与jQuery对象
* DOM对象 - 通过DOM获取的元素,称之为DOM对象
* jQuery对象 - 通过jQuery包装DOM后产生的对象
* jQuery对象的底层还是DOM对象
* DOM对象与jQuery对象的转换
* DOM对象转换为jQuery对象
* $(DOM对象)
* jQuery对象转换为DOM对象
* jQuery对象是数组对象 - 角标
* jQuery对象提供get(index)方法
* 注意 - DOM对象与jQuery对象之间不能相互调用
* jQuery事件
* jQuery将DOM的事件封装成对应的方法
*
* 选择器 - 是jQuery的根基
* 基本选择器
* 层级选择器
* 过滤选择器 - 在选择器前,具有":"符号
* 基本过滤选择器
* 子元素过滤选择器
* 内容过滤选择器
* 可见性过滤选择器
* 属性过滤选择器
* 表单对象属性过滤选择器
* 表单选择器
* 选择器总结
* 选择器的特点
* 数量多 - 记不住
* 单一使用简单 - 混合使用难度大
* 正确使用的方式不唯一
* 选择器的建议
* 不用记 - 会查jQuery的帮助文档即可
* 多练 - 9个页面
* 扩展内容
* 方法与函数的区别
* 方法 - 定义对象时,对象的方法(出现在对象中)
* 函数 - 函数其实也是方法
* Web2.0
* Web1.0 - 以内容为主的网站(门户网站)
* Web2.0 - 以人的关系为主的网站(社交网站)
* Web3.0 - 基于移动互联网的社交网站(微信)
* Web前端 - 全端开发(javascript)
* 客户端 - PC端和移动端
* 服务器端 - NodeJS
* 数据库端 - MySQL
* 浏览器(内核 - javascript引擎)
* IE - IE6/7/IE8 IE9/10/11
* 其他浏览器(WebKit-Apple)
* Safari浏览器
* Chrome浏览器
* Firefox浏览器
* 众多国内浏览器
* QQ浏览器 - 号称自主内核X5|V5
* 百度浏览器 - 号称自主内核X5
* 遨游浏览器 - 号称自主内核
* 配置EditPlus快速浏览
* 打开工具栏Tools->Preferernces选项
* 打开EditPlus的配置窗口,选择Tools选项
* 选择Browers选项,选项Other...选项
* 在桌面找到Chrome浏览器的快捷方式,鼠标右键,选择"属性".
* 将属性窗口中的"目标"对应的路径内容复制
* 将复制的路径,粘贴到EditPlus的配置选项中
* 快速打开浏览器的快捷键"Ctrl+B"
* 测试javascript代码时
* 使用console.log()进行打印
* error() - 输出错误
* warn() - 输出警告
* info() - 输出信息
* log() - 输出日志
* 使用alert()打印输出
* 断点调试
* 打断点 - 在对应代码前的行标处,鼠标点击即可
* 断点调试 - 重新加载页面,自动停止在对应的代码中
* 功能 - 从左到右
* 暂停|运行功能
* 单步跳过
* 单步跳入
* 单步跳出
*
子元素过滤选择器 —— 层级+基本过滤选择器
day02
回顾JQUERY第一天内容:
* 概念
* javascript类库 - 预定义对象和函数
* jQuery - 实现HTML页面的内容与结构的分离
* 如何使用jQuery
* 拷贝jQuery的文件到指定目录
* 在HTML页面的head标签内引入jQuery
* 使用jQuery提供的选择器定位(获取)页面元素
* 利用jQuery的API方法完成需求
* 选择器 - 是jQuery的基础
* 基本选择器
* 层级选择器
* 过滤选择器
* 基本过滤选择器
* 子元素过滤选择器
* 属性过滤选择器
* 可见性过滤选择器
* 内容过滤选择器
* 表单对象属性过滤选择器
* 表单选择器
* 总结
* (使用)jQuery是目前全球使用率最高的
* (为什么)jQuery本身的代码非常值得学习的
* 提供学习方法(3W)
* WHAT - 明确目的(需求)
* HOW - 如何完成(思路)
* WHY - 举一反三(总结)
JQUERY DAY02:
* DOM操作
* 回顾原生DOM操作
* 获取节点
* 创建节点
* 遍历节点
* 替换节点
* 删除节点
* 插入节点
* 复制节点
* jQuery中的DOM操作
* 基本操作
* html() - 类似于原生DOM的innerHTML属性
* 获取 - html()
* 设置 - html(html代码)
* val() - 类似于原生DOM的value属性
* 获取 - val()
* 设置 - val(value)
* text() - 类似于原生DOM的textContent属性
* 获取 - text()
* 设置 - text(文本内容)
* attr() - 获取或设置指定元素的属性
* 获取 - attr(attrName) - 类似于getAttribute()
* 设置 - attr(attrName,attrValue) - 类似于setAttribute()
* removeAttr(attrName) - 类似于removeAttribute()
undefined null
* 样式操作 - css
* attr("class",classValue)
* addClass() - 追加样式
* removeClass() - 删除样式
* toggleClass() - 切换样式
* hasClass() - 判断样式
* css() - 操作样式
* 设置
* css(name,value)
* css(options)
* options - 选项
{
name : value,
name : value,
...
}
* 获取 - css(name)
* 遍历节点
* parent() - 获取指定节点的父节点
* children() - 获取指定节点的所有子节点
* next() - 获取指定节点的下一个兄弟节点
* prev() - 获取指定节点的上一个兄弟节点
* siblings() - 获取指定节点的所有兄弟节点
* find(expr) - 在指定节点中查找指定内容
* 注意 - 查找指定节点的后代节点
* 创建节点
* 元素节点 - $(HTML代码)
* 文本节点 - text()
* 属性节点 - attr()
* jQuery - $(HTML代码)
* 删除节点
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
*
* 事件
PM:
JQUERY DAY02:
* DOM操作
* 回顾原生DOM操作
* 获取节点
* 创建节点
* 遍历节点
* 替换节点
* 删除节点
* 插入节点
* 复制节点
* jQuery中的DOM操作
* 基本操作
* html() - 类似于原生DOM的innerHTML属性
* 获取 - html()
* 设置 - html(html代码)
* val() - 类似于原生DOM的value属性
* 获取 - val()
* 设置 - val(value)
* text() - 类似于原生DOM的textContent属性
* 获取 - text()
* 设置 - text(文本内容)
* attr() - 获取或设置指定元素的属性
* 获取 - attr(attrName) - 类似于getAttribute()
* 设置 - attr(attrName,attrValue) - 类似于setAttribute()
* removeAttr(attrName) - 类似于removeAttribute()
* 样式操作 - css
* attr("class",classValue) - 设置
* addClass() - 追加样式
* removeClass() - 删除样式
* 不传参 - 删除所有样式
* 传参 - 删除指定样式
* toggleClass() - 切换样式
* 只接受一个参数
* 是在没有样式与指定样式之间切换
* hasClass() - 判断样式
* 判断指定元素是否包含指定样式
* css() - 操作样式
* 设置
* css(name,value)
* css(options)
* options - 选项
{
name : value,
name : value,
...
}
* 获取 - css(name)
* 遍历节点
* parent() - 获取指定节点的父节点
* children() - 获取指定节点的所有子节点
* next() - 获取指定节点的下一个兄弟节点
* prev() - 获取指定节点的上一个兄弟节点
* siblings() - 获取指定节点的所有兄弟节点
* find(expr) - 在指定节点中查找指定内容
* 注意 - 查找指定节点的后代节点
* 创建节点
* 元素节点 - $(HTML代码)
* 文本节点 - text()
* 属性节点 - attr()
* jQuery - $(HTML代码)
* 删除节点
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
* 替换节点
* repalceWith
* replaceAll - 就是颠倒了的repalceWith
* 复制节点
* jQuery - clone(boolean)
* boolean参数 - 表示是否复制事件
* DOM - cloneNode(boolean)
* boolean参数 - 表示是否复制后代节点
* 事件
* ready() - 类似于window.onload的作用
* 写法
* $(document).ready(function(){});
* $().ready(function(){});
* $(function(){});
* ready与onload的区别
* ready
* 具有简写方式
* 在一个HTML页面中允许多个
* 等待HTML页面中所有DOM结构加载完毕后就可以执行
* onload
* 没有简写方式
* 在一个HTML页面中只能一个
* 必须等待HTML页面中所有内容全部加载完毕后才能执行
* 事件绑定与解绑
* bind(type,data,fn) - 绑定事件
* type - 指定绑定的事件名称
* 如果绑定多个事件时,使用空格隔开
* data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
* fn - 绑定事件的处理函数
* unbind() - 解绑事件
* type - 指定解绑的事件名称
* 默认不传递任何内容 - 解绑所有事件
* 指定单个事件名称 - 解绑单个事件
* 指定多个事件名称 - 解绑多个事件
* 绑定与解绑允许指定哪些事件?
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
* 注意
* 所谓的click()事件是bind('click')的简写方式
* 事件对象(event)
* 事件对象被封装在事件对应的处理函数的参数
ele.onclick = function(event){
event
}
* 常用用法
* pageX/clientX/offsetX/x - 当前x轴
* pageY/clientY/offsetY/y - 当前y轴
* target - 当前绑定事件的源对象(元素)
* returnValue - 返回值,Boolean类型
* return false - 阻止页面的默认行为
* which/keyCode/charCode - 键盘对应值
* 事件冒泡
* 捕获
* 冒泡
* 模拟事件(了解)
* trigger()
* 事件切换
* hover(over,out)方法
* over - onmouseover事件的处理函数
* out - onmouseout事件的处理函数
* 回顾内容
* 原生DOM绑定事件三种
* 在HTML页面元素中指定事件名称
* 在javascript代码中
* element.onclick = function(){}
* element.addEventListener("click",function(){});
<script>标签允许定义HTML页面任意位置，常见的有3个：
在<head>标签中
引入外部js文件
在<body>标签前
需要获取页面元素的话，编写window.onload
在<body>标签后
没有任何问题
js的5种原始类型：
boolean
string
number
undefined
报错undefined - 不存在 console.log(a);
提示undefined - 存在，但没值 var a; console.log(a);
null - 释放资源
将非布尔值，放置在布尔表达式
jQuery - undefined - 具有相对完善的事件处理机制
day03
回顾JQUERY第二天内容:
* DOM操作
* 基本操作
* html() - 获取或设置指定元素的HTML代码
* text() - 获取或设置指定元素的文本内容
* val() - 获取或设置指定元素的value属性值
* attr() - 获取或设置指定元素的属性
* removeAttr() - 删除指定元素的属性
* 样式操作
* attr("class",classValue) - 设置样式
* 无论之前是否具有样式,重新设置
* addClass(className) - 追加样式
* removeClass() - 删除样式
* 不传参 - 删除所有样式
* 传参 - 删除指定样式
* toggleClass() - 切换样式
* 是在没有样式与指定样式之间切换
* hasClass(className) - 判断是否含有指定样式
* css() - 类似于style属性的作用
* 获取 - css(attrName)
* 设置
* css(attrName,attrValue)
* css(options)
* options - 选项
{
attrName : attrValue,
attrName : attrValue
}
* 创建节点
* 根据原生DOM
* 元素节点 - $("HTML代码")
* 文本节点 - text()
* 属性节点 - attr()
* jQuery
* $("HTML代码") - 涉及字符串的拼串
* 删除节点
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
* 插入节点
* 内部插入 - 插入在指定元素内
* append和prepend
* appendTo和prependTo
* 外部插入 - 插入在指定元素外
* before和after
* insertBefore和insertAfter
* 替换节点
* replaceWith()
* 前面的元素是被替换的
* replaceAll - 其实就是颠倒了的replaceWith
* 复制节点
* DOM - cloneNode(boolean)
* boolean参数 - 是否复制后代节点
* jQuery - clone(boolean)
* boolean参数 - 是否复制事件
* 事件
* ready() - 类似于window.onload的作用
* 写法
* $(document).ready(function(){});
* $().ready(function(){});
* $(function(){});
* ready与onload的区别
* 事件绑定与解绑
* bind(type,data,fn) - 事件绑定
* type - 指定绑定的事件名称
* 单事件绑定 - 指定单个事件名称
* 多事件绑定 - 事件名称之间使用空格隔开
* data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
* fn - 绑定事件的处理函数
* unbind(type) - 事件解绑
* type - 指定解绑的事件名称
* 默认为空 - 默认解绑所有事件
* 指定单事件 - 解绑单事件
* 指定多事件 - 解绑多事件
* 注意
* click()其实是bind('click')的简写方式
* 模拟事件 - trigger()
* 事件切换
* hover(over,out) - 模拟鼠标悬停事件
* 效果上与mouseover+mouseout一致
* 扩展内容
* 字符串(string)
* 定义字符串的方式
* var str1 = ""|'';
* var str2 = new String();
* ""和''的含义是一样的
* 其他开发语言中,""和''的含义不一样
* "" - 字符串
* '' - 字符
* length属性 - 获取当前字符串包含字符的个数
JQUERY DAY03:
* 动画效果
* 显示与隐藏
* show() - 显示
* 无参版本 - 不具有动画效果
* show(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* hide() - 隐藏
* 无参版本 - 不具有动画效果
* hide(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 滑动效果
* slideUp() - 向上滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* slideDown() - 向下滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 淡入淡出
* fadeIn() - 淡入
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeOut() - 淡出
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeTo() - 将当前元素从透明度一个值到另一个值
* 自定义动画
* animate(params,duration,easing,callback)
* params - 设置动画样式(CSS属性)
* duration - 设置动画执行时长,单位为毫秒
* callback - 动画执行完毕后的函数
* animate(params,options)
* 并发与排队效果
* 并发效果 - 多个动画效果同时执行
animate({
attrName1 : attrValue1,
attrName2 : attrValue2,
...
},time);
aniamte({attrName:attrValue},{duration:time})
.aniamte({attrName:attrValue},{
duration : time,
queue : false
});
* 排队效果 - 多个动画效果按照先后顺序执行
animate({attrName:attrValue},time).animate({attrName:attrValue},time).animate({attrName:attrValue},time)...
* 切换动画
* toggle() - show()+hide()
* slideToggle() - slideUp()+slideDown()
* 类(似)数组操作 - jQuery对象是数组对象
* 查看jQuery底层代码 - 证明jQuery是数组对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
var init = jQuery.fn.init = function(selector,context){
return jQuery.makeArray( selector, this );
}
var makeArray = function(arr,results){
var ret = [];
return ret;
}
window.jQuery = window.$ = jQuery;
* 属性
* length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)
* 方法
* get(index) - 根据角标返回DOM对象
* eq(index) - 根据角标返回DOM对象
:eq()选择器的作用一致
* index(obj) - 根据DOM对象返回对应角标
* 隐式迭代
* 概念
* 隐式迭代 - jQuery的遍历
* 在遍历的过程中,只关注入口和出口
var arr = [];// 数组就是入口
for(var i=0;i<arr.length;i++){
var ele = arr[i];// 数组的每个元素就是出口
}
* 显式迭代 - 例如for循环
* 在遍历的过程中,从开始到结束控制遍历的所有过程
* jQuery的遍历
* each(callback)
* $.each(obj,callback)
*
* 扩展内容
*
PM:
JQUERY DAY03:
* 动画效果
* 显示与隐藏
* show() - 显示
* 无参版本 - 不具有动画效果
* show(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* hide() - 隐藏
* 无参版本 - 不具有动画效果
* hide(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 滑动效果
* slideUp() - 向上滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* slideDown() - 向下滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 淡入淡出
* fadeIn() - 淡入
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeOut() - 淡出
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeTo() - 将当前元素从透明度一个值到另一个值
* 自定义动画
* animate(params,duration,easing,callback)
* params - 设置动画样式(CSS属性)
* duration - 设置动画执行时长,单位为毫秒
* callback - 动画执行完毕后的函数
* animate(params,options)
* 并发与排队效果
* 并发效果 - 多个动画效果同时执行
animate({
attrName1 : attrValue1,
attrName2 : attrValue2,
...
},time);
aniamte({attrName:attrValue},{duration:time})
.aniamte({attrName:attrValue},{
duration : time,
queue : false
});
* 排队效果 - 多个动画效果按照先后顺序执行
animate({attrName:attrValue},time).animate({attrName:attrValue},time).animate({attrName:attrValue},time)...
* 切换动画
* toggle() - show()+hide()
* slideToggle() - slideUp()+slideDown()
* 类(似)数组操作 - jQuery对象是数组对象
* 查看jQuery底层代码 - 证明jQuery是数组对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
var init = jQuery.fn.init = function(selector,context){
return jQuery.makeArray( selector, this );
}
var makeArray = function(arr,results){
var ret = [];
return ret;
}
window.jQuery = window.$ = jQuery;
* 属性
* length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)
* 方法
* get(index) - 根据角标返回DOM对象
* eq(index) - 根据角标返回DOM对象
:eq()选择器的作用一致
* index(obj) - 根据DOM对象返回对应角标
* 隐式迭代
* 概念
* 隐式迭代 - jQuery的遍历
* 在遍历的过程中,只关注入口和出口
var arr = [];// 数组就是入口
for(var i=0;i<arr.length;i++){
var ele = arr[i];// 数组的每个元素就是出口
}
* 显式迭代 - 例如for循环
* 在遍历的过程中,从开始到结束控制遍历的所有过程
* jQuery的遍历
* $().each(callback) - 对象方法
* $.each(obj,callback) - 全局函数
* 支持插件
* 作用 - 为了扩展或简化jQuery的开发
* 特点 - 数量多
* 地址 - http://plugins.jquery.com
* 目的
* 掌握jQuery插件的使用方法
* 掌握如何学习jQuery插件的使用
* 日历插件 - My97DatePicker(国产)
* 目录说明
* lang - 存储国际化(i18n)文件
* 本地化(i10n)
* skin - 皮肤(日历控件长什么样子)
* calendar.js - 日期库主文件
* WdatePicker.js - 配置文件
* 如何使用My97日历插件
* 将My97DatePicker文件夹整体拷贝到工程目录中
* 注意 - 不能随意修改My97DatePicker目录中任何内容
* 使用My97日历插件的步骤
* 拷贝My97DatePicker文件夹
* 在HTML页面引入文件
* 引入jQuery文件
* 引入插件文件
* 在HTML页面定义容器(元素)
* 作用 - 用于在页面中显示的效果
* 在javascript代码使用插件提供的API方法
* 表单验证插件
*
* 扩展内容
* Web前端
* 页面设计师 - UI设计师
* Web前端 - 逻辑(页面特效)
* this的用法
* 在具有上下文环境中使用this
* this指代上下文环境
* 在javascript创建构造器时使用this
* this指代new之后的对象
* 在jQuery中的隐式迭代中使用this
* this指代DOM对象(页面元素)
* 注意
* this的用法是javascript整个内容中最难的部分
* 建议
* 会就用,不会就别用
*
day04
回顾JQUERY第三天内容:
* 动画效果
* 显示与隐藏
* show() - 显示
* 无动画版本 - show()
* 有动画版本 - show(speed,callback)
* speed - 设置动画执行的时长,单位为毫秒
* callback - 动画执行完毕后调用的函数
* hide() - 隐藏
* 滑动效果
* slideUp(speed,callback)
* speed - 设置动画执行的时长,单位为毫秒
* callback - 动画执行完毕后调用的函数
* slideDown()
* 淡入淡出
* fadeIn(speed,callback) - 淡入
* speed - 设置动画执行的时长,单位为毫秒
* callback - 动画执行完毕后调用的函数
* fadeOut() - 淡出
* fadeTo(speed,opty,callback)
* speed - 设置动画执行的时长,单位为毫秒
* opty - 设置透明度(0-1)
* 切换效果
* toggle(speed,callback)
* slideToggle(speed,callback)
* 自定义动画
* animate(params,duration,esing,callback)
* params - 设置自定义动画的样式(CSS属性)
* duration - 设置自定义动画的时长
* callback - 自定义动画执行完毕后的函数
* aniamte(params,options)
* params - 设置自定义动画的样式(CSS属性)
* options - 选项
* duration - 设置自定义动画的时长
* queue - Boolean值,如果false的话,该动画不会被加入在动画队列中
* 并发与排队效果
* 并发效果 - 多个动画同时执行
animate({
attrName1 : attrValue1,
attrName2 : attrValue2
},time)
animate({attrName1 : attrValue1},{duration : time})
.animate({attrName1 : attrValue1},{
duration : time,
queue : false
})
* 排队效果 - 多个动画按照先后顺序执行
* 类数组操作
* 查看了jQuery的底层代码 - jQuery对象是数组对象
* 属性
* length属性 - 获取jQuery对象中包含DOM对象的个数
* 方法
* get(index) - 根据索引值返回对应的DOM对象
* eq(index) - 根据索引值返回对象的DOM对象
* index(obj) - 根据DOM对象返回对应的索引值
* 隐式迭代
* $().each(callback) - 对象方法
* callback - function(index,domEle){}
* index - 遍历过程中的索引值
* domEle - 遍历之后的结果(DOM对象)
* $.each(obj,callback) - 全局函数
* obj - 需要遍历的对象或数组
* callback - function(index,domEle){}
* index - 遍历过程中的索引值
* domEle - 遍历之后的结果(DOM对象)
* jQuery插件
* 概念
* 基于jQuery进行扩展或简化(JS文件)
* 使用
* 在HTML页面中引入外部文件
* 引入jQuery文件
* 引入jQuery插件文件
* 在HTML页面中定义容器(元素)
* 在javascript代码中使用插件提供的API方法
* 插件
* My97日期插件
* 表单验证插件
JQUERY DAY04:
* jQuery插件
* 如何学习(研究)jQuery插件
* 提供插件的帮助文档
* 提供demo(示例)
* 表单验证插件
* 树菜单插件
*
PM:
JQUERY DAY04:
* jQuery插件
* 如何学习(研究)jQuery插件
* 提供插件的帮助文档
* 提供demo(示例)代码
* 表单验证插件
* 树菜单插件
* jQuery UI - 集成页面特效
* 开发插件 - 原理
* 对象方法插件 - $().each()
* $.fn.extend()
* 全局函数插件 - $.each()
* $.extend()
* 选择器插件 - 目前几乎不用
* 这一类插件扩展jQuery选择器的用法
* jQuery官方推出专门用于扩展选择器的JS库
* 举例 - XPath插件 - 专门用于解析XML文件
* 目的
* 将来实际开发需要独自开发插件(入门级)
* 为了面试：1.使用过哪些插件 2：自己写过的插件