jQuery 實戰讀書筆記之第五章：使用 jQuery 操做頁面

時間  2019-11-19
標籤 jquery 實戰 讀書 筆記 第五 使用 頁面 欄目 JQuery 简体版
原文   原文鏈接

html 以下：css

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Move and Copy Lab Page - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <style>
         #source-pane img
         {
            margin-bottom: 1em;
         }

         .target
         {
            border: 1px solid maroon;
            background-color: #ffffcc;
            margin-bottom: 1em;
         }

         #controls div
         {
            margin-bottom: 0.5em;
         }

         button
         {
            margin-top: 10px;
         }

         #button-restore
         {
            display: none;
         }

         .done input[type=checkbox],
         .done #button-execute
         {
            display: none;
         }

         #button-restore
         {
            display: inline;
         }
      </style>
   </head>

   <body>

      <h1 class="header">jQuery Move and Copy Lab Page</h1>

      <div id="source-pane" class="box-small">
         <h2>Sources</h2>
         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source1.png" alt="source 1" />
         </div>

         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source2.png" alt="source 2" />
         </div>

         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source3.png" alt="source 3" />
         </div>
      </div>

      <div class="box-small">
         <h2>Target Areas</h2>

         <div>
            <div id="target-pane">
               <div id="target1" class="target">
                  <label><input type="checkbox" name="targets"/> Target 1</label>
               </div>

               <div id="target2" class="target">
                  <label><input type="checkbox" name="targets"/> Target 2</label>
               </div>

               <div id="target3" class="target">
                  <label><input type="checkbox" name="targets"/> Target 3</label>
               </div>

               <div>
                  <span>Operation:</span><br />
                  <label><input type="radio" name="operations" value="append" checked="checked"/> append</label>
                  <label><input type="radio" name="operations" value="prepend"/> prepend</label>
                  <label><input type="radio" name="operations" value="before"/> before</label>
                  <label><input type="radio" name="operations" value="after"/> after</label>
               </div>
               <div>
                  <span>Clone?:</span><br />
                  <label><input type="radio" name="clone" value="no" checked="checked"/> no</label>
                  <label><input type="radio" name="clone" value="yes"/> yes</label>
               </div>
            </div>

            <div>
               <button id="button-execute">Execute</button>
               <button id="button-restore">Restore</button>
               <button id="button-toggle">Toggle</button>
            </div>
         </div>
      </div>

      <div class="footer">
         <p>
            jQuery Selectors Lab Page - jQuery in Action, 3rd edition<br/>
            Code by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa
         </p>
      </div>

      <script src="../js/jquery-3.2.1.js"></script>
      <script src="js/changeStyle.js"></script>
   </body>
</html>

 

 

修改元素的樣式html

/*
樣式名的值是以空格分割多個值de字符串形式出現，而不是以 COM 屬性數組的形式，這給處理帶來了複雜性。
HTML5 引入了一個好的解決辦法，經過稱爲 classList （樣式列表）的 API 實現。
*/
 

/*
原生 js 使用 classList 增長樣式（兼容新的瀏覽器，IE 10以上，包括 IE 10。
*/
var elements = document.getElementsByClassName('box-small');

for(var i = 0; i < elements.length; i++){
    elements[i].classList.add('target');
}

/*
addClass(names)
爲集合中的元素添加指定的樣式名，兼容從 IE6 開始的瀏覽器

name(String|Function)：空格分割的多個樣式名字符串；若是是函數，調用函數的上下文是當前元素（this），
參數是元素索引和元素當前樣式值（全部用到的樣式名，用空格分割）
*/
$('img').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);  //元素當前樣式值（全部用到的樣式名，用空格分割）
    return 'target';   //返回值做爲樣式名
});

$('.box-small').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);
    return 'target';
});

/*
removeClass(names)
從 jQuery 集合中刪除每一個元素指定的樣式；若是是函數，調用函數的上下文是當前元素（this），參數是元素索引和要刪除的
樣式名（能夠是以空格分割的樣式名），返回值是要刪除的樣式名

names(String|Function)
*/
$('#target-pane > div').removeClass('target');

console.log('刪除 .box-small 中的樣式：')
$('.box-small').removeClass(function(index, styleName){
    console.log($(this));
    console.log(styleName);
    return 'box-small target';
});

/*
toggleClass([names][, switch])
爲沒有樣式的元素指定添加指定的樣式名，或者刪除已經存在的樣式

names(String|Function)
switch(Boolean)
若是設置 switch 參數，當 switch 爲 true 時，那麼樣式一般會添加樣式到沒有此樣式的元素上，若是爲false，從元素中刪除該樣式
若是無參調用，集合中全部樣式都會刪除或恢復
若是隻設置 switch 參數，集合中每一個元素的樣式名將根據 switch 的值保留會刪除
若是提供了函數，則返回值爲樣式名，參數接受兩個值：元素索引和元素樣式的值
*/
var switchValue = true;

