jQuery初级教程指南

jQuery对象转换为DOM对象:var s = $('xx').get(0) or $('xx')[0]
jQuery获取对象：
    1.$('xx').get(0)  jQuery('xx')
    2.$('xx')[0]
    3.方法：html(value),css(name,value),reset(),focus(),hide(),show()...
    4.基本选择器
        标签选择器$('span'),类选择器$('.name'),id选择器('#name')
        并集选择器$('div,span,..'),交集选择器$('div.title'),全局选择器$('*')
    5.层次选择器
        后代选择器$("#menu span"):选取#menu下的<span>元素
        子选择器$('#menu>span'):选取#menu的子元素span
        相邻选择器$('h2+dl'):选取紧邻<h2>元素之后的同辈元素<dl>
        同辈选择器$('h2~dl'):选取<h2>元素之后所有的同辈元素<dl>
    6.属性选择器
        属性名过滤、属性值过滤、多属性条件过滤
        $("[href]"):选取含有href属性的元素

        $("[href='#']"):选取href属性值为“#”的元素
        $("[href!='#']"):选取href属性值不为“#”的元素
        $("href^='en']"):选取href属性值以en开头的元素
        $("[href$='.jpg']"):选取href属性值以.jpg结尾的元素
        $("[href*='txt']"):选取href属性值中含有txt的元素

        $("li[id][title=新闻要点]"):选取含有id属性和title属性为新闻要点的<li>元素
    7.基本选择器
        $("li:first"):选取所有<li>元素中的第一个<li>元素
        $("li:last"):选取所有<li>元素中的最后一个<li>元素
        $("li:even"):选取索引是偶数的所有<li>元素
        $("li:odd"):选取索引是级数的所有<li>元素

        $("li:eq(1)"):选取索引等于1的<li>元素
        $("li:gt(1)"):选取索引大于1的<li>元素
        $("li:lt(1)"):选取索引小于1的<li>元素

        $("li:not(.three)"):选取class不是three的<li>元素
        $(":header"):选取网页中所有标题元素
        $(":focus"):选取当前获取焦点的元素
    8.可见性过滤器
        $(":visible"):选取所有可见的元素
        $(":hidden"):选取所有隐藏的元素
    9.转义：在敏感字符前面加“\\”

    10.jQuery事件：是对JavaScript事件的封装
        基础事件：window事件、鼠标事件、键盘事件、表单事件
        复合事件：鼠标光标悬停、鼠标连续点击
    鼠标事件：
        click():单击鼠标时，触发或将函数绑定到指定元素的click事件
        mouseover():鼠标移过时，触发或将函数绑定到指定元素的mouse over事件 $('#nav li').mouseover(函数);
        mouseout():鼠标移出时，触发或将函数绑定到指定元素的mouse out事件
    键盘事件：
        keydown():按下键盘时，触发或将函数绑定到指定元素的keydown事件 $('#password').keydown(function(e) {if(e.keyCode == "13") {alert("确认要提交么?");}});
        keyup():释放键盘时，触发或将函数绑定到指定元素的keyup事件
        keypress():产生可打印的字符时，触发或将函数绑定到指定元素的keypress事件
    表单事件：
        focus():获得焦点，触发或将函数绑定到指定元素的focus事件
        blur--模糊():失去焦点，触发或将函数绑定到指定元素的blur事件

    除了用事件名绑定事件外，还可以用bind()方法：
        $("input[name=event_1]").bind(事件类型,处理函数)
        $("input[name=event_1]").bind("click",function (){
            $("p").css("color","red");
        })
    绑定多个事件：
        $("input[name=event_1]").bind({
            mouseover:function(){
                $("ul").css("color","red");
            },
            mouseout:function(){
                $("ul").css("color","black");
            },.....
        })
    移除事件：
        unbind([type],[fn])
        [type]:事件类型，主要包括：blur,focus,click,mouseout等基础事件，还可以是自定义事件
        [fn]:处理函数，用来绑定的处理函数
        当unbind()不带参数时，表示移除所绑定的全部事件

    鼠标光标悬停事件：
        hover--徘徊():相当于mouseover和mouseout事件的组合
        $('#myaccound').hover(光标移入触发(){},光标移出触发(){});
        $('#myaccount').hover(
            function(){
                $('#menu_1').css('display','block');
            },
            function(){
                $('#menu_1').css('display','none');
            }
        );

    鼠标连续点击事件：
        toggle--切换():用于模拟鼠标连续click事件
        $('body').toggle(f1,f2,f3,...);
        toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
        $('li:gt(5):not(:last)').toggle(); 显示列表索引大于5但不是最后一个的li元素下面所有的li元素

    jQuery动画效果：
    1.控制元素显示与隐藏 show() , hide()
    $('.tipsbox').show('slow')
    显示的速度可以取如下值：毫秒、show、normal、fast
    2.淡入淡出效果 fadeIn() , fadeOut()
    $('input[name=fadein_btn]').click(
        function(){
            $('img').fadeIn('slow');
        }
    )
    显示的速度可以取如下值：毫秒、show、normal、fast
    3.改变元素高度 slideUp() , slideDown()    slide--滑动
    $('h2').click(
        function(){
            $('.txt').slideDown('slow');
        }
    )