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="width:100px">
    <p>内容</p>
</div>

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

<script> (function() { document.write(new Date().getFullYear()) })() </script>