$('#target-pane').addClass('target');
console.log('id 爲 target-pane 的 div 是否包含 target 樣式：' + $('#target-pane').hasClass('target'));

$('#button-toggle').click(function(){   

    $('img').toggleClass('target');
    switchValue = !switchValue;
    console.log(switchValue);
   $('#target-pane').toggleClass('target', switchValue);

    /*
    hasClass(name)
    肯定集合中的元素是否包含指定的樣式
    */
    console.log('id 爲 target-pane 的 div 是否包含 target 樣式：' + $('#target-pane').hasClass('target'));
});

/*
直接在元素上添加樣式代碼（DOM 元素的 style 屬性），能夠覆蓋預約的樣式（設置了 !important 的除外）
*/

/*
css(name, value)：CSS 屬性的名稱。接受兩種 CSS 和 DOM 的屬性（如 background-color 與 backgroundColor），通常使用第一種
css(properties)
爲每一個元素的 CSS 樣式設置指定的 value

name(String)
value(String|Number|Function)：若是是數字，轉換爲字符串在末尾加上「px」；若是是函數，接受兩個參數：元素索引和當前值，返回值
爲 CSS的新值
*/

/*
給按鈕增長 20px 寬度（若是設置長度和寬度沒有指定單位，那麼默認就是 px）
*/
$('#button-toggle').css('width', '+=20');

$('p').css({
    margin: '1em',
    color: '#1933FF',
    opacity: 0.8
});

$('button').css({
    margin: '1em',
    color: '#1933FF',
    opacity: function(index, currentValue){
        return 1 - ((index % 10 + 3) / 10);
    }

});

/*
css(name)
根據指定的 name 查詢集合中首個元素的 CSS 屬性的計算值

name(String|Array)
返回值爲字符串或屬性-值對
*/
var styles = $('#source-pane').css(['border', 'background-color']);
for(var property in styles){
    console.log(property　+　': ' + styles[property]);
}


/*
對於常常訪問的一些小的 css 集合，jQuery 提供了便捷的方法來訪問它們並返回值爲常見的數據類型
*/

/*
width(value)
height(value)
設置集合中每一個匹配元素的寬度和高度

value(Number|String|Function)：
 */

 /*
width()
height()
查詢 jQuery 對象的第一個元素的寬度和高度,單位爲像素
 */
var tmpWidth = $('#source-pane').width();
console.log('#source-pane 的寬度爲：' + tmpWidth);


/*
offset()
返回集合中第一個元素相對於文檔的座標，該對象（非 jQuery 對象）包含 left 和 top 屬性，以像素爲單位 
*/
console.log($('#button-toggle').offset());

/*
offset(coordinates)
設置集合中全部元素相對於文檔的當前座標，以像素爲單位 

coordinates(Object|Function)：包含 left 和 top 的對象
*/
setTimeout(function(){
    $('#button-toggle').offset({
        left: 0,
        top: 0
    })
}, 1000);

/*
position()
返回匹配集合元素中第一個元素的相對於父元素的位置（像素）
 */
console.log($('#button-toggle').position());

 /*
 注：offset() 和 position 只能用在可見元素上
 */

/*
scrollLeft()
scrollLeft(value)
scrollTop()
scrollTop(value)
*/
$('#button-restore').click(function(){
    console.log('document 滾動條的水平位置爲：' + $(document).scrollLeft());
    console.log('document 滾動條的垂直位置爲：' + $(document).scrollTop());

    //重回文檔頂部
    setTimeout(function(){
        $(document).scrollTop(0);
    }, 1000);
});

 

 

設置元素內容jquery

 

/*
樣式名的值是以空格分割多個值de字符串形式出現，而不是以 COM 屬性數組的形式，這給處理帶來了複雜性。
HTML5 引入了一個好的解決辦法，經過稱爲 classList （樣式列表）的 API 實現。
*/
 

/*
原生 js 使用 classList 增長樣式（兼容新的瀏覽器，IE 10以上，包括 IE 10。
*/
var elements = document. getElementsByClassName( 'box-small');

for( var i = 0; i < elements. length; i++){
elements[ i]. classList. add( 'target');
}

/*
addClass(names)
爲集合中的元素添加指定的樣式名，兼容從 IE6 開始的瀏覽器

name(String|Function)：空格分割的多個樣式名字符串；若是是函數，調用函數的上下文是當前元素（this），
參數是元素索引和元素當前樣式值（全部用到的樣式名，用空格分割）
*/
$( 'img'). addClass( function( index, styleValue){
console. log( this);
console. log( styleValue); //元素當前樣式值（全部用到的樣式名，用空格分割）
return 'target'; //返回值做爲樣式名
});

