jquery 选择器-事件

一、可见性选择器

$(function(){
    //给显示按钮添加单击事件
    $("[value='显示']").click(function(){
        //获取被隐藏的div
        $("div:hidden").show();
    });
    //给隐藏按钮添加单击事件
    $("[value='隐藏']").click(function(){
        //获取被隐藏的div
        $("div:visible").hide();
    })
})

二、基本过滤选择器

$(function(){
    //li:first  第一个li
    $("li:first").css();
    //li:last   最后一个li
    $("li:last").css();
    //li:eq(2)  下标为2的li
    $("li:eq(2)").css();
    //li:gt(2) 下标大于2的li
    $("li:gt(2)").css();
    //li:lt(2) 下标小于2的li
    $("li:lt(2)").css();
    //li:even  下标为偶数的li
    $("li:even").css();
    //li:odd  下标为奇数的li
    $("li:odd").css();
    //获取所有的标题  h1-h6
    $(":header").css("color","red");
})

三、基本选择器

$(function(){
   //全局选择器
    $("*").css("font-size","30px");
    //标签选择器
    $("p").css("color","blue");
    //id选择器：id赋值要求唯一
    $("#a").css("font-weight","bold");
    //class选择器：class属性赋值允许重复
    $(".b").css("font-style","italic");
    //并集选择器：或者关系
    $("#a,.b").css("background-color","yellow");
    //交集选择器：并且关系
    $("p#a").css("text-indent","2em");

});

四、层次选择器

$(function(){
   //后代选择器：后代关系或者父子关系  标识符是空格
    $("div li").css("list-style","none");
    //子选择器：必须是直接的父子关系   >
    $("ul>li").css("color","red");
    //相邻兄弟选择器：找和我挨着的后面的兄弟标签 +
    $("#er+li").css("background","black");
    //通用兄弟选择器：找我后面所有的兄弟标签  ~
    $("#er~li").css("font-size","40px");
});

五、属性选择器

$(function(){
    //[name]:包含name的属性的标签
    $("[name]").css("color","green");
    //[name="lh"]:name属性赋值lh
    $("[name='lh']").css("font-size","60px");
    //[name!="xh"]:name属性赋值不是xh
    $("[name!='xh']").css("background-color","yellow");
    //[name^="z"]:name属性赋值以z开头
    $("[name^='z']").css("font-family","楷体");
    //[name$="l"]:name属性赋值以l结尾
    $("[name$='l']").css("color","red");
    //[name*="h"]:name属性赋值包含h
    $("[name*='z']").css("font-style","italic");
})

六、键盘码

function keyUp(e){
    var currKey= 0,e=e||event;
    currKey= e.keyCode|| e.which|| e.charCode;
    alert(currKey);
}
document.οnkeyup=keyUp;

七、鼠标绑定和移除

$(function(){
    /*$("ul li").mouseover(function(){
        $(this).find("div").show();
        //$("li div").show();
    });
    $("ul li").mouseout(function(){
        $(this).find("div").hide();
    })*/
    /*
    * 1.绑定单个事件：$(选择器)。bind（"事件名称","处理函数"）
    * 2.绑定多个事件
    * $(选择器).bind({
    * 事件1：函数1，
    * 事件2：函数2，
    * })
    * */
    //bind:事件绑定  可以同时给某个标签绑定多个事件
    /*$("ul li").bind({
        mouseover:function(){$(this).find("div").show();},
        mouseout:function(){$(this).find("div").hide();},
        click:function(){alert("点击菜单无效")}
    })
    //移除所有特效
    $("ul li").unbind();*/
    //鼠标移入和移出的复合事件 hover（函数1，函数2）；
    //ps:鼠标移入自动执行函数1  鼠标移出自动执行函数2
    $("ul li").hover(
            function(){$(this).find("div").show();},
            function(){$(this).find("div").hide();}
    );
    //toggle:连续单击事件
    $("ul li").toggle(
            function(){$(this).css("background-color","red")},
            function(){$(this).css("background-color","yellow")},
            function(){$(this).css("background-color","blue")},
            function(){$(this).css("background-color","blue")}
    );
    //toggle():实现标签的显示和隐藏
   $("p").click(function(){
       //$("ul li").toggle()
       //使用toggleClass实现类样式
       $("ul li").toggleClass("a");
   })
})

八、控制显示和隐藏

$(function(){
    $("ul li").hover(
            function(){
                //show
                //$(this).find("div").show(500);
                //$(this).find("div").fadeIn(500);
                $(this).find("div").slideDown(500,function(){alert("元素显示完成")});
            },
            function(){
                //hide  fast:快速  slow:慢速
                //$(this).find("div").hide("fast");
                //$(this).find("div").fadeOut(500);
                $(this).find("div").slideUp(500);
            }
    )

})

九、鼠标事件

$(function(){
    /*//鼠标移入改变背景颜色
    $("ul li").mouseenter(function(){
        $(this).css("background","yellow");
    }).mouseout(function(){});
    //鼠标移出恢复背景颜色
    $("ul li").mouseout(function(){
        $(this).css("background","");
    })*/
//鼠标移过事件
/*$("ul").mouseover(function(){
    $(this).css("background-color","green");
});*/
//鼠标进入事件
$("ul").mouseenter(function(){
    $(this).css("background-color","yellow");
}).mouseout(function(){
        $(this).css("background-color","aqua");
    })
})