菜鸟学JQuery第五天----周五了，明天还要考普通话.......

感谢大家支持偶，偶一定更加努力学习滴。

哈哈  给大家一个段子

尊敬的起床困难户：

您此次起床共用了11分钟，您已击败了全国10%学生。

寝室还有一位同学起床失败，正在重起。隔壁宿舍全部死机！


哈哈

                   今天我要讲的是”  样式操作“

<body>
    <p class="myp">
        我就是你要操作的段落</p>
</body>

这个呢就是我们要操作的段落了

我们首先要引用那个JQUERY的JS文件，你懂的

    <style type="text/css">
        .myp
        {
            background: red;
        }
        .changeColor
        {
            background:green;
            }
    </style>

    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {

         $("p").attr("class", "changeColor");
         //对了一只没和大家说JQUERY里面的注释标记是"//"，呵呵
        });
         //然后$("p").attr("class", "changeColor");//设置样式表”css“
    
 </script>

思路都是相同的下面给大家几个其他的操作样式表的方法

追加样式addClass("myclass")(不影响其他样式)，

移除样式removeClass("myclass")，

上面的用法是相同的，但是代码我就不写了，大伙自己去实现楼，哈哈

然后，又要开始做几个例子了，首先第一个例子

大家都知道，现在你像，优酷，土豆，在线看视频有一个开关灯的效果，下面我们也实现一个简陋的开关灯效果，我主要就是讲解一下原理，希望大家给我一些更好的效果。

首先为了方便演示，先准备一张”美女图片“   哈哈，漂亮

哦了，你自己照图片去啊，我就不管了。

然后开始写代码喽。

<body>
    <input type="file" />
    <input type="text" value="我们关灯就点不到了" />
    <input type="button" value="我们关灯就点不到了" />
    <div id="shadowDiv" class="hidDiv">
    </div>
    <div id="divShow">
        <input id="btn" type="button" value="开/关灯" />
        <img id="imgShow" src="21.jpg" alt="我是前台的图片" />
    </div>
</body>

上面是HTML代码的主题部分，这个我想不是重点吧。

下面继续 

   <style type="text/css">
        .hidDiv
        {
            display: none;     //隐藏该DIV
        }
        .showDiv
        {
            display: block;    //显示DIV
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            border: 1px solid black;
            background-color: Gray;
            z-index: 2;
            filter: Alpha(Opacity=70);   //IE下面的透明效果
            opacity: 0.7;                //FF  GG下面的透明效果
        }
        #divShow
        {
            position: absolute;
            z-index: 3;   /*这个是层次，显示的这一层总在最上面，你可应设置成999,999都可以的，只要比上面的那个大就可以了*/
        }
    </style>

CSS主题部分 

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#btn").click(function() {
                if ($("#shadowDiv").attr("class") == "showDiv") {
                    $("#shadowDiv").attr("class", "hidDiv");
                }
                else
                    $("#shadowDiv").attr("class", "showDiv");
            });
            $("input").attr("tabindex", "-1");   //这个我想你最好你急弄清楚，很常用，我就不说了
        });
    </script>

这个就是最重要的JQ代码了，我上面已经用注释的办法给大家解释了，希望大家，做出更好的效果，

关灯前的效果

关灯之后的效果

posted @ 2011-05-13 15:12  KingDZ  阅读(2480)  评论(17)  编辑  收藏  举报