Jquery
一、Jqyery概述
1. jQuery是一个javascript库
2. jQuery极大的简化了javaScript编程
HTML元素选取、操作
css（dom）操作
HTML事件函数
javascript特效和动画
HTML DOM遍历和修改
3. jQuery库可以通过一行简单的标记被添加到网页中
二、Jquery的使用
1. jQuery对象和DOM对象
（1）jQuery对象和DOM对象的属性和方法不能混用,须转换
$获取过来的是jQuery对象
原生js获取过来的是DOM对象
（2） DOM对象转为jQuery对象
mydiv = document.querySelector('div');
$(mydiv);
（3）jQuery对象转为DOM对象: $('element')[index].jQuery属性方法
$('element').get()index).jQuery属性方法
$('mydiv');
$('mydiv')[index].hide();
或$('mydiv').get()index)..hide();2. jQuery选择器
（1）jQuery选择器允许对HTML元素组或单个元素进行操作
（2）jQuery选择器基于id、类（class）、类型（Tag）属性（Attr）、
属性值（value）等进行查找或者选择HTML元素
（2）jQuery是基于已有的css选择器，除此之外，他还自定义了一些选择器
（3）jQuery中所有的选择器都以美元符号$开头($是jQuery的别称,
在代码中可以使用jQuery代替$,通常都直接使用$,$也是jQuery的顶级对象,
相当于JavaScript中的window,把元素利用$包装成jQuery对象,就可以调用jQuery的方法)(1)基础选择器
*匹配所有
$('*').css('background','red');
,表示群组选择，匹配多个元素时中间用英文逗号隔开
$('div,p').css('background','red');
匹配标签
$('div').css('background','red');
匹配id
$('#id01').css('background','red');
匹配class
$('.class01').css('background','red');
(2)层级选择器
直接或间接后代选择器 (前面的选择器必须是后面选择器的父级标签,父级与子级选择器之间用空格隔开)
$('div p').css('background','red');
直接后代选择器(前面的选择器必须是后面选择器的直接父级标签)
$('div>p').css('background','red');
相邻或者不相邻后代选择器(同级兄弟关系，相邻元素之间用~隔开，但只有后一个元素应用样式)
$('p~p').css('background','red');
相邻后代选择器(同级且相邻兄弟关系，相邻元素之间用+隔开，但只有后一个元素应用样式)
$('p+p').css('background','red');
(3)基本过滤选择器
匹配第一个
$('div:first').css('background','red');
匹配最后个
$('div:last').css('background','red');
排除选择
$('div:not(.class01)').css('background','red');
$('div:not(.class01,.class02)').css('background','green');
选择奇数个
$('div:even').css('background','red');
选择偶数个
$('div:odd').css('background','red');
自定义选择
$('div:eq(0)').css('background','red');//选择第一个div
选择大于的
$('div:gt(2)').css('background','red');//选择第3个之后的div
选择小于的
$('div:lt(3)').css('background','red');//选择第4个之前的div
选择标题标签
$(':header').css('background','red');//h1-h6的标题标签
选择处于动画效果的
$(':animated').css('background','red');
选择符合条件的第几个
$('div:nth-child(3n)').css('background','red');//选择第3个div
$('div:nth-child(3n+1)').css('background','red');//每3个div里选择第1个div
选择符合条件的排序后的第几个
$('div:nth-of-type(3n)').css('background','red');//选择div里的第3个
(4)可见性选择过滤器
display：none 或者 input type = hidden 不可见且不占位置
visbility：hidden 或者 opacity：0 不可见但是占位置
$(':hidden)').css('background','block');
$(':visible').css('background','red');
(5)内容过滤选择器
包含字符
$('div:contains(\'3\')').css('background','red');//选择包含字符3的div
空值
$('div:empty').text(123);
包含子元素或者文本
$('div:parent').css('background','red');
包含子元素
$('div:has(p)').css('background','red');
(6)属性过滤选择器
带有属性的
$('div[myAttr]').css('background','red');
带有属性的并且符合属性值
$('div[myAttr=\'a11\']').css('background','red');
不带有属性的，或者带有属性但属性值不符的
$('div[myAttr!=\'a11\']').css('background','red');
带有属性但属性值不符的
$('div').filter('[myAttr]').filter('myAttr!=\'a11\']').css('background','red');
等价于 $('div[myAttr][myAttr!=\'a11\']').css('background','red');
属性值以xxx开头
$(div[myAttr^=\'a1\']).css('background','red');
属性值以xxx结尾
$(div[myAttr$=\'22\']).css('background','red');
属性值包括xxx
$(div[myAttr*=\'1\']).css('background','red');
(7)表单过滤器
$(:input).css('display','none');
$(:text).css('display','none');
$(:password).css('display','none');
$(:radio).css('display','none');
$(:checkbox).css('display','none');
$(:submit).css('display','none');
$(:reset).css('display','none');
$(:image).css('display','none');
$(:file).css('display','none');
$(:button).css('display','none');// 和都能选择
$(:enabled).css('display','none');//可用表单
$(:disabled).css('display','none');//不可用表单3. Jquery筛选方法
$('Element').parent() 查找直接父级
$('Element').parents() 查找间接父级
$('Element').children(selector) 相当于$('ul>li'),查找最近一级(亲儿子)
$('Element').find(selector) 相当于$('ul li'),后代选择器
$('Element').siblings("element") 查找兄弟节点,不包括自己本身
$('Element').nextAll() 查找当前元素之后所有同辈元素
$('Element').prevtAll() 查找当前元素之前所有同辈元素
$('Element').hasClass(class) 检查当前的元素是否含有某个特定的类,如果有则返回true
$('Element').eq(index) 相当于$('li：eq(2)'),index从0开始4. Jquery事件(Jquery的入口函数)
onload 和 ready()
// onload 和 ready()不可以混用
onload 和 ready()区别：
（1）ready表示文档结构已经加载完成（不包含图片等非文字媒体文件），只是在所有的DOM加载完毕后就会触发，在jQuery中可利用多个jQuery.Ready( )方法，他们会按次序依次执行。在页面加载完成后，立即执行指定的函数。这么做的好处是可以减少页面渲染的时间，加快页面加载，提升用户体验。
（2）onload指页面包含图片等文件在内的所有元素都加载完成。在onload中只能
window.οnlοad=function()
{
a( );
b( );
}
(3)ready在onload前加载,ready()相比onload事件绑定函数的优势：具有较高优先级，只需等到html结构加载完成后即可执行；而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload，大多数我们都可以使用ready()来进行编写js代码。
ready()的三种写法：
(1)
$(document).ready(function(){
console.log(ready 1);
});
(2)
$().ready(function(){
console.log(ready 1);
});
(3)
$(function(){
console.log(ready 3);
});
常用事件：
(1)$('div:eq(0)').click(function(){//点击事件
console.log(div click);
});
(2)$('div:first').dblclick(function(){//双击事件
console.log(div dblclick);
});
mouseover和mouseenter都是鼠标移到元素身上就触发，
区别是：
mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性，
mouseenter只经过自身盒子触发，没有冒泡特性
mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡
(3)
$('div:eq(0)').mouseenter(function(){//鼠标划过事件
console.log(div mouseenter);
});
$('div:eq(0)').mouseleave(function(){//鼠标划走事件
console.log(div mouseleave);
});
$('div:eq(0)').mouseover(function(){//鼠标划过事件
console.log(div mouseover);
});
$('div:eq(0)').mouseout(function(){//鼠标划走事件
console.log(div mouseout);
});
$('div:first').hover(
function(){
$(this).css('background-color','green');//鼠标划过事件
},
function(){
$(this).css('background-color','white');//鼠标划走事件
}
);
(4)$('button:eq(0)').focus(function(){//获取焦点的元素事件
$(this).css('background-color','green');
});
$('button(0)').blur(function(){//没有焦点时
$(this).css('background-color','red');
}); (5)键盘事件
$('button:first').keydown(function(e){
var keys = e.which;
console.log('keydown' + keys);
});
$('button:first').keyup(function(e){
var keys = e.which;
console.log('keyup' + keys);
});
$('button:first').keypress(function(e){
var keys = e.which;
console.log('keypress' + keys);
});
(6)delegate //事件委托，子元素不绑定任何事件，子元素通过冒泡将事件交由父元素处理
$('div').delegate('p','click',function(event){
console.log(event.target);
});
bind的两种用法：
(1)可以用更加优雅的方式以object的方式给一个元素绑定多个事件
$('button:first').bind({
focus:function(){
$(this).css('background-color','green');
},
blur:function(){
$(this).css('background-color','red');
},
})
(2)可以用于传递参数
function handler(e){
console.log(e.data.msg);
}
$('button:first').bind('focus',{msg:'hello'},handler);
on的用法：代替bind和代替delegate
代替bind：
(1)可以用更加优雅的方式以object的方式给一个元素绑定多个事件
element.on(events,[selector],fn) //events：一个或多个用空格分隔的事件类型，selector：元素的子元素选择器
$('button:first').on({
focus:function(){
$(this).css('background-color','green');
},
blur:function(){
$(this).css('background-color','red');
},
})
(2)on可以实现事件委托
$("Ul li").click() //隐式迭代，给每一个li绑定了事件
$("ul").on("click","li"'function（）{})；//只是给ul注册了事件，但把事件委托给了li，触发条件是li，大大增加了执行效率
(3)on可以给动态创建的元素绑定事件(click()实现不了)
(4)可以用于传递参数
function handler(e){
console.log(e.data.msg);
}
$('button:first').on('focus',{msg:'hello'},handler);
代替delegate：
$('div').delegate('click','p',function(event){
console.log(event.target);
}); on事件解绑
$("element").off() //解除element上所有事件
$("element").off("click") //解除element上的点击事件
$("element").off("click","li") //解除element上的点击事件委托
$("element").one();绑定事件 //只会触发一次事件
自动触发事件 (轮播图):
$("element").click();
$("element").trigger("click");
$("element").triggerHandler("click"); //不会触发事件的默认行为 (比如文本框获得焦点时不会有光标闪烁)5. jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
下面的表格列出了所有用于处理事件的 jQuery 方法。
方法 描述
bind() 向元素添加事件处理程序
blur() 添加/触发失去焦点事件
change() 添加/触发 change 事件
click() 添加/触发 click 事件
dblclick() 添加/触发 double click 事件
delegate() 向匹配元素的当前或未来的子元素添加处理程序
die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error() 在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace 返回当事件被触发时指定的命名空间
event.pageX 返回相对于文档左边缘的鼠标位置
event.pageY 返回相对于文档上边缘的鼠标位置
event.preventDefault() 阻止事件的默认行为
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation() 阻止其他事件处理程序被调用
event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target 返回哪个 DOM 元素触发事件
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey 事件触发时 META 键是否被按下
focus() 添加/触发 focus 事件
focusin() 添加事件处理程序到 focusin 事件
focusout() 添加事件处理程序到 focusout 事件
hover() 添加两个事件处理程序到 hover 事件
keydown() 添加/触发 keydown 事件
keypress() 添加/触发 keypress 事件
keyup() 添加/触发 keyup 事件
live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown() 添加/触发 mousedown 事件
mouseenter() 添加/触发 mouseenter 事件
mouseleave() 添加/触发 mouseleave 事件
mousemove() 添加/触发 mousemove 事件
mouseout() 添加/触发 mouseout 事件
mouseover() 添加/触发 mouseover 事件
mouseup() 添加/触发 mouseup 事件
off() 移除通过 on() 方法添加的事件处理程序
on() 向元素添加事件处理程序
one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数
ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
select() 添加/触发 select 事件
submit() 添加/触发 submit 事件
toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
unbind() 从被选元素上移除添加的事件处理程序
undelegate() 从现在或未来的被选元素上移除事件处理程序
unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu() 添加事件处理程序到 contextmenu 事件
$.holdReady() 用于暂停或恢复.ready() 事件的执行6. jQuery 常用方法
(1)获得或者设定内容
console.log($('#pid').text()); //获得text内容
$('#pid').text('555'); //设定text内容
$('#pid').text(function(i,origText){ //函数方法设定text内容
console.log(i + '-' + origText);
return 'aaa';
});
(2)获得或者设定html()内容
console.log($('#pid').html()); //获得html内容
$('#pid').html('555'); //设定html内容
$('#pid').html(function(i,origText){ //函数方法设定html内容
console.log(i + '-' + origText);
return 'aaa';
});
(3)获得或者设定表单控件的value值
console.log($('input:first').val()); //获得val内容
$('input:first').val('555'); //设定val内容
$('input:first').val(function(i,origText){ //函数方法设定val内容
console.log(i + '-' + origText);
return 'aaa';
});
(4)
a.获取和设定元素固有的属性值element.prop('属性名')
console.log($('checkbox').prop('checked'));// 复选框的选中状态
$('a').prop('tittle','我是更改后的标题');
b.获得或者设定元素自定义属性attr()
console.log($('input:first').attr('index')); //获得attr属性
$('input:first').attr('type','password'); //设定attr属性
$('input:first').attr({ //对象方法设定val属性
type:password,
value:'123456',
});7. jQuery DOM 元素的遍历,添加和删除
遍历元素2种方法:
(1) $('element').each(function(index,domEle){$(domEle).css('color','blue');})
//遍历 ，回调函数里第一个参数是索引号，第二个参数是dom元素对象
(2) $.each($('element'),function(index,domEle){$(domEle).css('color','blue');})
//遍历 ，主要用于遍历数据（数组，对象），处理数据
创建元素的三种方法：
(1)HTML：
var txt1 = 'p1
';
(2)JS原生
var txt2 = document.createElement('p');
txt2.innerHTML = 'p2';
(3)Jquery
var txt3 = $('').text('p3');
添加元素:
append() //在被选元素的结尾插入元素，作为子元素
perpend() //在被选元素的开头插入元素，作为子元素
after() //在被选元素之后插入元素，作为同级元素
before() //在被选元素之前插入元素，作为同级元素
var txt3 = $('hello word
');
$('div:eq(1)').append(txt1);
$('div:eq(1)').perpend(txt1);
$('div:eq(1)').after(txt1);
$('div:eq(1)').before(txt1);
删除DOM元素
(1)remove() //自杀,自己删除自己
$('p:contains(p1)').remove();
等价于 $('p').remove(:contains(p1));
(2)empty() //父亲杀儿子,父亲删除自己所有子元素
$('div:eq(1)').empty();
(3)css操作
addClass:添加
$('p.contains(p1)').addClass(cls1);
removeClass:删除
$('p.contains(p1)').removeClass(cls1);
toggleClass:切换
$('button').click(function(){
$('p.contains(p2)').toggleClass(cls1);
});
css操作一个：
$('p.contains(p2)').css('background-color','red');
css操作多个：
$('p.contains(p2)').css('background-color','red').css('color','green'); //级联方法
$('p.contains(p2)').css({ //对象方法
'background-color':'red',
'color':'green'
});8. jQuery对象拷贝
把某个对象拷贝给另一个对象使用(如果有相同的属性值,目标对象的属性值会被合并覆盖掉)
$.extend([deep],target,obj1,obj2);
//deep：默认为false，浅拷贝，如果·设为true为深拷贝，
target：拷贝给的目标对象，
obj：要拷贝的对象
浅拷贝时,复杂数据类型只会拷贝其地址给目标对象,修改目标对象会影响被拷贝对象
深拷贝时,完全克隆拷贝的对象,而不是地址,修改目标对象不会影响被拷贝对象
$(function(){
var targetObj = {
id:0
};
var obj = {
id:1,
name:"andy"
}
$.extend(targetObj,obj);
console.log(targetObj);
})
9. 显示相关（中间添加动画过渡效果）
$('element').hover(鼠标经过函数,鼠标离开函数); //切换效果
$('element').stop(); //结束上一个动画，解决动画排队问题，但函数必须写在动画前面
$('#show').click(function(){ //显示状态切换为匀速显示
$(p:eq(0)).show(2000,f); //速度2000毫秒，调用f函数
});
$('#hide').click(function(){ //显示状态切换为匀速隐藏
$(p:eq(0)).hide(2000,f); //速度2000毫秒，调用f函数
});
$('#toggle').click(function(){ //来回匀速切换显示与隐藏状态
$(p:eq(0)).toggle(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeIn').click(function(){ //显示状态切换为加速显示
$(p:eq(0)).fadeIn(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeOut').click(function(){ //显示状态切换为加速隐藏
$(p:eq(0)).fadeOut(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeOut').click(function(){ //显示状态切换为半透明
$(p:eq(0)).fadeTo(2000,0.5); //速度2000毫秒，修改透明度为0.5
});
$('#fadeToggle').click(function(){ //来回加速切换显示与隐藏状态
$(p:eq(0)).fadeToggle(2000,f); //速度2000毫秒，调用f函数
});
$('#slideDown').click(function(){ //显示状态切换为下滑显示
$(p:eq(0)).slideDown(2000,f); //速度2000毫秒，调用f函数
});
$('#slideUp').click(function(){ //显示状态切换为上滑隐藏
$(p:eq(0)).slideUp(2000,f); //速度2000毫秒，调用f函数
});
$('#slideToggle').click(function(){ //来回切换上滑与下滑的显示与隐藏状态
$(p:eq(0)).slideToggle(2000,f); //速度2000毫秒，调用f函数
});10. jQuery尺寸,位置操作
jQuery尺寸:
width()/height() 获取和设置匹配元素宽度和高度值
innerWith()/innerHeight() 获取和设置匹配元素宽度和高度值,含padding
outerWith()/outerHeight() 获取和设置匹配元素宽度和高度值,含padding,border
outerWith(true)/outerHeight(true) 获取和设置匹配元素宽度和高度值,含padding,margin,borderjQuery位置:
offset() 获取和设置被选元素相对于文档的偏移坐标,跟父级没有关系
position() 获取被选元素相对于有定位的父亲的偏移坐标,
所有父级都没有定位,则相对于文档
scrollTop()/scrollLeft 获取和设置被选元素被卷去的头部和左侧
(document.scrollTop()/scrollLeft 文档被卷去的头部和左侧)11. Jquery 自定义动画
animate({想要修改的样式属性},速度(slow / normal / fast),切换效果(swing /l inear) , 回调函数)
12. jQuery多库共存
解决多个库共用$符号,出现冲突的情况
解决方法:
a. 把里面的$符号统一改为jQuery,比如jQuery("div");
b. jQuery变量规定新的名称:$.noConflict() ,比如:var xx = $.noConflict();
13. 方法链（chaining）
方法链是一种Jquery的技术，允许在相同的元素上运行多条命令，一条接着一条，这样的话浏览器就不必多次查询同一元素，如果需要链接一个动作，只需要简单的追加动作即可。
jQuery案例:banner轮播图
var $j = 0; //当前图像
var $last = 0;
var $timer = '';
var $period = 2000; //间隔时间
var $z-iNdex = 1;
var $img = $('div#banner ul li img');
$img.eq($j).css('z-index',$z-index).css('opacity','1');
$img.filter(':not(:eq('+$j+'))').css('opacity','0');
function startRoll(){
$last = $j;
$j++;
$z-index++;
if($j >= $img.length){
$j = 0;
}
$img.eq($j).css('z-index',$z-index).animate({opacity:1},1000,'linear',finction(){
$img.eq($last).css('opacity','0');
});
$timer = setTimeout('startRoll',period);
console.log($last + '-' + $j);
}
$timer = setTimeout('startRoll',period);14. jQuery插件
瀑布流,图片懒加载插件网址:www.jq22.com
jQuery全屏滚动插件网址:http://www.dowebok.com/demo/2014/77/