$( '.box-small'). addClass( function( index, styleValue){
console. log( this);
console. log( styleValue);
return 'target';
});

/*
removeClass(names)
從 jQuery 集合中刪除每一個元素指定的樣式；若是是函數，調用函數的上下文是當前元素（this），參數是元素索引和要刪除的
樣式名（能夠是以空格分割的樣式名），返回值是要刪除的樣式名

names(String|Function)
*/
$( '#target-pane > div'). removeClass( 'target');

console. log( '刪除 .box-small 中的樣式：')
$( '.box-small'). removeClass( function( index, styleName){
console. log( $( this));
console. log( styleName);
return 'box-small target';
});

/*
toggleClass([names][, switch])
爲沒有樣式的元素指定添加指定的樣式名，或者刪除已經存在的樣式

names(String|Function)
switch(Boolean)
若是設置 switch 參數，當 switch 爲 true 時，那麼樣式一般會添加樣式到沒有此樣式的元素上，若是爲false，從元素中刪除該樣式
若是無參調用，集合中全部樣式都會刪除或恢復
若是隻設置 switch 參數，集合中每一個元素的樣式名將根據 switch 的值保留會刪除
若是提供了函數，則返回值爲樣式名，參數接受兩個值：元素索引和元素樣式的值
*/
var switchValue = true;

$( '#target-pane'). addClass( 'target');
console. log( 'id 爲 target-pane 的 div 是否包含 target 樣式：' + $( '#target-pane'). hasClass( 'target'));

$( '#button-toggle'). click( function(){

$( 'img'). toggleClass( 'target');
switchValue = ! switchValue;
console. log( switchValue);
$( '#target-pane'). toggleClass( 'target', switchValue);

/*
hasClass(name)
肯定集合中的元素是否包含指定的樣式
*/
console. log( 'id 爲 target-pane 的 div 是否包含 target 樣式：' + $( '#target-pane'). hasClass( 'target'));
});

/*
直接在元素上添加樣式代碼（DOM 元素的 style 屬性），能夠覆蓋預約的樣式（設置了 !important 的除外）
*/

/*
css(name, value)：CSS 屬性的名稱。接受兩種 CSS 和 DOM 的屬性（如 background-color 與 backgroundColor），通常使用第一種
css(properties)
爲每一個元素的 CSS 樣式設置指定的 value

name(String)
value(String|Number|Function)：若是是數字，轉換爲字符串在末尾加上「px」；若是是函數，接受兩個參數：元素索引和當前值，返回值
爲 CSS的新值
*/

/*
給按鈕增長 20px 寬度（若是設置長度和寬度沒有指定單位，那麼默認就是 px）
*/
$( '#button-toggle'). css( 'width', '+=20');

$( 'p'). css({
margin: '1em',
color: '#1933FF',
opacity: 0.8
});

$( 'button'). css({
margin: '1em',
color: '#1933FF',
opacity : function( index, currentValue){
return 1 - (( index % 10 + 3) / 10);
}

});

/*
css(name)
根據指定的 name 查詢集合中首個元素的 CSS 屬性的計算值

name(String|Array)
返回值爲字符串或屬性-值對
*/
var styles = $( '#source-pane'). css([ 'border', 'background-color']);
for( var property in styles){
console. log( property　+　 ': ' + styles[ property]);
}


/*
對於常常訪問的一些小的 css 集合，jQuery 提供了便捷的方法來訪問它們並返回值爲常見的數據類型
*/

/*
width(value)
height(value)
設置集合中每一個匹配元素的寬度和高度

value(Number|String|Function)：
*/

/*
width()
height()
查詢 jQuery 對象的第一個元素的寬度和高度,單位爲像素
*/
var tmpWidth = $( '#source-pane'). width();
console. log( '#source-pane 的寬度爲：' + tmpWidth);


/*
offset()
返回集合中第一個元素相對於文檔的座標，該對象（非 jQuery 對象）包含 left 和 top 屬性，以像素爲單位
*/
console. log( $( '#button-toggle'). offset());

/*
offset(coordinates)
設置集合中全部元素相對於文檔的當前座標，以像素爲單位

coordinates(Object|Function)：包含 left 和 top 的對象
*/
setTimeout( function(){
$( '#button-toggle'). offset({
left: 0,
top: 0
})
}, 1000);

/*
position()
返回匹配集合元素中第一個元素的相對於父元素的位置（像素）
*/
console. log( $( '#button-toggle'). position());

/*
注：offset() 和 position 只能用在可見元素上
*/

/*
scrollLeft()
scrollLeft(value)
*/
console. log( 'restore button 滾動條的水平位置爲：' + $( '#button-restore'). scrollLeft());

/*
scrollTop()
scrollTop(value)
*/
console. log( 'restore button 滾動條的垂直位置爲：' + $( '#button-restore'). scrollTop());
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程