1、基本语法
基础语法: $(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
方法:$(document).ready(function(){ // 开始写 jQuery 代码... });
简洁方式:$(function(){ // 开始写 jQuery 代码... });
2、选择器
jQuery 中所有选择器都以美元符号开头:$()
。
元素选择器:$("p")
#id 选择器:$("#test")
.class 选择器:$(".test")
更多:
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$(“p.intro”) | 选取 class 为 intro 的 <p> 元素 |
$(“p:first”) | 选取第一个 <p> 元素 |
$(“ul li:first”) | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$(“ul li:first-child”) | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 <a> 元素 |
$(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 <a> 元素 |
$(":button") | 选取所有 type=“button” 的 <input> 元素 和 <button> 元素 |
$(“tr:even”) | 选取偶数位置的 <tr> 元素 |
$(“tr:odd”) | 选取奇数位置的 <tr> 元素 |
3、常用的jQuery事件方法
$(document).ready()
方法允许我们在文档完全加载完后执行函数。
click()
方法是当按钮点击事件被触发时会调用一个函数。
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。
hover()
方法用于模拟光标悬停事件。
focus()
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
blur()
当元素失去焦点时,发生 blur 事件。
4、隐藏和显示效果
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle()
方法来切换 hide() 和 show() 方法。$(selector).toggle(speed,callback);
5、淡入淡出效果:四种方法
fadeIn()
用于淡入已隐藏的元素。$(selector).fadeIn(speed,callback);
fadeOut()
方法用于淡出可见元素。$(selector).fadeOut(speed,callback);
fadeToggle()
方法可以在fadeIn()
与fadeOut()
方法之间进行切换。
如果元素已淡出,则fadeToggle()
会向元素添加淡入效果。
如果元素已淡入,则fadeToggle()
会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
fadeTo()
方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
6、滑动效果
slideDown()
方法用于向下滑动元素。$(selector).slideDown(speed,callback);
slideUp()
方法用于向上滑动元素。$(selector).slideUp(speed,callback);
slideToggle()
方法可以在slideDown()
与slideUp()
方法之间进行切换。
如果元素向下滑动,则slideToggle()
可向上滑动它们。
如果元素向上滑动,则slideToggle()
可向下滑动它们。
$(selector).slideToggle(speed,callback);
7、动画
animate()
方法用于创建自定义动画。$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。可以操作多个属性。
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。
- 可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=。
- 使用预定义的值:可以把属性的动画值设置为 “show”、“hide” 或 “toggle”
- 使用队列功能:针对动画的队列功能
8、停止动画
stop()
方法用于停止动画或效果,在它们完成之前。$(selector).stop(stopAll,goToEnd);
适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
。可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
。默认地,stop() 会清除在被选元素上指定的当前动画。
9、Callback 方法
Callback 函数在当前动画 100% 完成之后执行。
10、链(Chaining)
在相同的元素上运行多条 jQuery 命令,一条接着另一条。
这样的话,浏览器就不必多次查找相同的元素。