JQuery 一

jquery介绍

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

jquery文档加载完成再执行

• jquery的ready方法
• 将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
• 怎么使用ready方法
• 方法一：
• 
• 方法二：
• 

jquery选择器

• jquery用法思想一 
• 选择某个网页元素，然后对它进行某种操作，
• jquery选择器 
• jquery选择器可以快速地选择元素，选择规则和css样式选择规则相同（可使用所用的css选择器的规则），使用length属性判断是否选择成功，使用选择器返回的是一个jquery对象，用来执行jquery的函数来制作元素的样式和动画效果。
• jquery常用的选择器
• $('#myId')    id选择器
• $('.myClass')    类选择器
• $('li')    元素选择器
• $('#ul1 li span')    层级选择器
• $('#ul1 li span， li')    组选择器
• $('input[name="first"]')   属性选择器
• 当使用input标签的时候，$('input: XXX')   代表选择type为XXX的input标签
• 常用的对象
• \$(document)   代表整个文档对象 ，一般时候和$("html")相等
• \$(window)    代表整个浏览器的窗口的对象（视觉上包含$(document和滚动条)）
• 相当于js的window对象，window对象包含的方法：window.location.href = ...   ‘重新加载目标地址的页面’
• \$(this)    代表当前正在执行jquery事件，each循环，jquery动画，等函数的当前jquery对象（在jquery的方法中使用）
• $ 指jquery对象；
• this    代表当前正在执行事件，each循环，动画，等函数的当前js原生对象  （可以在jquery的方法和js的方法中使用）
•  对选择集进行过滤
• \$('div').has('p'); // 选择包含p元素的div元素
• \$('div').not('.myClass'); //选择class不等于myClass的div元素
• $('div').not(":first");     排出选择到的第一个元素
• $('div').eq(5); //选择第6个div元素
• 备注：返回值是进行过滤的jquery对象；
• 选择集转移
• $('#box').prev();    //选择id是box的元素前面紧挨的同辈元素
• $('#box').prevAll();    //选择id是box的元素之前所有的同辈元素
• 备注：有重复的元素会被过滤掉
• $('#box').next();    //选择id是box的元素后面紧挨的同辈元素
• $('#box').nextAll();    //选择id是box的元素后面所有的同辈元素
• 备注：有重复的元素会被过滤掉
• $('#box').parent();    //选择id是box的元素的父元素
• 备注：只是获取当前元素的上一层的父元素
• $('#box').children();    //选择id是box的元素的所有子元素
• 备注：只是获取当前元素的下一层的所有子元素
• $('#box').siblings();    //选择id是box的元素的同级其他元素
• $('#box').find('.myClass');    //选择id是box的元素内的class包含myClass的元素
• 备注：
• 返回值是进行选择集转移后的jquery对象；
• 选择转移的方法可以传递参数，参数接收任何形式的选择器，可以对选择转移后的结果进行筛选；
• 获取jquery对象的原生js对象
• $(".class").get(0)     返回第1个元素的原生js对象
• 判断是否选择到了元素 
• jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
• 需要注意：
• 选择器返回的是jquery对象
• 如果jquery对象获取不到元素，返回的是不null，返回的是一个length为0的jquery对象；

jquery样式操作-操作元素的css样式和类名

• jquery用法思想二 
• 同一个函数完成取值和赋值
• 操作元素行间样式
• 获取div的样式
• $("div").css("width");
• $("div").css("color");
• 特别注意 
• 选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
• 设置div的样式
• 一次对一个样式进行设置
• $("div").css("width","30px");
• $("div").css("height","30px");
• 一次对多个样式进行设置
• $("div").css({fontSize:"30px",color:"red"});
• 当对多个样式设置使，属性名称可以不用字符串符号；
• 备注：
• css也可以给body\html或者元素设置scrollTop属性，来控制滚动条的位置，来控制元素的滚动条位置
• 当用css来设置position的样式的时候，会先对其他的样式进行设置，然后在设置position，如果属性中没有top 和left等属性，位置相比之前不会进行改变；
• 操作元素类名
• $("#div1").addClass("divClass2")     //为id为div1的对象追加样式divClass2
• $("#div1").removeClass("divClass")     //移除id为div1的对象的class名为divClass的样式
• $("#div1").removeClass("divClass divClass2")     //移除多个样式（也可以同时添加多个类）
• $("#div1").toggleClass("anotherClass")     //重复切换anotherClass样式， 可以同时切换多个类，用空格隔开

