选择器
使用JQ最方便的就是选择一个元素,可以使用标签名、id、class等来选择一个元素。
JQ选择每个元素的时候都会有固定的格式:$()
,然后在括号里添加选择,例如id选择:$("#id1")
(选择id为id1的元素,注意id前面必须用#
),class选择:$(".class1")
(选择所有拥有class1的元素,注意这里必须有点号.
)和标签选择:$("p")
(选择所有p标签)。
这里你可能觉得很熟悉,没错这就和css语法一样,所以又可以成为css选择器,还有不一定非要用双引号,用单引号也是可以的。
常见事件
在HTML加载完成后再执行:
$(document).ready(function(){
// jQuery 代码...
});
鼠标事件
click()
选中所有的button元素,并设置其点击事件,点击后隐藏此元素:
$("button").click(function(){
$(this).hide();
});
dblclick()
这个也是点击事件,只不过是双击而已。双击隐藏此元素:
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
鼠标经过事件,当鼠标经过时弹出“hello world”:
$("#hello").mouseenter(function(){
alert("hello world!");
});
mouseleave()
鼠标离开事件,当鼠标离开时弹出“Bye!”:
$("#bye").mouseleave(function(){
alert("Bye!");
});
mousedown()
当鼠标移动到某个元素上并点击后触发事件
mouseup()
当鼠标在某个元素上松开后触发事件
hover()
鼠标悬停事件,当光标悬停在某个元素上触发事件
focus()
获得焦点时触发事件
blur()
失去焦点时触发事件
键盘事件
keypress
keydown
keyup
表单事件
submit
change
focus
blur
文档窗/口事件
load
resize
scroll
unload
一些简单特效
1、显示与隐藏
hide()
和 show()
是相反的两个事件,前者是隐藏,后者是显示。
它们的组合是toggle()
,这个事件意味着,当元素隐藏时触发此事件显示,当元素显示时触发此事件隐藏。简单说就是做隐藏显示的反操作。
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
speed就是显示隐藏使用的时间,以毫秒为单位,也可以使用已经定义好了的slow
和fast
等等,callback就是回调函数,也就是事件触发执行完成后要执行的指令。
2、淡入和淡出
和显示隐藏相似,只不过是通过改变透明度而已。
fadeIn()
淡入效果和fadeOut()
淡出效果,合起来就是fadeToggle()
,这个也和显示隐藏的toggle()
类似。
语法:
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
但是还有一个特别的fadeTo()
,这个是将元素的透明度改变至指定的值:
语法:$(selector).fadeTo(speed,opacity,callback);
这里也基本相似需要说明的是opacity
参数的值是你指定透明度的值。这个值介于0到1之间。
$("button").click(function(){
$("#div1").fadeTo("slow",0.1);
$("#div2").fadeTo("slow",0.3);
$("#div3").fadeTo("slow",0.5);
});
3、滑动效果
slideDown()
向下滑动和slideUp()
向上滑动合起来为slideToggle()
语法:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);