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()打印输出
* 断点调试
* 打断点 - 在对应代码前的行标处,鼠标点击即可
* 断点调试 - 重新加载页面,自动停止在对应的代码中
* 功能 - 从左到右
* 暂停|运行功能
* 单步跳过
* 单步跳入
* 单步跳出
* 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(){});