1.jQuery实现下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">微博</a></li>
</ul>
</li>
</ul>
<script>
$(function(){
$(".nav>li").mouseover(function(){
$(this).children("ul").show(); //jquery的当前元素
});
//鼠标离开
$(".nav>li").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</body>
</html>
2.选择某个节点的兄弟节点:$("ol .item").siblings("li").css("color","red") //将ol下的类名为item的节点的所有li兄弟节点的样式进行设置(不包括item节点自己)。
3.选择当前元素之后的所有元素:nextAll, 选择当前元素之前的所有元素prevtAll
4.第二种方式根据索引选择节点:$("ul li").eq(2).css("color","red") //以前的方式$("ul li:eq(2)").css...
5.判断是否有某个类名:$("ul li").hasClass("current") //返回true或false的布尔值
6.排他思想:$(function(){
$("button").click(function(){ //隐式迭代
$(this).css("background","red");
$(this).siblings("button").css("background",""); //隐式迭代
})})
7.添加类:$(function(){
$("div").click(function(){
//当点击div时,添加类名current
$(this).addClass("current")
})
//当点击div时,删除类名current
$("div").click(function(){
$(this).removeClass("current")
})
//当点击div时,切换类名(如果有,就去掉,如果没有,就添加)
$("div").click(function(){
$(this).toggleClass("current")
})
})
8.类操作与className的区别:原生js中className会覆盖原来的类名,而jQuery不会。
$(".one").addClass("current") //在原先类名的基础上,追加类名,不影响以前的类名
$(".one").removeClass("current") //只删除current类,原来的one保留
9.jQuery效果:
显示隐藏:show() hide() toggle()
滑动:slideDown() slideUp() slideToggle()
淡入淡出:fadeIn() fadeOut() fadeToggle() fadeTo()
自定义动画:animate()
show([speed,[easing],[fn]])
speed:预定速度设置:slow,normal,fast
easing:指定切换效果,默认是swing
fn:回调函数,在动画完成时执行的函数
hide([speed,[easing],[fn]])
$("button").eq(1).click(function(){
$("div").hide("slow") //hide(1000,function(){
// alert(1)}) "fast" easing
})
toggle([speed,[easing],[fn]])
$("button").eq(2).click(function(){
$("div").toggle("slow") //toggle(1000,function(){
// alert(1)}) "fast" easing //一般情况下,都不需要加参数,直接显示隐藏
})