jQuery
jQuery就是JS的一个扩展库，工具库，提供很多方便快捷的方法，所以将JS对象转换为jQuery对象后，能更方便地操作这个对象。
jQuery 能做什么？
- 选择网页元素（HTML 元素选取）
- 改变结果集（HTML 元素操作、CSS 操作）
- 工具方法（HTML DOM 遍历和修改）
- 事件操作（HTML 事件函数）
- 特殊效果（特效和动画）
- AJAX
- http://devdocs.io/jquery/
jQuery 对象和 DOM 原生对象有什么区别？如何转化？
联系
- jQuery对象：通过jQuery包装DOM对象后产生的对象；
- 两者之间可以相互转换；
区别
- jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
- jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错；
联系
- jQuery对象：通过jQuery包装DOM对象后产生的对象；
- 两者之间可以相互转换；
相互转换：
jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
- jQuery对象是一个数据对象，通过[index]的方法
如：var $v = $("#v") ; //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
- jQuery本身提供，通过.get(index)方法
如：var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
- DOM对象转成jQuery对象:
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
jQuery中如何绑定事件？(bind、unbind、delegate、live、on、off)
以下为绑定事件方法的优选排序
1. on(events,[selector],[data],fn)
- events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
- selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
- data:当一个事件被触发时要传递event.data给事件处理函数。
- fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
在选择元素上绑定一个或多个事件的事件处理函数。
//Display a paragraph's text in an alert when it is clicked:
$("p").on("click", function(){
alert( $(this).text() );
});
2 off(events,[selector],[fn])
- events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
- selector:一个最初传递到.on()事件处理程序附加的选择器。
- fn:事件处理程序函数以前附加事件上，或特殊值false.
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。
特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。
//Remove all event handlers from all paragraphs:
$("p").off()
//Remove all delegated click handlers from all paragraphs:
$("p").off( "click", "**" )
//Remove just one previously bound handler by passing it as the third argument:
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
jQuery中on绑定事件使用事件代理
$("div>ul">.on("click","li",function(){
console.log($this.text())
})
3. bind(type,[data],fn)
- type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
- data:作为event.data属性值传递给事件对象的额外数据对象
- fn:绑定到每个匹配元素的事件上面的处理函数
为每个匹配元素的特定事件绑定事件处理函数。
jQuery 3.0中已弃用此方法，请用on()代替。
//当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
//同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
4. unbind(type,[data|fn]])
- type:删除元素的一个或多个事件,由空格分隔多个事件值。
- fn:要从每个匹配元素的事件中反绑定的事件处理函数
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
jQuery 3.0中已弃用此方法，请用off()代替。
如果没有参数，则删除所有绑定的事件。
//把所有段落的所有事件取消绑定
$("p").unbind()
//将段落的click事件取消绑定
$("p").unbind( "click" )
//删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
5. delegate(selector,[type],[data],fn)
- selector:选择器字符串，用于过滤器触发事件的元素。
- type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
- fn:当事件发生时运行的函数
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
jQuery 3.0中已弃用此方法，请用on()代替。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
//HTML :
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
//jQuery :
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
6. live(type, [data], fn)
- type:一个或多个事件类型，由空格分隔多个事件。
- fn:要从每个匹配元素的事件中反绑定的事件处理函数
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
从 jQuery 1.7 开始，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。
<p>Click me!</p>
//点击生成的p依然据有同样的功能
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
//阻止默认事件行为和事件冒泡，返回 false
$("a").live("click", function() { return false; });
//仅仅阻止默认事件行为
$("a").live("click", function(event){
event.preventDefault();
});
delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
jQuery 展示/隐藏元素
1. hide([speed,[easing],[fn]])
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
隐藏显示的元素
//隐藏所有段落
$("p").hide()
//用600毫秒的时间将段落缓慢的隐藏
$("p").hide("slow");
//用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
alert("Animation Done.");
});
2. show([speed,[easing],[fn]])
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
显示隐藏的匹配元素。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
//将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
<p style="display: none">Hello</p>
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
3. toggle([speed],[easing],[fn])
- speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
jQuery 代码:
$("p").toggle("fast",function(){
alert("Animation Done.");
});
//如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
jQuery 代码:
$('#foo').toggle(showOrHide);
//相当于
if (showOrHide) {
$('#foo').show();
} else {
$('#foo').hide();
}
jQuery 动画demo
1. 淡入淡出
1. fadeIn([speed],[easing],[fn])
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
//用200毫秒快速将段落淡入，之后弹出一个对话框
jQuery 代码:
("p").fadeIn("fast",function(){
alert("Animation Done.");
});
2. fadeOut([speed],[easing],[fn])
通过淡出的方式隐藏匹配元素,参数和用法同上
$('#book').fadeOut('slow', function() {
// Animation complete.
});
3. fadeTo([[speed],opacity,[easing],[fn]])
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- opacity:一个0至1之间表示透明度的数字。
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
含义同上，用法如下
//用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
4. fadeToggle([speed,[easing],[fn]])
设置淡入淡出开关，用法和含义同上
2. 滑动
1. slideDown([speed],[easing],[fn])
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn在动画完成时执行的函数，每个元素执行一次。
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
//用200毫秒快速将段落滑下，之后弹出一个对话框
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
2. slideUp([speed,[easing],[fn]]).
含义方法同上
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性将被设置为none，以确保该元素不再影响页面布局。
3. slideToggle([speed],[easing],[fn])
设置滑动开关，含义方法同上
//用200毫秒快速将段落滑上或滑下，之后弹出一个对话框
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
动画队列
//回调地狱
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})
//等价于 链式调用
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('真的完毕了')
})
自定义动画
上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
.clearQueue
清除动画队列中未执行的动画
.finish
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
- clearQueue(default: false)
- jumpToEnd(default: false)
设置和获取元素内部 HTML 内容
.html([val|fn])
//返回p元素的内容。
$('p').html();
//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
设置和获取元素内部文本
.val([val|fn|arr])
获得匹配元素的当前值。
//获取文本框中的值
$("input").val();
//设定文本框的值
$("input").val("hello world!");
.text([val|fn])
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
//返回p元素的文本内容。
$('p').text();
//设置所有 p 元素的文本内容
$("p").text("Hello world!");
//使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
设置和获取表单用户输入或者选择的内容and设置和获取元素属性
//获取input text输入的内容
$('input[type=text]').val()
//获取radio的值
$('input[type=radio]').val()
//获取select的值
$('select').val()
//获取select name 属性
$('select').attr('name')
//设置select name属性
$('select').attr("name", "test")
$('select').attr({name: 'test'})
