常用js代码积累
2024-10-20 08:03:41
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>
最新文章
- WPF +MVVM(Caliburn.Micro)项目框架
- AD 域账号登录
- jQuery知识点总结（第一天）
- SQL to_char,to_date日期字符串转换问题
- PHP校验ISBN码的函数
- Steam游戏黑屏与游戏直接安装方法
- [转] 用管道获得shell 命令的输出
- .net 文件下载方法
- window权限 及c++实现 【网摘】(转)
- TRIZ系列-创新原理-28-替代机械系统原理
- CF 299 div2 C 博弈
- setup 命令中防火墙配置选项无法打开
- 浅谈canvas绘画王者荣耀--雷达图
- linux 保存git的账号密码
- Java Native调用C方法
- Django forms 关于select和checkbox设置初始选中值
- sudo passwd root输入普通用户密码后显示用户不再sudoers文件中
- IPFS初探
- Springboot 使用 RestTemplate
- excel 方框打钩
热门文章
- 为x86 CPU自动调度神经网络
- Win10 下python_appium的Android手机自动化环境搭建
- springcloud-config配置异常Cannot clone or checkout repository 和 Authentication is required but no CredentialsProvider has been registered解决过程
- 深入理解java虚拟机笔记Chapter8
- Android客户端网络预连接优化机制探究
- 练习（time.tick定时器监控数据库）
- 【题解】hdu 3586 Information Disturbing 二分 树形dp
- 关于DWG文件转换成PDF
- golang 用defer 捕获error 需小心
- 怎么停掉或关闭运行的npm run dev