jQuery简单介绍，选择器，样式操作，特效效果及链式调用，动画，相关尺寸设置与获取以及滚动事件

jQuery介绍

jQuery 是目前使用最广泛的 javascript 函数库。据统计，全世 界排名前 100 万的网站，有 46%使用 jQuery，远远超过其他库。微软 公司甚至把 jQuery 作为他们的官方库。
jQuery 的版本分为 1.x 系列和 2.x、3.x 系列，1.x 系列兼容低版 本的浏览器，2.x、3.x 系列放弃支持低版本浏览器，目前使用最多 的是 1.x 系列的。
jQuery 是一个函数库，一个 js 文件，页面用 script 标签引入这 个 js 文件就可以使用。

<script src="js/jquery-2.1.1.min.js"></script>

jQuery 选择器

jquery 选择器可以快速地选择元素，选择规则和 css 样式相同，使 用 length 属性判断是否选择成功。
1.$(document); 选择整个文档对象 ,
2.$('li'); 选择所有的 li 元素
3.$('#myId'); 选择 id 为 myId 的网页元素
4.$('.myClass'); 选择 class 为 myClass 的元素
5.$('input[name=first]'); 选择 name 属性等于 first 的 input 元素
6.$('#ul1 li span'); 选择 id 为为 ul1 元素下的所有 li 下的 span 元素
对选择集进行修饰过滤(类似 CSS 伪类)
1.$('#ul1 li:first'); 选择 id 为 ul1 元素下的第一个 li
2.$('#ul1 li:odd'); 选择 id 为 ul1 元素下的 li 的奇数行
3.$('#ul1 li:eq(2)'); 选择 id 为 ul1 元素下的第 3 个 li
4.$('#ul1 li:gt(2)'); 选择 id 为 ul1 元素下的前三个之后的 li
5.$('#myForm :input'); 选择表单中的 input 元素
6.$('div:visible'); 选择可见的 div 元素
对选择集进行函数过滤
1.$('div').has('p'); 选择包含 p 元素的 div 元素
2.$('div').not('.myClass'); 选择 class 不等于 myClass 的 div 元素
3.$('div').filter('.myClass'); 选择 class 等于 myClass 的 div 元素
4.$('div').first(); 选择第 1 个 div 元素
5.$('div').eq(5); 选择第 6 个 div 元素
选择集转移
1.$('div').prev('p'); 选择 div 元素前面的第一个 p 元素
2.$('div').next('p'); 选择 div 元素后面的第一个 p 元素
3.$('div').closest('form'); 选择离 div 最近的那个 form 父元素
4.$('div').parent(); 选择 div 的父元素
5.$('div').children(); 选择 div 的所有子元素
6.$('div').siblings(); 选择 div 的同级元素
7.$('div').find('.myClass'); 选择 div 内的 class 等于 myClass 的元素

jQuery 样式操作

操作行间样式

// 获取 div 的样式 
$("div").css("width"); 
$("div").css("color"); 
 
//设置 div 的样式 
$("div").css("width","30px"); 
$("div").css("height","30px"); 
$("div").css({fontSize:"30px",color:"red"}); 

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如： $(“div”).css(“width”)，获取的是第一个 div 的 width。

操作样式类名
1.$("#div1").addClass("divClass2"); 为 id 为 div1 的对象追加样式 divClass2 2.$("#div1").removeClass("divClass"); 移除 id 为 div1 的对象的 class 名为 divClass 的样式 3.$("#div1").removeClass("divClass divClass2"); 移除多个样式
4.$("#div1").toggleClass("anotherClass"); 重复切换 anotherClass 样式

jQuery 的特效效果及链式调用

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

jquery 对象的方法会在执行完后返回这个 jquery 对象，所有 jquery 对象的方 法可以连起来写
.children(‘ul’) 该元素下面的 ul 子元素
.slideDown(‘fast’) 高度从零变到实际高度来显示 ul 元素
.parent() 跳到 ul 的父元素，也就是 id 为 div1 的元素
.siblings() 跳到 div1 元素平级的所有兄弟元素
.children(‘ul’) 这些兄弟元素中的 ul 子元素
.slideUp(‘fast’); 高度实际高度变换到零来隐藏 ul 元素

jQuery 动画

通过 animate 方法可以设置元素某属性值上的动画，可以设置一个或多个属性 值，动画执行完成后会执行一个函数。

$('#div1').animate({ 
    width:300, 
    height:300 
},1000,swing,function(){ 
    alert('done!'); 
}); 

参数可以写成数字表达式：

$('#div1').animate({ 
    width:'+=100', 
    height:300 
},1000,swing,function(){ 
    alert('done!'); 
}); 

相关尺寸设置与获取以及滚动事件

获取和设置元素的尺寸

width() height() 获取元素 width 和 height
innerWidth() innerHeight() 包括 padding 的 width 和 height
outerWidth() outerHeight() 包括 padding 和 border 的 width 和 height
outerWidth(true) outerHeight(true) 包括 padding 和 border 以及 margin 的 width 和 height

获取可视区高度

$(window).height(); 

**获取页面高度 **

$(document).height(); 

** 获取页面滚动距离 **

$(document).scrollTop();   
$(document).scrollLeft(); 

**页面滚动事件 **

$(window).scroll(function(){   
    if($(document).scrollTop()>700){
					alert('oooo');
				}
       })