前端開發之jQuery位置屬性和篩選方法

時間 2020-05-07

標籤前端開發 jquery 位置屬性篩選方法欄目 JQuery 简体版

原文原文鏈接

主要內容：javascript

　　一、jQuery的位置屬性及實例css

　　　　（1）位置屬性html

　　　　（2）實例 --- 仿淘寶導航欄java

　　二、jQuery的篩選方法及實例jquery

　　　　（1）篩選方法spring

　　　　（2）實例一：嵌套選項卡瀏覽器

　　　　（3）實例二：小米官網滑動ide

　　　　（4）實例三：焦點輪播圖動畫

　　　　（5）實例四：動態實現輪播圖this

1、jQuery的位置屬性及實例

　　一、位置屬性

　　　　HTML部分　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的位置屬性</title>
    <style type="text/css"> *{ padding:0; margin:0;
        } #box{ position:relative; width:300px; height:200px; border:1px solid darkorange; padding:10px 5px;
        } p{ position:absolute; left: 50px; top:50px;
        } .box2{ width:200px; height:200px; margin:100px auto; border:1px solid mediumspringgreen;
        }
    </style>
</head>
<body style="height:2000px;width:2000px">
    <div id="box">
        <p>我是一個小小段落</p>
    </div>
    <button id="btn">動畫</button>
    <div class="box2"></div>
</body>
<!-- 此處爲jquery代碼 -->
</html>

View Code

　　　　jQuery部分

<script type="text/javascript"> $(document).ready(function(){ // 一、獲取匹配元素的相對父元素的偏移 position
 console.log($("p").position().left); // 50
 console.log($("p").position().top); // 50
       
      var offsetTop = $("p").position().top + 50 +"px"; var offsetLeft = $("p").positon().left + 30 + "px"; $("#btn").click(function(){ $("p").animate({top:offsetTop,left:offsetLeft},1000); }) // 二、獲取匹配元素，相對滾動條捲起的位置信息 scrollTop scrollLeft
 $(document).scroll(function(){ console.log("滾動條向右:"+$(document).scrollLeft()); console.log("滾動條向下:"+$(document).scrollTop()); }); // 三、offset 獲取匹配元素在當前視圖的相對偏移（瀏覽器）
 console.log($('#box').offset()); //{top: 0, left: 0}
 console.log($('#box').offset().top); console.log($('#box').offset().left); console.log($('#btn').offset().top); // 四、獲取元素的寬高
 console.log("寬"+$("#box").width()); // 300
 console.log("高"+$("#box").height()); // 200
        
        // 五、設置寬高
 $("#box").width(600); // 六、獲取內部寬度和外部寬度
             // innerWidth:width + 2*padding 不包括邊框，獲取匹配元素的內部寬度
 console.log("內部寬度："+$("#box").innerWidth()); // 610
            // outerWidth:width + 2*padding+2*boder 獲取的匹配元素的外部寬度
 console.log("外部寬度::"); }) </script>

　　二、實例　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> *{ padding: 0; margin: 0;
            } div{ width: 100%;
            } div img{ width: 100%;
            } .nav{display: none;}
        </style>
    </head>
    <body>
        <div class="top">
            <img src="./img/top.jpg" alt="" />
        </div>
        <div class="nav">
            <img src="./img/nav.jpg"/>
        </div>
        <div class= 'taobao'>
            <img src="./img/taobao1.png"/>
        </div>

        <script src="../jquery-3.2.1.min.js"></script>
        <script type="text/javascript"> $(function(){ var h = $('.top').height(); $(document).scroll(function(){ var scrolltop = $(document).scrollTop(); if(scrolltop>h){ $('.nav').css({display:'block',position:'fixed',top:0}); } else{ $('.nav').css({display:'none',position:'static',top:0}); } }) } ) </script>
    </body>
</html>

View Code

2、jQuery的篩選方法及實例

　　一、jQuery篩選方法

實例代碼：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的經常使用篩選方法</title>
    <style type="text/css"> li.active{ font-size: 30px; } </style>
</head>
<body>
    <ul>
        <li class="List">1</li>
        <li >2</li>
        <li class="List">3</li>
        <li >4</li>
        <a href="https://www.cnblogs.com/schut/">暮光微涼</a>
        <a href="#" id="another">百度一下</a>
    </ul>
    <p class="p1">段落1</p>
    <p class="p2">段落2</p>
    <p class="p3">段落3</p>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function(){ console.log($('li')); // jquery的遍歷方法 .each()
        $('ul').children().each(function(index,ele){ console.log(index); // 索引
            console.log(ele);   // 值（element）
            var isList = $(this).hasClass('List'); if(isList){ $(this).css('color','orange'); } else{ // $(this).css('font-size','12px');
 } }); // eq(index) 獲取第n個元素
        console.log($("p").eq(1)); // first() 獲取第一個元素
        console.log($("p").first()); // last() 獲取最後一個元素
        console.log($("p").last()); // children() 獲取當前元素的全部子元素
        console.log($('ul').children('.List')); console.log($('li')); // 獲取選中元素的父元素
        console.log($('a').parent()); // 獲取選中元素的前一個同輩元素
        console.log($('li').last().prev()); // 獲取選中元素的以前的全部同輩元素
        console.log($('li').last().prevAll()); // siblings(兄弟姐妹) 篩選給定的同胞同類元素(不包括給定元素自己)
        // console.log($('#another').siblings('a'));
        $('#another').siblings('a').hide(); $('li').hover(function(){ $(this).addClass('active').siblings('li').removeClass('active'); }) }) </script>
