JavaScript库
JavaScript库是一个封装好的特定的集合（方法和函数）
简单来说就是一个JS文件，里面封装了js代码
jQuery
jQuery是一个JavaScript库
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和ajax函数
jQuery基本使用
首先下载jQuery文件，然后引入jQuery文件（<script src="jQuery.js"></script>）
jQuery入口函数
得到页面DOM加载完毕再执行函数
$（document）.redy(function(){
})
$(function(){
})相当于原生DOM中的DOMContentloaded
jQuery的顶级对象$
$是jQuery的别称，代码中可以用jQuery代替
$也是jQuery中的顶级对象，相当于原生JavaScript中的window。将元素利用$包装为jQuery对象，就可以调用jQuery方法
jQuery对象和DOM对象
用原生JavaScript获取过来的对象就是DOM对象，jQuery方法获取的对象就是jQuery对象
jQuery对象的本质就是利用$符号对DOM对象进行包装后产生的对象，使用伪数组形式存储
DOM对象只能使用原生JavaScript中的方法，jQuery对象也只能使用jQuery方法
但jQuery对象和DOM对象可以相互转换
DOM对象转换为jQuery对象：$(DOM对象)，例如$('div')
jQuery对象转换为DOM对象，例如：$('div')[index] 或$('div').get(index) index为索引号
jQuery选择器
基本选择器
使用$('选择器')，里面直接写CSS选择器就可以了，但要加引号
隐式迭代
就是把匹配的所有元素内部进行遍历循环，执行相应的方法，不需要我们再次进行循环，从而简化我们的操作
jQuery中执行方法时，进行了隐式迭代
筛选选择器
jQuery筛选方法
parents()是获取对象的所有父级，以伪数组形式返回， parents(selector)可以获取对象的指定的父级
jQuery里的排他思想
当前元素设置样式，其余兄弟元素删除样式
可以使用siblings()方法查找除了自己之外的兄弟，并且去除其样式
链式编程
链式编程是为了节省代码量，使代码看起来更加优雅
可以将对一个jQuery对象执行的操作写在一行里面
$('.item').css('color','red');
$('.item').siblings().css('color','');
//链式编程
$('.item').css('color','red').siblings().css('color','');jQuery修改css样式
可以使用jQuery对象.css()
//参数只写属性名，则返回属性值
//返回div盒子的文字颜色
$('div').css('color');
//参数是属性名,属性值，则是设置一组样式，属性必须加引号，属性值如果是数字可以不加单位和引号
//div盒子的文字颜色设置为红色
$('div').css('color','red');
//参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$('div').css('color':'red','font-size':20);
//注意，如果是符合属性，例如background-color，必须使用驼峰命名法，例如backgroundColor
也可以通过设置类名修改css样式，注意jQuery中对原来的类名进行操作，不会直接覆盖原来的类名
//添加类名
$('div').addClass('current');
//移除类名
$('div').removeClass('current');
//切换类，如果没有这个类，就加上，如果有，就去掉
$('div').toggleClass('current');jQuery效果
显示与隐藏效果
显示
jQuery对象.show([speed],[easing],[fn])参数可以全部省略，表示无动画直接显示，一般来说不使用参数
speed参数：表示动画的速度，可以为slow、normal、fast，或表示动画时长的毫秒数值，无单位
easing参数：用来指定切换效果，默认是swing，也可以用参数linear
fn参数：回调函数，在动画完成时执行的函数，执行一次
隐藏
jQuery对象.hide([speed],[easing],[fn])参数意义和显示中的一样
切换
jQuery对象.toggle([speed],[easing],[fn])参数意义和显示中的一样 ，表示切换显示或隐藏状态，即如果原来显示，则隐藏，如果原来隐藏，则显示
滑动效果
下拉滑动
jQuery对象.slideDown([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
使jQuery对象从无到有显示出来，并且有一个下拉效果
上拉滑动
jQuery对象.slideUp([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
使jQuery对象从有到无隐藏，并且有一个上拉效果
切换滑动
jQuery对象.slideToggle([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
表示切换滑动，如果对象已经显示了，则上拉，如果对象已经被隐藏，则下拉。
动画队列及停止排队方法
动画或效果如果一旦触发就会执行，如果多次触发，就会造成多个动画或效果排队执行
可以使用stop()停止之前排队的动画，要写在动画前面
淡入淡出效果
淡入
jQuery对象.fadeIn([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
使jQuery对象从无到有显示出来，并且有一个淡淡显示的效果
淡出
jQuery对象.fadeOut([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
使jQuery对象从有到无隐藏，并且有一个淡淡隐藏的效果
切换
jQuery对象.fadeToggle([speed],[easing],[fn])参数可省略 ,参数意义和显示中的一样
如果对象已经显示了，则淡出，如果对象已经被隐藏，则淡入。
渐进方式调整到指定的不透明度
jQuery对象.fadeTo([speed],opacity,[easing],[fn])opacity：必须要写，0-1，表示不透明度
speed：必须要写，表示速度
自定义动画
jQuery对象.animate(params,[speed],[easing],[fn])params：想要修改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，复合属性采用驼峰命名法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
<style>
div{
width: 300px;
height: 300px;
background-color: #DB7093;
position: absolute;
}
</style>
</head>
<body>
<button>移动</button>
<div></div>
<script>
//绑定事件click
// 点击按钮，div盒子向右移动
$('button').click(function(){
$('div').animate({
left:500,
},500);
})
</script>
</body>
</html>jQuery的属性操作
设置或获取元素的固有属性
利用prop('属性名')获取，利用prop('属性名'，'属性值')设置固有属性
设置或获取元素的自定义属性
利用attr('属性名')获取，利用attr('属性名'，'属性值')设置固有属性
数据缓存
data()方法可以在制定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存储的数据就会清空
使用data('数据名','数据值')存数据，使用data('数据名')取数据
data()方法也可以用来读取H5设置的属性（以data-开头），只不过读取时属性名那里不需要加上data-
内容文本值
主要针对元素的内容和表单的值
获取或设置普通元素内容
使用html()获取普通元素内容，使用html（'修改后的内容'）设置元素内容
这里的内容包括元素内容中的标签
获取元素文本内容
只获取元素内容中的文本内容
使用text()获取普通元素内容，使用text（'修改后的内容'）修改，注意，修改后，原来元素内部的标签也会被替代
获取设置表单值
使用val()获取表单内容，使用val（'修改后的内容'）修改
jQuery元素操作
遍历元素
jQuery隐式迭代会对同一类元素进行同一操作
如果需要对同一类元素进行不同操作，则需要进行遍历
方法一：
//index是每个元素的索引号，domEle是每个DOM对象
$('div').each(function(index,domEle){
})遍历中，要操作jQuery对象时，使用$(domEle)
方法二：
//object是遍历的对象
//index是每个元素的索引，element是遍历对象
$.each(object,function(index,element){
})可用于遍历任何对象，主要用于数据处理，比如数组，对象
创建元素
用$符号将标签封装，例如：$('<li></li>')
添加元素
内部添加
目标jQuery对象.append('内容')，这里将添加内容放到原来的元素的子元素的最后面
目标jQuery对象.prepend('内容')，这里将添加内容放到原来的元素的子元素的最前面
外部添加
目标jQuery对象.after('内容')，这里将添加内容放到目标元素后面
目标jQuery对象.before('内容')，这里将添加内容放到目标元素前面
删除元素
目标jQuery对象.remove()，删除目标元素
目标jQuery对象.empty()，删除目标元素集合中的所有子元素
目标jQuery对象.html('''')，清除所有子元素，和empty一样
jQuery里的尺寸、位置操作
尺寸
如果没有参数，获取相应的值
如果设置了数字参数，则是修改相应值，数字不带单位
jQuery位置
offset（）
设置或获取元素相对于文档的偏移，返回的是一个对象，参数也是一个对象，对象里面有两个属性：top和left,可以使用offset().top/offset().left访问
position（）
获取元素相对于带有定位的父元素的偏移，返回的是一个对象，对象里面有两个属性：top和left
只能获取不能设置
scrollTop()/scrollLeft()
设置或获取元素被卷去的头部或左侧
一般使用$(document).scrollTop()返回网页被卷去的头部
示例：左侧导航栏
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.t{
height: 300px;
background-color: blueviolet;
}
.bd{
width: 600px;
background-color: #050505;
margin: 10px auto;
}
.bd:nth-child(2){
height: 400px;
background-color: #DB7093;
}
.bd:nth-child(3){
height: 600px;
background-color:#EEE8AA;
}
.bd:nth-child(4){
height: 500px;
background-color: aqua;
}
.bd:nth-child(5){
height: 700px;
background-color: antiquewhite;
}
.daohang{
position: fixed;
left: 0;
top: 150px;
width: 50px;
height: 105px;
display: none;
}
.daohang div{
background-color: #D3D3D3;
margin: 5px;
height: 20px;
line-height: 20px;
text-align: center;
}
.daohang .current{
background-color: red;
}
</style>
<script src="jQuery.js"></script>
<script src="scroll.js"></script>
</head>
<body>
<div class="t"></div>
<div class="bd">1</div>
<div class="bd">2</div>
<div class="bd">3</div>
<div class="bd">4</div>
<div class="daohang">
<div class="current">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>js文件：
$(function(){
// 判断页面滚动到bd盒子时，导航栏出现
var flag=true;
function daoscroll(){
if($(document).scrollTop()>=$('.bd:eq(0)').offset().top-30){
$('.daohang').css('display','block');
}else{
$('.daohang').css('display','none');
}
}
daoscroll();
// 页面滚动时，左边导航栏变化
daochange(-1);
function daochange(j){
$('.bd').each(function(index,domEle){
if($(document).scrollTop()>=$(domEle).offset().top-30){
if(j<=index){
j=index;
}
}
})
if(j!=-1){
$('.daohang div').eq(j).addClass('current').siblings().removeClass('current');
}
}
$(window).scroll(function(){
var j=-1;
daoscroll();
if(flag){
daochange(j)
}
})
// 点击导航栏，滚动，到达目标位置
$('.daohang div').each(function(index,domEle){
$(domEle).click(function(){
flag=false;
var i=index;
$(this).addClass('current').siblings().removeClass('current');
var h=$('.bd').eq(i).offset().top
$('body,html').stop().animate({
scrollTop:h
},function(){
flag=true;
})
})
})
})jQuery事件
事件注册
jQuery元素.事件(function(){})
事件处理
使用on()方法，在元素上绑定一个或多个事件的处理函数
jQuery元素.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型，如click、mouseover
selector：元素的子元素选择器
fn：回调函数
这样可以给多个事件绑定同一个处理函数
也可以给多个事件绑定不同的处理函数，使用对象的方式，见示例
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: #DB7093;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<div></div>
<script>
// 鼠标经过变红，离开变回粉色，点击变蓝
$('div').on({
mouseover:function(){
$(this).css('backgroundColor','red');
},
click:function(){
$(this).css('backgroundColor','blue');
},
mouseout:function(){
$(this).css('backgroundColor','pink');
},
})
</script>
</body>
</html>事件委托
可以使用on（）方法进行委托，即把原来加给子元素身上的事件绑定在父元素身上，在On（）方法的参数中加上select参数，为元素的子元素选择器，这样事件虽然是绑定在父元素上的，但在子元素上触发事件
动态元素绑定事件
on()方法也可以给动态创建的元素绑定事件
事件解绑
可以使用off()解绑事件
jQuery对象.off('事件名'，'子元素选择器')
如果参数为空，则解除该元素绑定的所有事件，也可以通过加上子元素选择器解绑事件委托
只能触发一次事件
one()，其用法与on（）基本一致
自动触发事件
可以使用jQuery元素.事件名()自动触发事件
也可以使用jQuery元素.trigger('事件名')
还可以使用jQuery元素.triggerHandler('事件名')，这种方法不会获得元素的默认行为
jQuery事件对象
与传统JS的事件对象基本一致
jQuery对象拷贝
如果想把某个对象拷贝（合并）给另一个对象使用，可以使用$.extend()
浅拷贝是把拷贝对象中的复杂数据类型的地址拷贝给目标对象，深拷贝是开辟一个新的内存空间存储拷贝对象中的复杂数据类型
jQuery多库并存
jQuery使用$符作为标示符，但有时候其他的js库也会使用$，为了让jQuery和其他js库不冲突，我们可以将$更换为jQuery。也可以使用 var test=$.noConflict()将标示符更换为我们自己设定的标识符test（也可以为别的名字）
jQuery插件
jQuery插件可以实现更加复杂的功能
常用网站：http://www.jq22.com/ http://www.htmleaf.com/
图片懒加载
图片懒加载就是使用延迟加载，当页面滑动到可视区域之后再显示图片，可以提高网页下载速度，也可以减轻服务器负载
可以使用插件实现
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
