用jquery写循环播放div -2

前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace"

在多个div轮播的状况下, 在父容器div下, 都设置成ul 或 ol其实都是能够的, 只是为了在写css代码的时候,为了便于引用

好区别, 因此把一种div写成ul, 另外一种写成ol.

关于布局的选择考虑 和position-float的选择?

在元素的div的布局上, 你能够有三种选择: 天然的文档流排列, position:absolute, 和float
这就要根据你的布局效果 动画的表现方式 以及 jquery在实现上是否方便, 来选择了.
好比: div轮播,

• 你选择天然流, 那么动画的路径和位置难以肯定,
• 你选择float, 因为float元素是浮动的, 可是多个float是依次排列的, 后面的元素要想跑到前面去,彷佛是不可能的,要被"卡住"
• 因此, 在实际的这种 轮播 动画 的应用中, 使用position:absolute绝对定位的是比较经常使用的, 由于: 一是各个元素之间相互不会发生 排版的干扰, 相互之间没有关系; 二是 jquery在控制动画的时候, 也比较方便, 直接控制css样式中的 left, top等属性就能够了.

dw自己不能算内置浏览器，只是代码和设计视图， 要看测试页面仍是在外部浏览器中查看。

只要出现了absolute定位， 随时都要考虑到随后的文档流被脱离了文档流的 div 所覆盖的问题。

div、p、span、li几乎全部的html容器中的内容， 老是从上向下， 从左向右的显示， 所以：

1. 容器中的内容，若是指定了容器的宽高大于其中的内容时, 内容不会自动的在 水平和垂直方向上居中的， 老是默认的 靠上靠左
2. 若是超出了div的容器范围，被隐藏的老是内容的右边、 下边。

边距的设置：

通常就以5px， 10px， 20px为梯度进行设置... 通常方块形状， 就设置成正方形， 即宽度和高度相等。

Dreamwaver有强大的" 应用源代码格式" , 但是, 只能应用两种代码格式: 一是html标签, 另外一个是css, 不能用于php代码格式,

但这对前端足够了.
DW 也有代码提示功能 ctrl+H, 能够针对js, jquery,php等的提示, 很强大.

要正确地 初始化 多个平行 对象的 初始状态?

• 首先定义 表现为 "当前的" 特殊的 不一样的那个对象所 添加/具备的类样式, 通常就用 .current, .focus
• 而后, 看初始状态时, 呈现给用户的是哪一个对象, 就让那个对象 具备 .current/focus等样式类.
• 其余对象的类样式的变化, 就要根据鼠标点击时的jquery脚本变化了.

一个很重要的问题: 写当前类 .current的时候, 样式表的优先级!!!

• 对同一个元素可使用多个css样式, 即css样式具备叠加性;
• 可是, 这就引入了一个 css样式的 "冲突性" 问题: 由于做用于同一个元素对象的多个css样式可能都规定了相同的css样式名可是他们的值却不相同, 那么这个时候, 该应用哪个css的样式呢? 这个就叫冲突, 也能够叫争夺, 竞争..
• 竞争方法就是:

==================================================================
1. 肯定三种选择器的权重: html标签的权重=1, 类class=10, id的权重=100
2. 统计每一个css样式选择器的权重, 分别把各种选择器的权重统计起来, 而后相加: 即把该样式选择器中的全部的标签的权重 + 全部的类的权重 + 全部的id的权重
3. 统计权重的时候, 不要管空格, 只要有一个(选择器), 就算一个, 就加一个
4. 权重高的css样式, 被优先使用
5. 权重相同的css样式选择器, 按照后面的样式 覆盖前面的样式来决定
==================================================================

6. 所以, 在写相似 div > ol > li 中的.current, .focus等样式时, 就不能只写一个 光光的 .current {....}, 这时,虽然当前的li确实能够用获得这个.current, 可是因为它的css权重更低, 因此跟前面.class ol li相冲突的样式就不起做用了!  这时,  要写成:    .class ol .current {....} 这样.current中的样式 跟 .class ol li中相冲突的样式才会被 优先使用!

7. 写轮播器的时候, 当前 "数字选择指示器" <ol> <li> 5 </li></ol> 的类 .current的具体 样式, 不能直接写到元素中, 要写成 .current样式class的 方式, 由于这个 .current 类样式要经过js 分别用到其他几个li元素上.