</html>

View Code

　　二、實例一：嵌套選項卡

　　第一部分：html部分

// html部分

<!DOCTYPE html>
<html lang=""en>
<head>
    <meta charset="UTF-8">
    <title>嵌套選項卡案例<title>
    // 引入css文件
    <link rel="stylesheet" type=""text/css href="index.css">
</head>
<body>
    <div id="box">
        <ul id="leftBox">
              <li>a</li>
              <li>b</li>
              <li>c</li>
              <li>d</li>
        </ul>
        <div id="rightBox">
              <div style="display:block">
                  <p>a1</p>
                  <ul>
                       <li class="active">a1</li>
                       <li>a2</li>
                       <li>a3</li>
                       <li>a4</li>
                  </ul>
              </div>
              <div>
                    <p>b1</p>
                    <ul>
                          <li class="active">b1</li>
                          <li>b2</li>
                          <li>b3</li>
                          <li>b4</li>
                    </ul>
              </div>
              <div>
                    <p>c1</p>
                     <ul>
                           <li class="c1"></li>
                           <li>c2</li>
                           <li>c3</li>
                           <li>c4</li>
                     </ul>
              </div>
              <div>
                   <p>d1</p>
                   <ul>
                        <li class="active">d1</li>
                        <li>d2</li>
                        <li>d3</li>
                        <li>d4</li>
                   </ul>
              </div>
        </div>
    </div>
</body>
</html>

View Code

　　第二部分：css部分

/*頁面初始化*/
*{ margin:o; padding:0; } /*去除無序列表的樣式*/ ul{ list-style:none; } /*清除浮動產生的問題，三句話缺一不可*/ #box:after{ content:""; display:block; clear:both; } #box{ width:900px; border:1px solid mediumspringgreen; margin:30px auto; background:cadetblue; } #leftBox{ width:200px; float:left; } #leftBox li{ width:200px; height:88px; background:darkorange; margin-bottom:2px; color:white; font:30px/88px "華文楷體";
    text-align:center; } #rightBox div{ width:700px; display:none; float:left; } #rightBox p{ width:100%; height:300px; font:100px/300px "Adobe 楷體 Std R";
    text-align:center; background-color:#b2e567; } #rightBox ul{ /*父元素設置 display:table 使它成爲一個塊級表格元素 子元素設置 display:table-cell 使子元素成爲表格單元格，就比如是在表格中同樣*/ width:700px; display:table; } #rightBox li{ display:table-cell; background:pink; height:60px; border-right:2px solid cadetblue; font:30px/60px 'Adobe 宋體 Std L';
    text-align:center; } #leftBox .active{ background:gold; color:black; } #rightBox .active{ background:white; color:black; }

View Code

　第三部分：jQuery部分

<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(functiuon(){ // 左側鼠標移入時
        $("#leftBox li").mouseover(function(){ // 修改本身的樣式（僅對被鼠標選中的那個元素添加樣式，而不給兄弟元素添加）
             $(this).addClass("active").siblings("li").removeClass("active"); // 修改右側欄的div
          // console.log($(this).index); 獲取當前元素的索引
          $("#rigntBox div").eq($(this).index()).show().siblings("div").hide(); }); $("#rightBox li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); var liValue = $(this).html(); // 獲取當前元素的標籤
        // .parent() 表示父元素， .prev() 表示前一個元素
     $(this).parent().prev().html(liValue); }) }) </script>

View Code

　　三、實例二：小米官網滑動

　　第一部分：html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官網滑動</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="box">
        <ul>
            <li><a href=""><img src="images/xiaomi_01.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_02.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_03.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_04.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_05.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_06.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_07.png"></a><p>點擊查看</p></li>
            <li><a href=""><img src="images/xiaomi_08.png"></a><p>點擊查看</p></li>
        </ul>
    </div>
</body>
<script type="text/css" src="jquery-3.2.1.min.js"></script>
<script type="text/css" src="index.js"></script>
</html>

View Code

　　第二部分：css部分

*{ margin:0; padding:0;
} ul{ list-style: none;
} #box{ width:980px; height:610px; margin:30px auto; border:1px solid greenyellow; background-color: #bce8f1;
} ul li{ width:235px; height:297px; margin-left:8px; margin-top:5px; position:relative; overflow: hidden; float:left;
} ul p{ width:235px; height:100px; background-color: rgba(230,10,10,0.4); bottom:-100px; color:snow; text-align: center; position: absolute;
}

View Code

　　第三部分：jQuery部分

$(document).ready(function(){ $("ul li").hover(function(){ // 鼠標滑動到li上時，p標籤升起;stop()表示先結束以前的升起或落下操做，再執行後續操做 $(this).children("p").stop().animate({bottom:0},100); },function(){ // 鼠標滑出li時，p標籤升落下 $(this).children("p").stop().animate({bottom:-100},100) }) })

View Code

未完，待續...