绑定click事件

• 事件绑定、jquery动画、循环函数的this/$(this)对象
• 在js的事件和jquery的事件函数和jquery动画和循环等函数中有两个特殊的对象，this代表的是当前在执行事件函数的js原生对象，$(this)代表的是正在执行函数的jquery对象；
• 给元素绑定事件的方法：
• 使用jquery可以使用获取的元素jquery对象的对应的事件方法来实现元素的事件绑定（可以实现多个元素同时绑定事件），例如：使用鼠标点击监控事件，用click方法；
• 使用事件函数的示例：
• 
• 获取元素的索引值 （通常在事件中使用）
• jquery对象中元素的索引
• 有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
• 获取元素索引的方法-index
• var \$li = \$('.list li').eq(1);       获取结果集中第二个元素
• \$li.index();      获取对应的元素相对父级元素的索引，注意注意：不是$li对象中的元素顺序位置，是相对父元素的索引 ；

jquery动画

• 设置jquery动画的方法
• 通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数；实际上animate函数封装了js的定时器的功能，使元素的属性在一定时间内以一定的速度变化到目标的属性值，达到了实现动画的效果；
• 使用示例：
• 
• animate各参数的含义：
• 参数一：要改变的样式属性值，写成字典的形式
• 参数二：动画持续的时间，单位为毫秒，一般不写单位
• 参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
• 参数四：动画回调函数，动画完成后执行的匿名函数、也可以是函数名称；
• 备注：
• jquery动画不支持对元素的各种个颜色进行动画设置，如果想要对颜色进行动画的设置，需要导入一个jquery.animate-colors-min.js  的库；
• animate也可以给body\html或者元素设置scrollTop属性，来控制滚动条的位置，来控制元素的滚动条位置

jquery的特殊效果

• jquery封装的一些特殊效果函数
• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 切换淡入淡出
• 备注：fade是通过不断改变盒子模型的透明度，最终改变display的值来实现控制消失和显示的过程的；
• hide() 隐藏元素
• show() 显示元素
• toggle() 切换元素的可见状态
• 备注：是通过不断改变盒子模型的尺寸大小（包括width、height、margin、border）来使盒子模型最终消失和显示的；
• slideDown() 向下展开
• slideUp() 向上卷起
• slideToggle() 依次展开或卷起某个元素
• 备注：是通过不断改变盒子模型的垂直尺寸大小（height、margin-y、border-y）等来使盒子模型卷起和展开；
• 函数包含的参数
• 参数一：动画持续的时间，单位为毫秒，一般不写单位
• 参数二：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
• 参数三：动画回调函数，动画完成后执行的匿名函数
• 解决多次重复触发事件，动画反复执行的问题：stop方法
• 现象：
• 当对一个对象同时触发多个动画方法的时候，会导致对象依次执行完所有动画，这些触发的方法可能是用户误操作，所以一般情况下，只需要执行最后一次即可
• 解决方法：
• $("#id").stop()  会停止对象当前的所有的动画和效果；
• 示例
• $("#id").stop().toggle()   再启动动画效果
  

jquery的链式调用

• jquery对象的方法（一般为：样式操作/事件/动画/特效/循环等函数）的返回值一般为jquery对象本身，所以在进行样式操作的时候可以使用链式调用；
• 例子：$（div）.eq($(this).index()).addClass("current").siblings().removeClass("current");