8. 因此, 这也是前面所说的, 写css样式的时候, 最好也要遵循 "层次性" 的道理. 不只仅只是层次清晰, 更重要的是, 能确保样式的可以获得 有效使用. 这种方法, 也能够用来 以"层次性" "层级选择器"  代替 写 额外的 class和id.

9. 在写层次的时候,  **对最后一级选择器, 一般只在" 标签选择器/类样式/id选择器"中, 只选择写同样就行了. 也就是说, 对class, id只写到它们的父元素那一级就行了, **不要写多: 

    /* 下面的css选择器的权重是: .all=10, ol=1 li=1, 因此总的权重是: 10+1+1=12 */
    .all ol li {
        float: left;
        border: 1px solid #ccc;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        margin-left:10px;
        cursor: pointer;
    }
    
    /* 下面的css选择器的权重是: .all=10, ol=1 .current=10, 因此总的权重是: 10+1+10= 21 */
    .all ol .current {
        font-weight: bold;
        font-size: 2em;
        color: red;
        width: 30px;
        height: 30px;
        border: 1px solid blue; // 这里的高度/宽度/边框就跟上面的相冲突了, 因为它的权重大,因此才能应用这个
        line-height: 30px;     // 不然, 若是只写 .current, 它的权重为10, 小于12, 就不能使li的盒子变大!
    }

10.  写.current时, 写到.all ol就能够了, 不要写成: .all ol li.current. 由于后一种方式的写法有两个问题:
一是 繁琐, 增长了无谓的冗余代码
二是, 容易出错, 这里li和.current之间还不能有空格, 不然就表示 祖先/子孙之间的包含关系, 很明显, li下没有.current的子元素了.

当两种li 盒子的高度不一样时, 要对它们的 margin 进行调整, 使他们的底线在同一水平线上,

就是要使他们的 margin-top(或者margin-bottom)的值要不一样:
.all ol li {
...
margin-top: 10px;
}
.all ol .current {
...
margin-top: 0;
}
// 两个都要设, 不能只设置其中一个.

在jqurey脚本中的 li 中, 各元素的 .current类的切换方法?

1. 能够用 li 的 attr方法, 也能够用 addClass/ removeClass方法来实现
2. 二者的区别是: attr只能用一种类, add/removeClass能够有多个类.
3. 实际上, attr上也能够应用其余不变的, 公用的类样式, 二者的效果基本上差很少.
4. 但一般仍是 用 attr方法来控制 .current类样式的添加和消除

jquery的事件

1. 为了与原生的javascript相区别, 全部的 jquery 事件都不用 on, 也不用 "驼峰"大小写
2. 合成事件 hover:

针对使用频繁的onmouseover,onmouseout，jQuery使用了 "合成事件" 的方法：
hover(enter,leave)方法//模拟光标悬停事件，光标移动到 元素上触发enter函数，移出元素时触发leave函数。

<script type="text/javascript">  

$(function(){  
    $("#source").hover(function(){  
        $("#pointer").text("移入光标");},function(){  
        $("#pointer").text("移出光标");});  
    })  

</script>

jquery对index的操做?

有三种方式:
get([index]); //返回的是dom元素/dom集合
:eq(index) :gt(index) :lt(index) // 经过选择器来操做 就有大于/小于/等于
eq(index) // 经过过滤器,就只有一种 : "等于".

jquery的组成:

• 核心
• 属性 (attr removeAttr/ addClass removeClas/ html text val)
• css (通用的css/ 特别拿出来的 位置position , 尺寸 height, innerHeight, outerHeight())
• 选择器
• 过滤筛选器
• ajax
• 效果动画
• 事件 等等

jquery的html text val方法?

1. 应用对象 html和text方法一般应用于 div p等标签, 而val一般只用在input select等表单元素上
2. 返回结果不一样:
   html返回的是整个 被包含 的标签
   text 返回的 只是 被包含的 文字/文本 内容
   val 返回的是input/select的value 属性值
3. 对选择器集合的操做结果不一样:
   html始终 返回匹配集合中 的 "第一个" 对象的 html标签
   val 也只返回第一个匹配元素的 val属性值 .
   text 会返回 全部集合中 全部匹配元素 的文字 "之和" . 有的换行有的不换行...

jquery的attr, css, add/removeClass

1. attr是操做元素的" 属性" , 固然能够用来设置元素的class类, 这个是经过更改 "class"这个属性来实现的, 它是一个覆盖过程. 重要的是, attr不只能够用来设置 class 类样式, 主要仍是设置其余属性, 如src, href等等

