JQ基础

来源:互联网 发布:诲女知之乎诲的意思 编辑:程序博客网 时间:2024/06/06 14:14

选择器

使用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就是显示隐藏使用的时间,以毫秒为单位,也可以使用已经定义好了的slowfast等等,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);

4、动画

0 0