JQuery_1
jQuery 是一个 JavaScript 函数库
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
一、引入jQuery:
可以到jQuery官网http://jquery.com/download 下载js文件;然后在html中引入;
jQuery语法:
$(selector).action( )
$美元符号定义 jQuery选择符
(selector)“查询”和“查找” HTML 元素
jQuery 的 action( ) 执行对元素的操作
示例:
$(this).hide( ) - 隐藏当前元素
$("p").hide( ) - 隐藏所有段落
$(".test").hide( ) - 隐藏所有 class="test" 的所有元素
$("#test").hide( ) - 隐藏所有 id="test" 的元素
jQuery 元素选择器:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器:
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery 事件:
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
二、jQuery 效果:
1.隐藏/显示
语法:$(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 效果函数,包括滑动、淡入淡出和自定义动画。