2. css是一种设置 "行内样式" 的方法, 更直接. 好比要直接操做元素的 某个style样式, 如width, height, z-index时,
   你不能用attr, 由于这个不是属性, 也不能用addClass等, 因此就只能用css!

3. addClass是增长/删除/切换类样式的方法, 它须要预先设置一个类. 这个主要是用于这个类是动态的增长/
   或删除, "(不会覆盖原来的已经设置的类)" 如常见的div ul 轮播

三种均可以, 看你的需求而定, 各有各的用途! 应该不会有混淆!

最重要的 z-index 如何动态修改?

在jquery中, 以此播放div时 , 与文字/数字 index对应的 div图片的 z-index要设为比其余 同级 div的要大, 可是它又不能是一个固定的数值, 由于下一次播放另外一张div时, 它的值也要变为最大, 可是, 不一样div的z-index是不能相同的, 因此这个最大的z-index 必须是动态的, 并且是递增的, 因此就用一个变量 z++来表示.

切换动画的前后动做方式?

通常就是 要求 ####你消失的时候是一会儿就不见了, 而出现的时候是逐渐出现的.

$uli.css('left', '+500px');
    $uli.stop(true,false).animate({'left': '0'},300);
    
    // css 和 animate的内部实现基本上是同样的, 区别只是一个是静态的css, 一个是动态的css变化.
    // 第一行的 div消失, 是直接使用的 静态css变化.
    // 第二行的 div出现, 是使用的 动态 animate css变化.

浮动致使的父容器高度塌陷指什么？为何会产生？有几种解决方法

当一个浮动元素的父容器未设置高度，其中元素浮动后, 会脱离文档流，使得父容器没法计算浮动元素的高度，致使父容器高度塌陷。
解决方法有：

1. 单独给父容器设置一个固定高度。

        2. 使父容器触发BFC,触发后浮动元素也会计算高度，从而撑开父容器高度。触发方法能够设置：float,overflow,inlink-block;display:table-cell等
        
        3. 在浮动元素后增长一个"为了布局而存在的" 空的div, 设置这个空的div的 css样式:  clear: both;

        4. 给父容器设置一个伪类
        div:after{
        content:"";
        display:block;
        clear:both;
        }

关于z-index的应用问题?

1. Z-index属性只能工做于那些被定义了position属性(而不论是定义的 relative仍是absolute. fixed)的元素中。这并足够的重视，尤为是对于那些新手。

2. z-index 只对　"同级"的 兄弟元素有效, 对于其 父级容器则无效: (每个定位元素都归属于一个stacking context, 也就是说, 它只在它所在的 "堆叠上下文"中有效, 在更高一级的 stacking context中无效! )
   这就要求:

   • 在书写z-index的时候, 只在同级元素之间写, 不要在父元素上写z-index

   • 子元素的z-index 并不会对父级的元素有效
     即: 假设 尽管子元素的z-index为100, 而它们的父容器的z-index为1,
     而跟他的父容器平级的 其余元素的z-index 为2, 那么 其余元素仍然在父容器及其全部的字元素的上面!

最后的完成代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pictures display</title>
<style type="text/css">
* {
    list-style:none;
}
.all {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 30px auto;
}
.all ul {
    position: relative;
    z-index: 1;
}
.all ul li {
    position: absolute;
}
.all ol {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
}
.all ol li {
    float: left;
    margin-left:10px;
    background-color: #666;  /* 像这种数字边框 都要求有 背景底色的*/
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    margin-top: 10px;
}
.all ol .current {
    font-weight: bold;
    font-size: 1.2em;
    color: red;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #F93;
    margin-top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
    var z=10;
    
    $('ol li').mouseover(function(){
        var  idx = $(this).index();
        var  $uli = $('ul li').eq(idx);
        
        $(this).attr('class', 'current');
        $(this).siblings().attr('class','');
        
        z++;
        
        $uli.css('z-index', z);
        
        $uli.css('left', '500px');
        $uli.animate({'left': '0'},500);
        
        
    });
});

</script>
</head>

<body>
<div class="all">
  <ul>
    <li><img src="img/red.jpg" width="500" height="300"/>1</li>
    <li><img src="img/orange.jpg" width="500" height="300" />2</li>
    <li><img src="img/green.jpg" width="500" height="300" />3</li>
    <li><img src="img/blue.jpg" width="500" height="300" />4</li>
    <li><img src="img/purple.jpg" width="500" height="300" />5</li>
  </ul>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="current">5</li>
  </ol>
</div>
</body>
</html>