基础语法

 

 

 $(document).ready(function(){

jqu代码}）；

简写   $(function(){

jqu代码}）

$就是一个函数

基本选择器

ID选择器获取指定ID的元素
$(“#id”);

$(“.class”);获取同一类class的元素

$(“div”);获取同一类标签的所有元素

使用逗号分隔，只要符合条件之一
$(“div,p,li”);

$(“div.redClass”);注意选择器1和选择器2之间没有
空格，class为redClass的div元素，
注意区分后代选择器

层级选择器

$(“ul>li”);

使用>号，获取儿子层级的元素，
注意，并不会获取孙子层级的元素

$(“ul li”);

使用空格，代表后代选择器，获取
ul下的所有li元素，包括孙子等

过滤选择器

：eq（index）

$(“li:eq(2)”).css(“color”,”red”);

获取到的li元素中，选择索引
号为2的元素，索引号index
从0开始。

:odd

$(“li:odd”).css(“color”,”red”)

获取到的li元素中，选择索引
;号为奇数的元素

:even

$(“li:even”).css(“color”,”red”);

获取到的li元素中，选择索引
号为偶数的元素

筛选选择器（方法）

$(“ul”).children(“li”)

相当于子类选择器

$(“ul”).find(“li”)

向当于后代选择器

$(“#first”).siblings(“li”);

查找兄弟节点

$(“#first”).parent();

查找父亲

$(“li”).eq(2);

相当于$(“li:eq(2)”),index从0开始

$(“li”).next()

找下一个兄弟

$(“li”).prev()

找上一个兄弟

$(“li”).index()

获得当前位置索引

$("p").not(".intro"）

返回不带有类名"intro"的所有<p>元素

jQuery事件

单击，双击，鼠标进入，鼠标离开，获取焦点，失去焦点

例子

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

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

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

jQuerycss()方法

 

例子

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

返回css属性

 

 

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

设置css属性（background-color还可以驼峰命名法）

 

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

传入一个对象设置多个属性值

 

jQuerycss类

addClass()

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

例子

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

 

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

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

 

 

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

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

eq()
方法返回带有被选元素的指定索引号的元素，索引号从0开头，所以第一个元素的索
引号是0（不是1）。

例子
$(selector 选择器).eq(index)

 

index()

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

例子
$("li").click(function(){
alert($(this).index());
});

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

例子
$("input").not(".in1")

jQuery动画

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

例子
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

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

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

 

jQuery淡入淡出

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

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeOut(3000);
});

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

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

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

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

jQuery滑动

slideDown()方法用于向下滑动元素，slideUp()方法用于向上滑动元素。
$("#flip").click(function(){$("#div1").slideDown();$("#div1").slideUp();});
slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。
$("#flip").click(function(){$("#panel").slideToggle();});

jQuery自定义动画
animate()方法用于创建自定义动画。、

参数（对象，时间，回调函数完成后执行）

例子
$("button").click(function(){
$("div").animate({
left:'250px',opacity:'0.5',height:'150px',width:'150px'
});});

stop方法
jQuerystop()方法用于停止动画或效果，在它们完成之前，适用于所有jQuery效果函
数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){$("#panel").stop();});