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 效果函数，包括滑动、淡入淡出和自定义动画。