jQuery选择器、事件、节点、动画效果

一、选择器
  基本选择器：
    标签选择器：  $("h1").css()
    类选择器：  $(".c").css()
    id选择器：  $("#id").css()
    并集选择器：  $("h1,.c,#id").css()
    交集选择器：  $("li.c").css()
 
  层次选择器：
    后代选择器：  $("div li").css() " "
    子选择器：  $("dt>span").css() ">"
    相邻选择器：  $("#one>dt+dd").css() "+"
    同辈选择器：  $("#two>dt~dd").css() "~"

  属性选择器："[]"
    包含给定属性选择器：  $("a[target]").css()
    包含给定特定属性值选择器：  $("[href='http://www.baidu.com']").css()
    不包含给定特定属性值选择器：  $("[href!='http://www.baidu.com']").css()
    以给定特定属性值开头选择器：  $("[href^='www']").css()
    以给定特定属性值结尾选择器：  $("[href$='.jd']").css()
    包含特定属性值选择器：  $("[href*='http']").css()
    复合属性选择器：  $("a[href][title][target]").css()

  过滤选择器：":"
    选取偶数元素：  $("li:even").css()
    选取奇数元素：  $("li:odd").css()
    选取索引等于(i)的元素：  $("li:eq(1)").css()
    选取索引大于(i)的元素：  $("li:gt(1)").css()
    选取索引小于(i)的元素：  $("li:lt(1)").css()
    选择器反向选择元素：  $("li:not(.tee)").css()
    选取所有标题元素：  $("div>:header").css()
    选取获得焦点的元素：  $(":focus").css()


二、显示与隐藏
    $("h1").toggle(function(){
        $("#inner:hidden").show();//显示
    },function(){
        $("#inner:visible").hide();//隐藏
    })

 
三、鼠标事件
    $("#nav li").mouseover(function(){
        $(this).addClass("over");
    })

    $("#nav li").mouseout(function(){
        $(this).removeClass("over");
    })


四、键盘事件
    keydown():  按下键盘时，触发或将函数绑定到指定元素的keydown事件
    keyup():    释放键盘时，触发或将函数绑定到指定元素的keyup事件
    keypress(): 产生可打印的字符时，触发或将函数绑定到指定元素的keypress事件


五、表单事件
    focus()：  获得焦点，触发或将函数绑定到指定元素的focus事件
    blur()：   失去焦点，触发或将函数绑定到指定元素的blur事件


六、绑定事件
    bind()：  可以同时为多个事件绑定方法
        $("input[name=enevt_1]").bind({mouseover:function(){
            $("ul").css("display","none");
        },mouseout:function(){
            $("ul").css("display","block");
        }});


七、淡入淡出效果
    fadeIn()：可以通过改变元素的透明度实现淡入效果

        $("input[name=fadein_btn]").click(function(){
            $("img").fadeIn("slow"); //以较慢的速度淡入
        });

    fadeOut()：可以通过改变元素的透明度实现淡出效果

        $("input[name=fadeout_btn]").click(function(){
            $("img").fadeOut(1000); //以1000毫秒的速度淡出
        });


八、改变元素的高度
    slideDown()：  可以使元素逐步延伸展示
    slideUp()：    可以使元素逐步缩短直至隐藏
        $("h2").click(function(){
            $(".txt").slideUp("slow");
            $(".txt").slideDown("slow");
        })


九、插入子节点
    append(content)     $(A).append(B)：表示将B追加到A中  例如：$("ul").append($newNode1);
    appendTo(content)   $(A).append(B)：表示将A追加到B中  例如：$newNode1.appendTo("ul");
    prepend(content)    $(A).prepend(B)：表示将B前置到A中 例如：$("ul").prepend($newNode1);
    prependTo(content)  $(A).prepend(B)：表示将A前置到B中 例如：$newNode1.prependTo("ul");


十、插入同辈节点
    after(content)        $(A).after(B)：       表示将B插入到A之后  例如：$("ul").after($newNode1);
    insertAfter(content)  $(B).insertAfter(A)： 表示将A插入到B之后  例如：$newNode1.insertAfter("ul");
    before(content)       $(A).before(B)：      表示将B插入到A之前  例如：$("ul").before($newNode1);
    insertBefore(content) $(B).insertBefore(A)：表示将A插入到B之前  例如：$newNode1.insertbefore("ul");


十一、替换节点
    replaceWith()：替换某个节点
        $("ul li:eq(1)").replaceWith($newNode1);
    replaceAll()： 替换所有符合条件的节点
        $("ul li:eq(1)").replaceAll($newNode1);


十二、复制节点
    clone()：用于复制某个节点    $("ul li:eq(1)").clone(true).appendTo("ul");


十三、删除节点
    remove()：删除整个节点
    detach()：删除整个节点，保留元素的绑定事件、附加的数据
    empty()： 清空节点内容


十四、获取与设置节点属性
    attr()：用来获取与设置元素属性
        $newNode4.attr("alt");  //设置单个属性
        $("img").attr({width:"50",height:"100"});  //设置多个属性
    removeAttr()：用来删除元素的属性
        $newNode2.removeAttr("title");


十五、遍历子元素
    children()：可以用来获取元素的所有子元素
        $("body").children();
    parent()： 获取元素的父级元素
    parents()：获取元素的祖先元素
    next([expr])：用于获取紧邻匹配元素之后的元素
        $("li:eq(1)").next().css("background-color","#F06");
    prev([expr])：用于获取紧邻匹配元素之前的元素
        $("li:eq(1)").prev().css("background-color","#F06");
    siblings([expr])：用于获取位于匹配元素前面和后面的所有同辈元素
        $("li:eq(1)").siblings().css("background-color","#F06");
    

转载于:https://www.cnblogs.com/yilinzi/p/6429840.html