无事来学学--JQuery详细讲解（中）#yyds干货盘点#

湛蓝之海

jQuery效果

显示隐藏
●   显示show( [speed,[easing],[fn] ] )

●   1、里面的参数均可省略，无动画直接显示(一般情况下都不加参数，因为这些动画太丑了)
●   2、speed。值可以是字符串(slow,normal,fast)，也可以是表示动画时长的毫秒数(如1000)
●   3、easing。用来指定切换效果，默认是swing(先慢，再快，后慢)，还可选linear(匀速的)
●   4、fn回调函数，在动画完成时执行的函数，每个函数执行一次

隐藏hide([speed,[easing],[fn]] )
●   参数同show
切换toggle([speed,[easing],[fn]] )
●   参数同show
●   元素切换：元素显示则隐藏，元素隐藏则显示

滑动

●   上拉滑动slideDown( [speed,[easing],[fn] )
●   下拉滑动slideUp( [speed,[easing],[fn] )
●   切换滑动slideToggle( [speed,[easing],[fn] )

淡入淡出(透明度的慢慢变化)

●   fadeIn([speed, [easing], [fn] )
●   参数同上
●   fadeOut([speed, [easing], [fn] )
●   fadeToggle([speed, [easing], [fn] )
●   fadeTo(speed, opacity, [easing], [fn] )

●   渐进的方式调整到指定的不透明度(参数opacity取值在0~1，speed和opacity不可省略)

自定义动画
●   animate(params, [speed], [easing], [fn] )
●   params ：想要更改的样式属性，以对象的形式传递。 属性名可以不带引号，复合属性要用驼峰命名法(该参数不可省略，其余参数可省)

鼠标经过、离开事件的复合写法-->事件切换hover
●   语法：$('选择器').hover(over, out);
●   over：鼠标移动到元素上要触发的函数(相当于mouseenter)
●   out：鼠标离开元素时要出发的函数(相当于mouseleave)
●   $(' 选择器').hover(fn);  如果只写一个函数，则鼠标经过和离开都会触发这个函数

jQuery 停止动画/效果排队stop
●   jQuery动画和效果队列：动画或者效果一旦触发就会执行。如果多次触发，就造成多个动画和效果排队执行
●   停止排队stop( )
●   stop( ) 方法用于停止动画或者效果
●   注意：stop( )写在动画或者效果的前面，相当于停止、结束上一次动画或者效果(上一次动画不执行了，只执行最新的一次，就能保证不论触发多少次，都执行一次动画或者效果)

4、jQuery属性操作

设置或者获取元素固有属性值
●   固有属性就是元素自带的属性，如<a>的href，<input>里面的type
●   获取固有属性-->$("选择器").prop("属性名")
●   设置属性--> $("选择器").prop("属性名", "属性值")

设置或者获取自定义的属性
●   用户自己给元素添加的属性，就是自定义属性，例如给元素添加index
●   获取属性--> $("选择器").attr("属性名")  (类似于原生js的getAttribute( ) )
●   (注：H5的自定义属性是以data-开头的)  返回值是字符串型

●   设置属性-->  $("选择器").attr("属性名","属性值")   (类似于原生js的setAttribute( ) )
●   数据缓存data.("属性名", "属性值")
●   可以通过这个方法将数据存储到元素的缓存中

●   输出andy
●   这个方法还可以获取H5的自定义属性
●   H5 的自定义属性是以data-开头的，如data-index
●   $(" 选择器").data("属性名")
●   区别于attr方法，data("属性名")在获取H5自定义属性时：1、可以不用加前缀data-；2、返回的结果是数字型
5、jQuery内容文本值
##  对普通元素内容的操作(相当于原生js的 innerHtml( ) )
●   获取元素内容(标签和内容都会获得)--> $(" 选择器").html( )
●   修改元素内容--> $(" 选择器").html("内容")

对普通元素文本内容的操作(相当于原生js的 innerText( ) )
●   获得元素的文本内容--> $(" 选择器").text( )
●   修改元素的文本内容--> $(" 选择器").text("内容")
●   对表单的文字属性的操作
●   获得表单的文字(value属性的值)-->$("选择器").val( )
●   设置表单元素的文字值--> $("选择器").val("值")
●   表单里面的文字是通过value属性设置的
6、jQuery元素操作

1-遍历元素
●   虽然jQuery有隐式迭代，但是隐式迭代是对同一类元素进行了同样的操作。如果要对同一类元素做不同的操作，那么就要用到遍历
●   语法1：$("选择器").each( function(index, domEle){ } )
●   1-- each( ) 方法遍历每一个匹配到的元素，主要用于DOM处理
●   2-- 回调函数的两个参数
●   index是当前遍历到的元素的索引号
●   domEle是当前遍历到的DOM对象(注意不是jQuery对象)
●   要使用jQuery的方法，就得把DOM对象转换成jQuery对象$(domEle)
●   语法2： $.each(obj, function(index, value){ })
●   1-- $.each( ) 方法可以遍历任何对象。主要用于数据处理，比如数组，对象
●   2-- obj是遍历的对象
●   3-- 回调函数的参数
●   index当前遍历的元素索引号
●   value是当前遍历到的元素内容

2- 创建元素
●   只需要将想要创建的元素标签用$包裹起来即可，如：var li = $("<li></li>");
##  3- 添加元素
内部添加

●   element.append(" 内容")  ，把内容添加到匹配元素的最后面，类似于原生js的appendChild
●   如：$("ul").append("li")  (注意这个li是上面创建元素的li)
●   element.prepend(" 内容")  ，把内容添加到匹配元素的最前面

外部添加

●   element.after(" 内容")  ， 把内容放入目标元素的后面
●   element.before(" 内容")  ， 把内容放到目标元素的前面

4- 删除元素
●   删除匹配的元素本身 --> element.remove( )
●   如：不想要ul了，则$("ul").remove( )
●   删除匹配的元素集合中所有的子节点 --> element.empty( )
●   清空匹配的元素内容(包含子节点，不包括本身) --> element.html("")
●   注意区别  $("选择器").html( );   这个是获取文本内容
7、jQuery尺寸

●   $(" 选择器").width( )/.height( ); 获得/设置匹配元素的width/height
●   若参数为空，则是获取相应值，返回的是数字型；若参数为数字，则为修改相应的数值 ( 参数可以不带单位 )；
●   $(" 选择器").innerWidth( )/.innerHeight( );  获得/设置元素的width/height + padding值
●   $(" 选择器").outerWidth( )/.outerHeight( );  获得/设置元素的width/height + padding + border 值
●   $(" 选择器").outerWidth(true)/.outerHeight(true);  获得/设置元素的width/height + padding + border + margin值

8、jQuery位置

●   $(" 选择器").offset( );  获取/设置匹配元素相当于文档的偏移坐标，跟父级没有关系
●   返回值是一个对象，里面包含了top 和 left值。要想得到其中一个属性可以通过对象调用--> $(" 选择器").offset( ).top
●   若要设置偏移坐标，也是通过对象的形式写入参数

●   $(" 选择器").position( );  获取匹配元素相对于带有定位的父级的偏移坐标，若父级无定位则以文档为准
●   注意：position方法只能获取数据，不能修改数据
●   $("选择器").scrollTop( ) /.scrollLeft( );  获取/设置匹配元素被滚动条卷去的距离(写参数即为设置)
$(document).scrollTop(100) 会在页面一加载的时候直接跳转到页面滚动了100px的位置