判断滚动条是否到达底部

  1.     <style>
  2.         *{margin:0;padding:0}
  3.         body{
  4.             height: 2000px;
  5.             background: #ff2d51 url("images/webp.webp") no-repeat;
  6.         }
  7.     </style>
  8. </head>
  9. <body>
  10.         //判断滚动条是否到达底部
  11.     <script>
  12.         $(window).scroll(function(){
  13.             var scrollTop =  $(window).scrollTop(); //获取滚动条距离顶部的高
  14.             var availHeight =  $(window).height(); //获取可视区域的高
  15.             var dw = $(document).height();  //获取内容区域的高
  16.             console.log(dw)
  17.             /* 滚动条的高度+可视区域的height = 内容区域的高度 */
  18.         })
  19.         function isReachBottom(){
  21.         }
  22.     </script>

api

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0
  5.         }
  7.         div.item {
  8.             width: 200px;
  9.             height: 200px;
  10.             border: 1px solid #333;
  11.             padding: 20px;
  12.             float: left;
  13.         }
  14.         #app{
  15.             margin:0 auto;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div id="app">
  22.         <div class="item"></div>
  23.         <div class="item"></div>
  24.         <div class="item"></div>
  25.         <div class="item"></div>
  26.         <div class="item"></div>
  27.         <div class="item"></div>
  28.     </div>
  30.     <script>
  31.         /* 
  32.         width -->content
  33.         outerWidth-->content,padding,border
  34.          */
  35.         /* 
  36.         改变css样式
  37.         $(element).css({attr:value})
  38.          */
  39.         var ww = $(window).width();
  40.         var box = $(".item").outerWidth();
  41.         var num = Math.floor(ww / box);
  42.         $("#app").css({width:num*box+"px"})
  43.     </script>
  44. </body>

