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. 使用CUDA Warp-Level级原语

    使用CUDA Warp-Level级原语 NVIDIA GPU以SIMT(单指令,多线程)的方式执行称为warps 的线程组.许多CUDA程序通过利用warp执行来实现高性能.本文将展示如何使用cud ...

  2. 如何在TVM上集成Codegen(上)

    如何在TVM上集成Codegen(上) 许多常用的深度学习内核,或者提供DNNL或TensorRT等框架和图形引擎,让用户以某种方式描述他们的模型,从而获得高性能.此外,新兴的深度学习加速器也有自己的 ...

  3. C#搞跨平台UI,封装Cef作为Cpf的控件支持Windows,Linux,Mac

    终于封装完成了,采用离屏渲染方式,支持JS和C#互相调用,C#方法自动绑定到JS里,中文输入有自动调整输入法位置. 基于开源的CefGlue 移植,本来想用CefSharp,不过这个里面有很多C++的 ...

  4. 再看 Java 中的单例

    此前面试遇到了单例问题,本以为已经背的滚瓜烂熟,没想到被问单例如何避免被反射和序列化破坏,虽然后来还是等到了通知,但还是复习一下单例的实现方式,并学习防止反射和序列化破坏的手段. 基本实现方式 其他相 ...

  5. PTA题目集7-9总结

    PTA题目集7-9总结 一.前言 题目集七:该题集为轮到图形卡片排序游戏题,主要考查的知识点有类的继承,ArrayList泛型的使用,Compabale接口的运用,多态的使用方法以及接口的应用,难度较 ...

  6. 【linux】驱动-15-定时器

    目录 前言 15. 定时器 15.1 内核函数汇总 15.2 内核滴答 15.3 相关结构体 15.4 setup_timer() 设置定时器 15.5 add_timer() 向内核添加定时器 15 ...

  7. 自动删除n天前的日志(此处用于业务删除xml文件)

    Linux应用总结:自动删除n天前的日志 linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快 ...

  8. 实现SLIC算法生成像素画

    前言 像素风最早出现在8bit的电子游戏中,受制于电脑内存大小以及显示色彩单一, 只能使用少量像素来呈现内容,却成就了不少经典的像素游戏.随着内存容量与屏幕分辨率的提升,内存与显示媒介的限制不再是问题 ...

  9. 透彻理解液晶显示模组LCD1602指令集与驱动编程(1)

    LCD1602可以说是大多数单片机工程师了解液晶显示的入门级模组,其显示原理与其它很多显示模组也是相似的,今天我们就来详细讨论一下它的指令集.所谓模组的指令集,本质上是该模组使用的控制芯片的指令集,本 ...

  10. sql数据库新建作业,新建步骤时报错从 IClassFactory 为 CLSID 为 {AA40D1D6-CAEF-4A56-B9BB-D0D3DC976BA2} 的 COM 组件创建实例失败,原因是出现以下错误: c001f011。 (Microsoft.SqlServer.ManagedDTS)

    简单粗暴的重启sql数据库 其他网上找的方法 32位操作系统: 打开运行(命令提示符), 一.输入 cd c:\windows\system32 进入到c:\windows\system32路径中 二 ...