1、首先介绍一下jquery
jquery是JS的一个库，使用广泛。开发中我们常用jquery库，而很少用原生的JS库
基本语法： $(selector).action()
美元符号用来定义jquery，selector表示添加的选择器对象，action定义对选中元素的操作
2、jquery选择器【selector】
这里的选择器等同于CSS选择器，用来选择 HTML 元素组或单个元素。基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
【注】实际开发中我们浏览分析其他网站的时候使用开发者工具选择页面中元素，然后右键-copy-copy selector即可获取对应元素的选择器
3、jQuery事件【进行的action操作】
常见事件
实际使用过程中事件名称即action函数的名称，通过jQuery我们可以方便、快速的定义用户触发时间后执行的操作。详细操作通过JS函数定义，将执行函数传给action函数
调用方法 如：$("p").click(function(){ $(this).hide();});
4、特殊效果
利用jQuery还可以进行一些特殊效果的 实现，比如说一些简单动画
隐藏【hide函数】 $("p").hide();
显示【show函数】 $("p").show();
toggle() 方法来切换 hide() 和 show() 方法。 $("p").toggle();
淡入已隐藏的元素【fadeIn】 $(selector).fadeIn(speed,callback);
淡出可见元素 【fadeOut】 $(selector).fadeOut(speed,callback);
在 fadeIn与 fadeOut方法之间进行切换【fadeToggle】 $(selector).fadeToggle(speed,callback);
{
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
}
渐变为给定的不透明度【fadeTo方法】 $(selector).fadeTo(speed,opacity,callback)
向下滑动元素【slideDown】 $("#panel").slideDown();
向上滑动元素【slideUp】 $("#panel").slideUp();
在 slideDown() 与 slideUp() 方法之间进行切换【slideToggle】 $("#panel").slideToggle();
动画【animate方法】 $(selector).animate({params},speed,callback);
用于在动画或效果完成前对它们进行停止【 stop方法】 $("#panel").stop();
【注】callback定义一个函数，在动画完成后调用
jQuery链，即把动作/方法链接在一起 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
5、jQuery操作HTML元素
text() - 设置或返回所选元素的文本内容，
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
【注】上述3个函数有参数传入即设置元素的值，若无参数传入默认返回元素的值。也可以传入一个回调函数
attr() - 用于设置、获取属性值。传入属性名称，当传入字典【属性名称和值组成的dict】时用于设置属性值
append() 方法在被选元素的结尾插入内容（仍然该元素的内部）
prepend() 方法在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素） 也可接受一个参数，允许您对被删元素进行过滤
empty() - 从被选元素中删除子元素
addClass() - 向被选元素添加一个或多个类 参数是类名
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性，若返回CSS样式传入CSS属性名称，若设置CSS，则传入CSS属性名称和值构成的字典
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）
6、jQuery遍历获取元素
水平遍历
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
向下遍历
children()
find()
向上遍历
parent()
parents()
parentsUntil()
过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素.
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
网友评论