zoukankan      html  css  js  c++  java
  • JQ/Js/Css常用方法汇总-持续更新

    【复制标题查找】
    1:定时运行脚本方法
    2:jq获取兄弟节点 | 下一个兄弟节点等
    3:为导航栏或侧边菜单栏点击添加样式
    4:jq判断滚动条是否已经到底部
    5:让多余的字符显示成 "..."
    6:直接显示年份:例如用于标记版权所有

     1:定时运行脚本方法

    //每秒运行一次
    setInterval(function() {
          console.info(1);//要执行的内容
    }, 1000);
    

     2:jq获取兄弟节点 | 下一个兄弟节点等

    //个人觉得常用
    jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
    jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
    jQuery.siblings(),返回兄弟姐妹节点,不分前后
    jQuery("#xxh").find("ul"):找到id为xxh标签下的ul标签
    

     3:为导航栏或侧边菜单栏点击添加样式

    //标签id为navheader li下的a点击,
    //跳转到页面的url【即:window.location,导航栏中的链接】
    //如果与a中的href值相同,则该li添加样式
    $('#navheader li a').each(function() {
           if ($($(this))[0].href == String(window.location))
           //这句话可以再很多场合使用
           //给当前标签添加 current样式的同时移除其他兄弟节点的样式
           $(this).parent().addClass('current').siblings('a').removeClass('current');
    });     
    

     4:jq判断滚动条是否已经到底部

    根据个人情况【只有内容块滚动】:亲测 可用
    //获取内容块id为container下的滚动事件
    $("#container").scroll(function () {
            var $this = $(this);
            var viewHeight = $(this).height(); //可见高度   
            var contentHeight = $("#content").height();//内容高度  
            var scrollTop = $(this).scrollTop();//滚动高度  
            if (scrollTop / (contentHeight - viewHeight) >= 0.95) { //快到达底部5%时,加载新内容  
                console.info("到底");
            }               
        });
    
    
    百度第一条:本人未测试
    $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
    $(document).scrollLeft() 这是获取水平滚动条的距离
    $(document).scrollTop()==0的时候 就是顶端了
    $(document).scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了
    $(document).height() //是获取整个页面的高度
    $(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧
    
    其实你可以自己做个实验就知道了
    $(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
    })
    <span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看--> 
    

     5:让多余的字符显示成 "..."

    //Css样式
    p{
        cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap   
    }
    
    //html,超出部分将会变成...,以上样式p标签中可用,其他未测试
    <div style="100px">
        <p>内容</p>
    </div>
    

    6:直接显示年份:例如用于标记版权所有

    <script> (function() { document.write(new Date().getFullYear()) })() </script>
    
  • 相关阅读:
    js高级1
    JUC总览
    7 种阻塞队列相关整理
    Exchanger 相关整理
    Semaphore 相关整理
    ConcurrentLinkedQueue 相关整理
    ConcurrentHashMap(1.8) 相关整理
    ConcurrentHashMap(1.7) 相关整理
    ReentrantReadWriteLock 相关整理
    LockSupport 工具相关整理
  • 原文地址:https://www.cnblogs.com/MouseMI/p/4843394.html
Copyright © 2011-2022 走看看