1,js判断进入可视区,参考(亲测不行):https://www.cnblogs.com/Marydon20170307/p/8830069.html

重点学习的话,可参考:

  js计算元素距离顶部的高度及元素是否在可视区判断:https://www.cnblogs.com/damonFeng/archive/2018/01/30/8378123.html

https://www.jb51.net/article/103459.htm

$(window).scroll(function() {
// 获取的是浏览器可见区域高度(网页的可视区域的高度)(不滚动的情况下)
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
var e = document.getElementById('header-nav');
// 元素顶端到可见区域(网页)顶端的距离
var htmlElementClientTop = document.getElementById('header-nav').getBoundingClientRect().top;
// 网页指定元素进入可视区域
if (documentClientHeight >= htmlElementClientTop) {
// TODO 执行你要做的操作
$("#header-nav").addClass("navbar-fixed-top");
}
});
/**
* 监听网页滚动事件
*/
window.onscroll = function(){
// 获取的是浏览器可见区域高度(网页的可视区域的高度)(不滚动的情况下)
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
var e = document.getElementById('header-nav');
// 元素顶端到可见区域(网页)顶端的距离
var htmlElementClientTop = document.getElementById('header-nav').getBoundingClientRect().top;
// 网页指定元素进入可视区域
if (documentClientHeight >= htmlElementClientTop) {
// TODO 执行你要做的操作
document.getElementById('header-nav').classList.add('navbar-fixed-top');
console.log([document.getElementById('header-nav')]);
}
}

  

getBoundingClientRect深度学习:

https://www.softwhy.com/article-10033-1.html

  https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

2,监听页面滚动事件,参考:https://www.cnblogs.com/smalldy/p/10875654.html

3,getElementById与$()的区别,参考:https://blog.csdn.net/qq_36378302/article/details/81974246

getElememtById是获取当前对象,jquery()是获取一个jQuery的对象数组,给getElementById获取的对象加上数组后,这俩个还是不一样,一个是js的数组对象作为容器,也就是用数组做包装,
$()是封装了一个jQuery的对象数组作为容器,封装了很多方法,相当于与jQuery对象做包装,共同点是都是内部包装的内容都是一样的。

4,学习滚动插件iScroll

5,原生实现jquery的prepend,append,before,after

  参考:https://www.mmxiaowu.com/article/58481d53d4352863efb55443

同时要掌握appendChild函数和createElement和createTextNode函数

6,fadeIn和fadeOut的使用

$(document).on("mouseenter","#list-container #list-according .panel", function(){
// ohters panel-body fadeOut
var panels = $("#list-container .panel");
var panelSort = $(this).attr("sort");
panels.each(function(i,ele){
if(panelSort && panelSort != i){
$(ele).find(".panel-body").fadeOut(2000);
}
})
// next panel-body fadeIn
$(this).children().fadeIn(1000);
});

对比下面的注册两个事件mouseenter和mouseleave事件

$(document).on("mouseenter","#list-container #list-according .panel", function(){
$(this).find(".panel-body").fadeIn(1000);
});
$(document).on("mouseleave","#list-container #list-according .panel", function(){
$(this).find(".panel-body").fadeOut(2000);
});

7,递归遍历对象

function OS(obj){
for(var i in obj){
console.log("obj[i]", i);
if(typeof obj[i] === "object"){
OS(obj[i]);
}else{
if(typeof obj[i] === "function"){
console.log("function",obj[i]());
}else{
console.log(obj[i]);
}
}
}
}
(function(document){
var root = {
id : "001",
a : {
id : "001-001",
a1 : "bac",
a2 : function(){
return "a2";
}
},
b : {
id : "002-001",
b1 : "woer",
b2 : function(){
return "b2";
}
}
} function SSO (root,objName){
var obj = root;
//debugger;
var re = null ;
for(var i in obj){
if(i == objName){
if(typeof obj[i] === "object"){
return re = obj[i];
}else if(typeof obj[i] === "function"){
return re = obj[i]();
}else{
return re = obj[i];
}
}else{
if(typeof obj[i] === "object"){
re = SSO(obj[i],objName);
if(re){
return re;
}
}
}
}
return re;
}
console.log(SSO(root,"b2")); })();

8,最基础的页面js模板(单全局变量+对象搜索)

