[JavaScript知识库]jQuery基础

jQuery事件

1、单击事件

$("button").click(function(){
//动作触发后执行的代码!!
});

2、双击事件

$("button").dblclick(function(){
//动作触发后执行的代码!!
});

3、鼠标进入

$("#p1").mouseenter(function(){
alert('您的鼠标移到了id="p1"的元素上!');
});

4、鼠标离开

$("#p1").mouseleave(function(){
alert('您的鼠标移出了id="p1"的元素上!');
});

5、获取焦点

$("input").focus(function(){
alert('获取到了input的焦点');
});

6、失去焦点

$("input").blur(function(){
alert('获失去了input的焦点');
});

jQuerycss()方法

css()方法设置或返回被选元素的一个或多个样式属性。

1.返回CSS属性

语法：css("propertyname");

例如：

$("p").css("background-color");

2.设置CSS属性

语法：css("propertyname","value");

例如：

$("p").css("background-color","yellow");

3.设置多个CSS属性

语法：css({"propertyname":"value","propertyname":"value",...});

例如：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuerycss类

1. addClass()

向被选元素添加一个或多个类

例如：

.important{font-weight:bold;font-size:xx-large;}
.blue{color:blue;}
$("button").click(function(){
$("h1,p").addClass("blue");
$("div").addClass("important");
});

2. removeClass()

从被选元素删除一个或多个类

例如：

$("button").click(function(){$("h1,h2,p").removeClass("blue");});

3. toggleClass()

对被选元素进行添加/删除类的切换操作

例如：

$("button").click(function(){$("h1,h2,p").toggleClass("blue");});

4. eq()

方法返回带有被选元素的指定索引号的元素

用法：$(selector).eq(index)

5. index()

index()方法返回指定元素相对于其他同级元素的index位置。

用法：$(this).index()

6.not()

Not()方法返回指定元素之外的元素。

用法：$("input").not(".in1")

jQuery动画

1. jQuery隐藏显示

可以使用hide()和show()方法来隐藏和显示HTML元素。

也可以使用toggle()方法来切换hide()和show()方法。

例如：

$("button").click(function(){$("p").toggle();});

2. jQuery淡入淡出

fadeIn()用于淡入已隐藏的元素，fadeOut()方法用于淡出可见元素。

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

例如：

$("button").click(function(){("#div2").fadeToggle("fast");});

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

例如：

$("button").click(function(){$("#div1").fadeTo("slow",0.15);});

3. jQuery滑动

slideDown()方法用于向下滑动元素，slideUp()方法用于向上滑动元素。

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

例如：

$("#flip").click(function(){$("#panel").slideToggle();});

4.jQuery自定义动画

animate()方法用于创建自定义动画。可选的speed参数规定效果的时长。它可以取以
下值："slow"、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。

5. stop方法

jQuerystop()方法用于停止动画或效果，在它们完成之前，适用于所有jQuery效果函
数，包括滑动、淡入淡出和自定义动画。

$("#stop").click(function(){$("#panel").stop();});

6. 回调函数?

在当前动画100%完成之后执行。

例如：

$("button").click(function(){
  $("p").hide("slow",function(){
  alert("段落现在被隐藏了");
});});