获取元素距离窗口的距离

  1.     <style>
  2.         .item{
  3.             width:100px;
  4.             height: 100px;
  5.             margin:200px;
  6.             background-color: red;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <!-- 获取元素距离窗口的距离
  12.         left:  $(element).offset().left;
  13.         top:  $(element).offset().top;
  14.         eq()  找到第几个元素
  15.      -->
  16.     <div class="item"></div>
  17.     <div class="item"></div>
  18.     <div class="item"></div>
  19.     <script>
  20.         // var w =  $(".item").offset().left;
  21.         // var h =  $(".item").offset().top;
  22.         console.log($(".item").eq(1));
  23.         /* eq 第几个元素的 */
  24.     </script>

瀑布流

  1.     <style>
  2.         *{margin:0;padding:0}
  3.         .item img {
  4.             width:240px;
  5.             padding:5px;
  6.             vertical-align: bottom;
  7.         }
  8.         .item{
  9.             float: left;
  10.             border:1px solid #eee;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="app">
  16.         <div class="item"><img src="images/01.jpg" alt=""></div>
  17.         <div class="item"><img src="images/02.jpg" alt=""></div>
  18.         <div class="item"><img src="images/03.jpg" alt=""></div>
  19.         <div class="item"><img src="images/04.jpg" alt=""></div>
  20.         <div class="item"><img src="images/05.jpg" alt=""></div>
  21.         <div class="item"><img src="images/06.jpg" alt=""></div>
  22.         <div class="item"><img src="images/07.jpg" alt=""></div>
  23.         <div class="item"><img src="images/08.jpg" alt=""></div>
  24.         <div class="item"><img src="images/09.jpg" alt=""></div>
  25.         <div class="item"><img src="images/10.jpg" alt=""></div>
  26.         <div class="item"><img src="images/11.jpg" alt=""></div>
  27.         <div class="item"><img src="images/12.jpg" alt=""></div>
  28.     </div>
  29.     <script>
  30.         /* 1.一排能放置几张图片 */
  31.         var  ww =  $(window).width();
  32.         var box =  $(".item").outerWidth();
  33.         var num =  Math.floor(ww/box);
  34.         var  arr = []  //
  35.         /* 2.将第一排的高度放在一个数组中arr */
  36.         $(".item").each((index,value)=>{
  37.             if(index<num){
  38.                 var height = $(value).outerHeight();
  39.                 arr.push(height)
  40.             }else{
  41.                 /* 3.从高度最小的地方放置图片 */
  42.                 var minHeight = Math.min(...arr);
  43.                 var index= arr.indexOf(minHeight);
  44.                 var offsetLeft = $(".item").eq(index).offset().left;
  45.                 $(value).css({position:"absolute",left:offsetLeft,top:minHeight})
  46.                 arr[index] = minHeight+ $(value).outerHeight();
  47.             }
  48.         })
  49.     </script>

点击切换load

  1.    <div class="head">
  2.        <a href="html/html.html">html</a>
  3.        <a href="html/css.html">css</a>
  4.    </div>
  5.    <div id="app">
  7.    </div>
  8.    <div class="footer">
  9.       footer
  10.    </div>
  11.    <script>
  12.        /* 
  13.        return false  阻止a标签的跳转
  14.         */
  15.         /* 
  16.         load()加载服务器上的数据
  17.          */
  18.        var htmls = ["html/html.html","html/css.html"];
  19.        $("#app").load(htmls[0])
  20.        $(".head a").click(function(){
  21.            $("#app").load(htmls[$(this).index()])
  22.            return false;
  23.        })
  24.    </script>

点击，滚动条滚动到达指定位置

  1.     <style>
  2.         body{
  3.             height: 2500px;
  4.         }
  5.         .head{
  6.             top:0;
  7.             left:0;
  8.             height: 50px;
  9.             position: fixed;
  10.         }
  11.         div{
  12.             width:100px;
  13.             height: 100px;
  14.             background-color: red;
  15.         }
  16.         #html,#css,#js{
  17.             margin-top: 500px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <p class="head">
  23.         <a href="#html">html</a>
  24.         <a href="#css">css</a>
  25.         <a href="#js">javascript</a>
  26.     </p>
  27.     <div id="html">
  28.         html
  29.     </div>
  30.     <div id="css">
  31.         css
  32.     </div>
  33.     <div id="js">
  34.         javascript
  35.     </div>
  36.     <script>
  37.         /* 
  38.         $(element).attr(value)
  39.          */
  40.         $(".head a").click(function(){
  41.             var id = $(this).attr("href");
  42.             var offsetTop =  $(id).offset().top;
  43.             console.log(offsetTop)
  44.             $("html,body").animate({scrollTop:offsetTop})
  45.             return false;
  46.         })
  47.     </script>

val

  1.     <!-- 
  2.         $(element).val() --获取value值
  3.         $(element).val(value) --改变value值
  4.      -->
  5.     <input type="text" value="你">
  6.     <script>
  7.         var value = $("input").val("")
  8.         console.log(value)
  9.     </script>

jQuery转js

  1.          var div = $("div")[0]; jquery转js
  2.          var content = div.innerHTML;
  3.          console.log(content);

js转jQuery

  1.          /* 原生的js对象转换为jquery对象  $(element)*/
  2.          var div = document.getElementsByTagName("div")[0];
  3.          console.log($(div).html())

下拉刷新

  1.     <style>
  2.         .item img {
  3.             width: 150px;
  4.             height: 150px;
  5.             padding: 5px;
  6.         }
  8.         .item {
  9.             border: 1px solid #eee;
  10.             float: left;
  11.             margin-right: 80px;
  12.             margin-top: 50px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="app">
  20.     </div>
  21.     <script>
  22.         /* 初始化数据 */
  23.         loadData()
  24.         jump();
  25.         /* 下拉刷新加载的数据 */
  26.         $(window).scroll(function () {
  27.             if (isReachBottom()) {
  28.                 var offset = $(".item").length;
  29.                 loadData(offset)
  30.             }
  31.         })
  32.         function jump() {
  33.             setTimeout(() => {
  34.                 $(".item").click(function (event) {
  35.                    let aid = event.currentTarget.dataset.aid;
  36.                    location.href = `detail.html?id=${aid}`
  37.                 })
  38.             }, 200)
  39.         }
  41.         function isReachBottom() {
  42.             var scrollTop = $(window).scrollTop();
  43.             var availHeight = $(window).height();
  44.             var dh = $(document).height();
  45.             return (scrollTop + availHeight == dh) ? true : false;
  46.         }
  48.         function loadData(offset) {
  49.             http({
  50.                 offset,
  51.                 success: res => {
  52.                     var playlists = res.playlists;
  53.                     playlists.forEach(item => {
  54.                         var template = `
  55.                          <div class="item" data-aid=${item.id}>
  56.                             <img src=${item.coverImgUrl}>
  57.                          </div>   
  58.                       `
  59.                         $("#app").append(template)
  60.                     })
  61.                 }
  62.             })
  63.         }
  64.     </script>