css方法

1. css()更改css样式的两种方法第一种用于修改单一属性

$(document).ready(function (){
      $("div").css("width","100px");
　　$("div").css("height","100px");
});

$(document).ready(function (){
$("div").css({
        width:"100px",
        height:"100px"}
);
});   

2. addClass()可以从css文件中引入所需要的样式，目的是可以动态更改样式

$(document).ready(function (){
$("div").addClass("style1");
});

3. removeClass移除样式，用法和addClass()相同

---

向下遍历

1. children()方法只向下遍历一级，只针对其子标签，其参数可选填，效果为边框变成红色

$(document).ready(function (){
$("#div1").children().css({border:"3px solid red"})
});

2. find()方法可以向下遍历指定修改任何标签，其参数为必选

$(document).ready(function (){
     $("#div1").find("p").css({border:"3px solid red"})
});

---

向上遍历

1. parent()只能向上遍历一级，改变其父级元素

$(document).ready(function (){
     $("a").parent().css({border:"3px solid red"});
});

2. parents()能向上遍历到所有元素

$(document).ready(function (){
$("a").parent().css({border:"3px solid red"});
});

3. parentsUntil()这个是遍历一个区间，从a标签到div1的区间

$(document).ready(function (){
$("a").parentsUntil("#div1").css({border:"3px solid red"});
});

同级遍历

1. sibings()修改同级的所有元素（自己除外），效果为除h4的所有同级标签边框全部变成红色

$(document).ready(function (){
$("h4").siblings().css({border:"3px solid red"});
});

2. next()修改同级的下一个元素的属性

$(document).ready(function (){
$("h4").next().css({border:"3px solid red"});
});

3. nextAll()修改自此之下的所有同级元素的属性

$(document).ready(function (){
$("h4").nextAll().css({border:"3px solid red"});
});

4. nextUntil()修改这个区间元素的属性（不包含设定区间的两个元素），只有h5变成了红色

$(document).ready(function (){
$("h4").nextUntil("h6").css({border:"3px solid red"});
});

5.prev()修改同级向下的一个元素的属性，与next（）效果相同，仅只有遍历方向改变

$(document).ready(function (){
$("h4").prev("h6").css({border:"3px solid red"});
});

6. preAll()
7. preUntil()

---

遍历的过滤

1. first()寻找同样元素的第一个

$(document).ready(function (){
$("div p").first().css("background-color","red");
});

2.last()寻找同样元素的最后一个

$(document).ready(function (){
$("div p").last().css("background-color","red");
});

3. eq()寻找相同元素的指定id，eq（0）等于first（）

$(document).ready(function (){
$("div p").eq(0).css("background-color","red");
});

4. filter()指定一个校准，若符合则返回，若不符合则不会改变效果

$(document).ready(function (){
$("div p").filter("p").css("background-color","red");
});

5. not()其效果与filter()相反

$(document).ready(function (){
$("div p").first().css("background-color","red");
});

---

菜单

先使用ul 和li标签做好建议菜单界面

1. 垂直菜单,点击菜单栏可以展开和收回详细菜单界面

$(document).ready(function (){
$(".main>a").click(function (){
var ulNode.$(this).next("ul");
ulNode.toggle();
});
});

ulNode.slideToggle();

2. 水平菜单,鼠标滑到菜单栏显示详细菜单界面，滑过之后消失

$(document).ready(function (){
$(".hmain").hover(function (){
$(this).children("ul").slideDown;
},function{
  $(this).children("ul").slideUp;
  })
});