jQuery
jQuery 是一个 JavaScript 函数库,特点读写合一,链式结构
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
引入jQuery
使用jQuery时可以到jQuery官网http://jquery.com/download 下载js文件;然后在html中引入;
基础语法:$(selector).action()
常用选择器
所有选择器都要以: $()开头
eg:$(“p”) 表示在页面中选取所有的
元素
$("#test") id选择器,该id的标签会隐藏
$(".test") class选择器
$("*") 选取所有元素
$(“this”) 选取当前HTML元素
层级选择器:
$("#body div") 选择body下的所有div元素(儿子元素,孙子元素…)
$("#body>div")选择body下的儿子div元素
$("#two+next")选择tow下一个相邻元素(平级元素 同桌元素)
$("#one~div")选择兄弟元素
过滤选择器:
$(“li:first”) 第一个li
$(“li:last”) 最后一个li
$(“li:odd”) 下标为奇数的li
$(“li:even”) 下标为偶数的li
$(“li:eq(4)”) 下表为4的
$(“li:gt(2)”) 下标大于2的li
$(“li:lt(2)”) 下标小于2的li
$(“li:not(#runoob)”) 挑选出id=“runoob”以外的所有li
表单选择器:
$(":input") 匹配所有的标签的属性
$(":xxxx") 匹配对应的属性属性过滤器
jQuery效果
1.隐藏/显示
语法: ( s e l e c t o r ) . h i d e ( s p e e d , c a l l b a c k ) ; (selector).hide(speed,callback); (selector).hide(speed,callback); (selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
语法:$(selector).toggle(speed,callback);
使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。
2.淡入淡出
fadeIn( ) 淡入 语法:$(selector).fadeIn(speed,callback);
fadeOut( ) 淡出 语法:$(selector).fadeOut(speed,callback);
fadeToggle( ) 切换淡入淡出 语法:$(selector).fadeToggle(speed,callback);
fadeTo( ) 给定的不透明度(值介于 0 与 1 之间 语法:$(selector).fadeTo(speed,callback);
3.滑动
slideDown( ) 向下滑动元素 语法:$(selector).slideDown(speed,callback);
slideUp( ) 向上滑动元素 语法:$(selector).slideUp(speed,callback);
slideToggle( ) 切换向上向下滑动 语法:$(selector).slideToggle(speed,callback);
4.动画
animate( ) 方法用于创建自定义动画
语法:$(selector).animate({params},speed,callback);
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute! 5.stop( )
语法:$(selector).stop(stopAll,goToEnd);
stop( ) 方法用于停止动画或效果,在它们完成之前。
stop( ) 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。