JQuery总结

<script type="text/javascript" src="<%=basePath %>script/jquery-1.7.2.min.js"></script>
改变jQuery的变量$
var jq=$.noConflict();
$(document).ready(function(){//为了防止在文档没有完全加载之前运行jquery，以免出现jQuery功能失效
    var b=$("h1").html("dd").html();    /* 赋值取值 */
    var a=$("h1").html();                //取值
    var dyh=$("#dyh").html();            //id选择器

    $(".color").each(function (){            //循环遍历
        alert($(this).html());
        
    })  

    $(".color").css({color:"blue"});
     $("p").hover(function() {            //鼠标放在上面消失
        $(this).hide()
        
    });
    
    $("p").click(function(){            //点击消失
        $(this).show()
    });

    
    $("h1").click(function(){
        $("p").toggle();            //单击事件，切换！
    })
    
    $("h1").click(function(){
        $("p").hide(1000)            //添加隐藏的速度，毫秒计算
    })
    
     $("h1").dblclick(function(){
        $("p").show(1000)            //添加双击事件，毫秒计
        
    })
    
    $("h1").click(function(){            //淡入 fadeIn(speed)；
        $("#dyh").fadeIn();
        $("#c1").fadeIn("slow");
        $("#c2").fadeIn(1000);
        $("#c3").fadeIn(3000);
        
    })
    
     $("h1").dblclick(function(){            //淡出
        $("#dyh").fadeOut();
        $("#c1").fadeOut("slow");
        $("#c2").fadeOut(1000);
        $("#c3").fadeOut(2000);
    })
    
    $("h1").click(function(){            //如果淡入，toggle自动添加淡出方法，反之亦然，是上面两种的结合
        $("#dyh").fadeToggle();
        $("#c1").fadeToggle("slow");
        $("#c2").fadeToggle(1000);
        $("#c3").fadeToggle(2000);
    })
    
     
    $("h1").click(function(){            //淡出，使画面变得班半透明
        $("#dyh").fadeTo("slow",0.2);
        $("#c1").fadeTo("slow",0.5);
        $("#c2").fadeTo("slow",0.7);
        $("#c3").fadeTo("slow",0.9);
    })
    
})




$(document).ready(function(){
    //绑定事件，可以为此添加多个事件
    $("h1").bind({
        click:function(){
            $("p").slideToggle();
        },
        mouseover:function(){
            $("body").css("background-color","red");
        },
        mouseout:function(){
            $("body").css("background-color","#FFFFFF");
        }
    })
    
    
    
     //focus 获得焦点，blur失去焦点时触发的事件
    
     $("input").focus(function(){
        $("input").css("background-color","red");
    })
    $("input").blur(function(){
        $("input").css("background-color","blue");
    })
    
    
     //change事件，仅适用于数值改变触发事件
     $(".filed").change(function(){
        
        $(this).css("background","red");
    })
    
    
    
     //滑动，也可以设置速度参数
     $("h1").click(function(){//收
         $("p").slideUp(1000);
        
     })
    
      $("h1").click(function(){//出
         $("p").slideDown(1000);
        
     })
     //自动添加收 出，是上面两个的集成
      $("h1").click(function(){
         $("p").slideToggle(1000);
        
     })
    
})



//动画

 $(document).ready(function(){
     $("h3").click(function(){
        $("div").animate({left:'250px'});
        
        
    })  
    
    //队列动画
    
     $("h3").click(function(){
        var div=$("div");
        div.animate({height:'300px',opacity:'0.8'},2000);
        div.animate({width:'300px',opacity:'0.4'},2000);
        div.animate({height:'100px',opacity:'0.8'},2000);
        div.animate({width:'100px',opacity:'0.9'},2000);
        })
        
        //移动动画，增加字体大小
        
    $("h3").click(function(){
        var div=$("div");
        div.animate({left:'250px',height:'300px',width:'300px',opacity:'0.4'});
        div.animate({fontSize:'3em'});
        
    })


        //停止效果
    $("h3").dblclick(function(){
        $("div").stop();
    })

})



//jQuery的DOM操作，text()返回文本内容，html()返回文本内容，连同标记也返回。val()得到表单字段的值

$(document).ready(function(){
    $("#btn1").click(function(){
        alert("text:"+$("#text").text());
    })

    $("#btn2").click(function(){
        alert("html:"+$("#text").html());
    })

    $("#btn3").click(function(){
        alert("input:"+$(".filed").val());
    })



    
    //设置文本的值
    $("#btn1").click(function(){
        $("#text1").text("hello");
        
    })
    $("#btn2").click(function(){
        $("#text2").html("<h1>zziazzia</h1>")
    })
    $("#btn3").click(function(){
        $("#input").val("this is nothing!");
    })

//添加元素  prepend在被选元素开头添加，append 在被选元素结尾添加 befor在被选元素之前添加    after 在被选元素之后添加
    $("#btn1").click(function(){
        $("#text1").prepend("<input type='text'/>")
        $("#text1").after("<input type='button'  value='button'/>")
    })
    $("#btn2").click(function(){
        $("#text2").append("zziaaziziweiriweriuwehajh")
        $("#input").before("zziazziazzia")
    })

//删除元素，remove全部移除 ,empty 清空选中元素内的东西
    $("#btn1").click(function(){
        $("#img").remove();
        $("#img").empty();
        $("#img").remove(".color");//删除里面class=“color”的内容
    })
    
    
    
})





jQuery遍历：

1，向上遍历DOM树，parent()返回被选中元素的直接父元素，
2，parents()方法返回被选中元素的所有祖先元素
3，parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素