* DOM操作
*1 基本操作
* html() - 等价于innerHTML属性
* text() - 等价于textContent属性
* val() - 等价于value属性
* attr() - 等价于getAttribute()和setAttribute()
* removeAttr() - 等价于removeAttribute()
* 2 CSS操作
①* attr()方法 - 设置样式(删除原有样式，设置新样式)
* style属性和class属性
②* class操作
* addClass() - 添加样式
* removeClass() - 删除样式
* removeClass() - 删除所有样式
* removeClass(className) - 删除指定样式
* toggleClass(className) - 切换样式
* 判断当前元素是否具有className样式
* 如果有，删除 - removeClass()
* 如果有，添加 - addClass()
* hasClass(className) - 判断是否包含指定样式
③* css()方法
* css(name, value) - 设置一个样式属性
* css({name:value,name:value,...}) - 设置多个样式属性
*3 遍历元素
* 祖先元素与后代元素
* 祖先元素 - parents()
* 后代元素 - find(expr)
* 父元素与子元素
* 父元素 - parent()
* 子元素 - children()
* 兄弟元素
* 前一个兄弟 - prev()
* 前面所有的兄弟 - prevAll()
* 后一个兄弟 - next()
* 后面所有的兄弟 - nextAll()
* 所有兄弟 - siblings()
*4 创建元素 - $(HTML代码)
* 5插入节点
* 内部插入
* append()
* prepend()
* 外部插入
* after()
* before()
* 6替换节点
* replaceWith()
* replaceAll() - 颠倒了的replaceWith()
* 7删除节点
* remove() - 删除自身与后代
* empty() - 保留自身，删除后代
*8 复制节点
* clone(boolean) - 是否复制事件
* 9事件
* ready()方法
* 作用 - 等价于 window.onload
* 与window.onload的区别
* ready()
* 每一个HTML页面中允许存在多个
* 具有简写
* $().ready(function(){})
* $(function(){})
* 速度快 - 只加载DOM结构
* window.onload
* 每一个HTML页面中只能存在一个
* 没有简写
* 速度慢 - 加载页面所有内容
* 10与JS库冲突
* 原因 - $符号的使用权
* 原则 - jQuery主动放弃
* 解决
* jQuery.noConflict(); - 表示jQuery主动放弃
* 利用自调函数
(function($){
})(jQuery);
* 利用ready()方法
$(function($){})
25今天的内容:
25.1 事件
25.1.1 事件的绑定与解绑
* bind(type, data, fn)
* type - 绑定的事件名称
* data - (可选)作为event.data属性值传递给事件对象的额外数据对象
* fn - 绑定事件的对应处理函数
* unbind(type, fn)
* type - 解绑的事件名称
* fn - 解绑事件的对应处理函数
TODO bind()方法绑定多个事件
TODO * type - 如果绑定的是多个事件，中间使用空格隔开
$('h5').bind('mouseover mouseout',function(){
var $div = $(this).next();
if($div.is(':hidden')){
$div.show();
}else{
$div.hide();
}
});
unbind()方法解绑
TODO * 不传递任何参数时 - 表示解绑所有事件
TODO * 传递一个事件名称 - 表示解绑指定事件
TODO * 传递多个事件名称 - 表示解绑多个事件
$('h5').unbind('mouseover mouseout');
unbind()方法的fn参数
TODO * 默认情况下，允许不传递
TODO * 传递解绑的事件处理函数fn - 必须与 bind() 方法的处理函数是同一个
$('#btn').click(function(){
alert('xxx');
});
// TODO trigger()方法 - 用于模拟用户触发指定事件
$('#btn').trigger('click');
* 面试题 - bind()、one()、live()和on()的区别
unbind()、die()和off()的区别
* one() - 事件绑定，只能绑定一次(触发一次即失效)
* live() - 事件绑定，为后面添加的元素绑定事件
* jQuery 1.7版本后，被弃用了
* jQuery 1.7版本后，新增delegate()方法，作用与live()相同
* bind() - 事件绑定
* on() - 统一以上所有事件绑定，on()是bind（）的底层逻辑
* jQuery 1.7版本后，新增
24.2 动画
24.2.1 显示与隐藏 - 同时改变宽度和高度
* show() - 显示
* show() - 无参版本，没有动画效果
* show() - 有参版本，具有动画效果
* 参数 - slow、normal和fast预定义，自定义时间(毫秒)
* hide() - 隐藏
* hide() - 无参版本，没有动画效果
* hide() - 有参版本，具有动画效果
* 参数 - slow、normal和fast预定义，自定义时间(毫秒)
* toggle() - show() + hide()
* 显示与隐藏的切换效果
$('h5').click(function(){
$(this).next().slideToggle(3344);
})
* 滑动效果 - 改变高度
* slideUp()
* 注意 - 并没有提供无动画版本
* 不传递参数时 - 底层逻辑默认提供一个动画执行的时间
* slideDown()
* slideToggle() - slideUp() + slideDown()
* 向上滑动与向下滑动的切换效果
$('#navigation ul li:has(ul)').mouseover(function(event){
$(this).children('ul').slideDown();
}).mouseOut(function(){
$(this).children('ul').slideUp();
})
hover(fn,fn)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
$('#navigation ul li:has(ul)').hover(function(){
$(this).children('ul').stop(true,true).slideDown(444);
},function(){
$(this).children('ul').stop(true,true).slideUp("fast");
})
* 淡入淡出 - 改变透明度
* fadeIn() - 淡入
* fadeOut() - 淡出
* fadeTo(speed, opacity) - 将指定元素的透明度改变到指定值
* opacity - 表示设置透明度变化到的值
* fadeToggle() - jQuery 1.4版本以后
* 自定义动画
* ① animate(params, [duration], [easing], [callback])
* params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object 类型
{ name : value, name : value,... }
* duration - 表示用于实现动画所执行的时长，单位为毫秒
* easing - 要使用的擦除效果的名称(需要插件支持)
* callback - 表示动画执行完毕后的回调函数
*② animate(params, options)
* params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object 类型
{ name : value, name : value,... }
* options
* 格式 - Object 类型
* 选项
* duration - 表示用于实现动画所执行的时长，单位为毫秒
* easing - 要使用的擦除效果的名称(需要插件支持)
* complete - 表示动画执行完毕后的回调函数
* queue - 为true时排队效果，为false时并发效果
* 两种用法的效果
* 并发效果 - 同时改变多个CSS样式属性
$('#panel').animate({
left : 400,
top : 400
},3000)
* 排队效果 - 多个CSS样式属性按照先后顺序依次改变
$('#panel').animate({
left : 400
},3000).animate({
top : 400
},3000)
* 注意 - 所有与颜色相关的 CSS 样式属性不能使用
* background-color
* border-color
* color
* jQuery类数组对象
* 特点 - 允许存储多个元素，有序排列
* 属性
* length - 表示长度，指的是当前存储元素的个数
* 方法
* 循环遍历方法
* $().each(function(index,domEle){})以每一个匹配的元素作为上下文来执行一个函数。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
* $.each(object,function(index,domEle){})通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
* toArray()方法（调用toArray()方法打印内容，打印方法的返回值）
* 将jQuery对象转换为真正的数组
* 注意 - 只能操作 jQuery 对象
* $.inArray(value, array)
* 作用 - 表示判断指定的值在指定数组中的位置（是否存在）(索引值）
var arr = [1,2,3,4,5];
console.log($.inArray(1,arr));//0下角标
* 注： 如果数组包含指定的值 - 返回对应的索引值
* 如果数组不包含指定的值 - 返回固定值 -1
TODO $.inArray()不能判断对象中是否包含属性或方法,in可以
TODO $.inArray()方法
TODO * 作用 - 用于判断指定 jQuery 对象中是否包含指定的 DOM 对象
TODO * 如果包含，返回对应的索引值
TODO * 如果不包含，返回 -1
var obj = {
name : 'zhangwuji',
age : 18}
console.log($.inArray('name',obj));//-1
console.log('name' in obj);//true
* $.makeArray(obj)
* 作用 - 将类数组对象转换为数组对象
* 注意 :类数组对象 - 不仅仅只是指 jQuery 对象，所有类数组对象都可以
var $inputs = $('input');
console.log($.makeArray($inputs));//array[5]
* JSON格式
* $.pareseJSON() - jQuery提供了将JSON字符串转换为JSON对象的方法
var jsonObj = {
name : 'zhangwuji',
age : 18
}
var jsonStr = '{"name":"zhangwuji","age":18}';
console.log(JSON.parse(jsonStr));//obj
console.log(JSON.stringify(jsonObj));//{"name":"zhangwuji","age":18}
console.log($.parseJSON(jsonStr));//obj
* jQuery插件
TODO laydate插件
TODO * 最初设计时，以 jQuery 的插件出现
TODO * 后期发展，脱离了 jQery
TODO laydate 插件
TODO * class="laydate-icon" - 插件提供的
TODO * placeholder - HTML5新增属性，提供默认提示内容
TODO * 类似于 <input> 标签中的 value 属性
TODO * 通过事件属性实现
TODO * laydate()方法 - 插件提供的
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
<!-- TODO 老版本提供的 -->
<input placeholder="请输入日期" id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
* 日期插件
* 基本用法
* 在HTML页面中引入插件文件
* 为<input>标签设置 onclick 事件属性，值为 laydate() 方法
1 TODO 参考了基本用法 - 自己想到的
$('#mydate').click(laydate);
2 TODO 插件提供的JS方式
TODO * 直接调用 laydate(options) 方法
TODO * options - Object 类型
TODO * 选项
TODO * elem - 设置对应的元素(#ID)
TODO * format - 设置日期格式
TODO YYYY-MM-DD - 标准日期格式
laydate({
elem : '#mydate',
// TODO YYYY-MM-DD
format : 'YYYY/MM/DD',
istoday : false,
isclear : false,
min : '1999-01-01 00:00:00'
});
jQuery插件
表单验证插件：常见的有四种（及管网地址）
TODO effect(effect, options, duration, callback)
TODO * effect - 表示设置的动画效果
TODO * blind
TODO * bounce
TODO * ...
TODO * options - 选项
TODO * duration - 表示动画执行的时长，单位为毫秒
TODO * callback - 表示动画执行完毕后的回调函数
*/
/* $('#effect').effect('blind',{},3000);*/
$('#effect').effect('blind',{},3000);
draggable()方法的选项
* axis - 设置只能在x轴或y轴方向拖动
* containment - 设置在某个区域内拖动
* cursor - 设置拖动时鼠标的样式
* cursorAt - 设置鼠标的相对定位
* handle - 设置指定元素触发鼠标按下事件才能拖动
* cancel - 防止在指定元素上拖动
* revert - 当停止拖动时，元素是否被重置到初始位置
* snap - 拖动元素是否吸附在其他元素
* snapMode - 设置拖动元素在指定元素的哪个边缘
* snap设置为true时该选项有效
* 可选值 - inner|outer|both
$( "#draggable1" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable5" ).draggable({ handle: "p" });
$( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
$( "#draggable7" ).draggable({ revert: true });
$( "#draggable8" ).draggable({ snap: true });
$( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });
dropaable()方法的选项
* accept - 指定可拖动的元素可被接受
* activeClass - 被允许拖放的元素覆盖时，改变样式
* hoverClass - 被允许拖放的元素悬停时，改变样式
droppable()方法的事件
* drop - 该事件在被允许拖放的元素覆盖时触发
$( "#droppable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});