用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>