<script type="text/javascript">
var TabUserManager = TUM = {
namespace: function(ns){
var parts = ns.split("."),
object = this,
i,len;
for(i=0, len=parts.length; i<len; i++){
if(!object[parts[i]]){
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}, SSO : function(root,objName){
var obj = root;
//debugger;
var re = null ;
for(var i in obj){
if(i == objName){
if(typeof obj[i] === "object"){
return re = obj[i];
}else if(typeof obj[i] === "function"){
return re = obj[i]();
}else{
return re = obj[i];
}
}else{
if(typeof obj[i] === "object"){
re = TUM.SSO(obj[i],objName);
if(re){
return re;
}
}
}
}
return re;
}, uEditPanel : {
I : function(){
return $("#uEditPanel");
},
}, uListPanel : { // TRM.uListPanel.
I : function(){
return $("#uListPanel");
},
uToolbar : {
uCheckBtn : function(){
console.log("uCheckBtn");
},
uAddBtn : function(){
console.log("uAddBtn");
},
uEditBtn : function(){
console.log("uEditBtn");
},
uRemoveBtn : function(){
console.log("uRemoveBtn");
},
uSearchBtn : function(){
console.log("uSearchBtn");
} }
}
};
</script>

常用js代码积累的更多相关文章

  1. 常用JS代码片段

    1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...

  2. 常用js代码整理、收集

    个人整理了一下个人常用到的一些js代码,以方便学习以及日后使用,或许有一些是个人之前从网上摘下来的,但是不记得是具体从哪里来的了,如果你看到有一段代码跟你的文章很相似甚至一样,请不要气愤,请告诉我,我 ...

  3. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  4. 自动化测试-20.selenium常用JS代码执行

    前言: 在工作中有些控件定位不到,需要操作,使用JS代码去修改或者操作达到selenium不能做的操作. 1.Web界面的滑动 1 #coding:utf-8 2 from selenium impo ...

  5. 网页常用Js代码

    1.后退前进 <input type="button" value="后退" onClick="history.go(-1)"> ...

  6. 100个常用js代码(转载)

    作者:小萧ovo链接:https://zhuanlan.zhihu.com/p/23076321来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. JavaScript定点 ...

  7. 常用js代码学习

    1.用JS实现的radio图片选择按钮效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. !!!常用JS代码块 (jquery)

    jquery代码块 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> ...

  9. 常用js代码

    common-function-lib.js /*产生随机颜色*/ function randomColor() { var rand = Math.floor(Math.random() * 0xF ...

随机推荐

  1. Mac设置charles证书信任

  2. Spring Cloud系列(六):配置中心

    在使用Spring Boot的时候,我们往往会在application.properties配置文件中写一些值,供应用使用,这样做的好处是可以在代码中引用这些值,当这些值需要作出修改的时候,可以直接修 ...

  3. Linux学习笔记:用户与用户组

    基本概念 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用户 也就是说任何需要使用操作系统的用户,都 ...

  4. QT基本数据类型

    因为Qt是一个C++框架, 因此C++中所有的语法和数据类型在Qt中都是被支持的, 但是Qt中也定义了一些属于自己的数据类型, 下边给大家介绍一下这些基础的数类型. QT基本数据类型定义在#inclu ...

  5. halcon——缺陷检测常用方法总结(特征训练)

    引言 机器视觉中缺陷检测分为一下几种: blob分析+特征 模板匹配(定位)+差分:halcon--缺陷检测常用方法总结(模板匹配(定位)+差分) - 唯有自己强大 - 博客园 (cnblogs.co ...

  6. ES5中的类

    之前小编对于类和类的基本特征(所谓的封装.继承.多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小编就结合ES5中的基本用法和大家聊聊,希望小伙伴会在这篇文章有属于自己的收获,并能够在 ...

  7. 08:'my_tag' is not a registered tag library. Must be one of

    确保每次修改模板标签时都重新启动 Django 开发服务器(或确保它自己重新启动).如果服务器没有重新启动,Django 将不会注册标签. 从 django 1.9 开始,您可以在如下设置中加载这些新 ...

  8. ThreadPoolExecutor参数详解

    ThreadPoolExecutor全部参数的构造函数 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long ke ...

  9. 【题解】Luogu p2016 战略游戏 (最小点覆盖)

    题目描述 Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题. 他要建立一个古城堡,城堡中的路形成一棵树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能 ...

  10. csp-s模拟测试42「世界线·时间机器·密码」

    $t3$不会 世界线 题解 题目让求的就是每个点能到点的数量$-$出度 设每个点能到的点为$f[x]$ 则$f[x]=x \sum\limits_{y}^{y\in son[x]} U f[y]$ 用 ...