jQuery选择器和事件

jQuery选择器

 

(1)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"结尾的元素。

 

(3)jQuery CSS选择器

jQuery CSS 选择器可用于改变 HTML元素的 CSS属性。

 

$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

$("p.intro") 所有 class="intro" 的 <p> 元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div>元素中的所有 class="head"的元素

 

结论

由于 jQuery 是为处理HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

（1）把所有 jQuery 代码置于事件处理函数中

（2）把所有事件处理函数置于文档就绪事件处理器中

（3）把 jQuery 代码置于单独的.js 文件中

（4）如果存在名称冲突，则重命名 jQuery 库，使用noConflict() 的方法来解决该问题。

 

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

 

jQuery 隐藏/显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

 

jQuery toggle()

通过 jQuery，您可以使用toggle() 方法来切换hide() 和show() 方法。

显示被隐藏的元素，并隐藏已显示的元素。

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 

jQuery 淡入淡出

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade方法：

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

 

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

 

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

 

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn()与 fadeOut()方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

 

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

fadeTo() 方法中必需的 opacity参数将淡入淡出效果设置为给定的不透明度（值介于 0与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

 

jQuery 滑动

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()

slideUp()

slideToggle()

 

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

 

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

 

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown()与 slideUp()方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

附：以上内容参考W3CSchool中jQuery教程 “http://www.w3school.com.cn/jquery”