jQuery第四次课

jQuery第四次课

jQuery对象 bind：
代码展示

 <div>
        <span>teach</span>
    </div>

<script type="text/javascript">
        $(function () {
            $("span").click(function () {
                $(this).css("font-size", "100px");
            })
            $("span").mouseover(function () {
                $(this).css("color", "red");
            })
            $("span").bind("click mouseover",function () {
                $(this).css("font-size", "100px");
            })
        })
    </script>

效果图展示：
触碰之前

触碰之后

阻止冒泡的几种：

e.cancelBubble = true;
e.preventDefault(）;
e.stopPropagation();
return false;

页面更换皮肤:

<script type="text/javascript">
	    $(function(){
		$("#skin li").click(function(){
			var CSS="styles/skin/"+$(this).attr("id")+".css";
			$("#cssfile").attr("href",CSS);
			$(this).addClass("selected").siblings().removeClass("selected");
		})
	})
</script>	

上下滑动:

<script type="text/javascript">
 $(function(){
$("div").slideUp(1000,function){
$(this). slideDown(1080);
	  })
	})
</script>	

上下整体滑动:

<script type="text/javascript">
   $(function(){
	     	$("#mud1 img").click(function(){
	     		var $this = $(this);
	     		$(".scrollNews").slideToggle(1000,function(){
	     			var img=$this.attr("src");
	     			console.log(img);
	     			if (img=="images/up.gif")
	     			    img="images/down.gif";
	     			else
	     			    img="images/up.gif"
	     			$this.attr("src",img)
	     		});
	     	})
	    })
</script>	

效果图：
没点按钮之前

按钮是向下↓指示
点完按钮

按钮是向上↑指示