无事来学学--JQuery详细讲解（中）#yyds干货盘点#
jQuery效果显示隐藏
● 显示show( , ] )
● 1、里面的参数均可省略，无动画直接显示(一般情况下都不加参数，因为这些动画太丑了)
● 2、speed。值可以是字符串(slow,normal,fast)，也可以是表示动画时长的毫秒数(如1000)
● 3、easing。用来指定切换效果，默认是swing(先慢，再快，后慢)，还可选linear(匀速的)
● 4、fn回调函数，在动画完成时执行的函数，每个函数执行一次
隐藏hide(,] )
● 参数同show
切换toggle(,] )
● 参数同show
● 元素切换：元素显示则隐藏，元素隐藏则显示
滑动
● 上拉滑动slideDown( , )
● 下拉滑动slideUp( , )
● 切换滑动slideToggle( , )
淡入淡出(透明度的慢慢变化)
● fadeIn(, )
● 参数同上
● fadeOut(, )
● fadeToggle(, )
● fadeTo(speed, opacity, , )
● 渐进的方式调整到指定的不透明度(参数opacity取值在0~1，speed和opacity不可省略)
自定义动画
● animate(params, , , )
● 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的位置
https://blog.51cto.com/u_15463696/4820521
页:
[1]