前端-js中不需要记,但是要用的小知识

2024-04-13 03:58

本文主要是介绍前端-js中不需要记,但是要用的小知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

三大家族

1.事件对象兼容,目前只学到这个。就用这个

model.onmousedown = function(event){var event = event || window.event;
}

2.js做拖拽特效的时候,偶尔会发生小bug。是因为移动鼠标的时候,可能会选中标签或文字

model.onmousedown = function(event){var event = event || window.event;document.onmousemove = function(event){// 如果选中了,则取消所有选中window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();var event = event || window.event;}document.onmouseup = function(){document.onmousemove = null;}
}

2-1,获取选中文本

var txt = "";
if(window.getSelection){//高级浏览器txt = window.getSelection().toString();
}else {//IE678txt = document.selection.createRange().text;
}

3.CSS三大家族-scroll家族。有兼容性,所以封装js来获取内容值。如下是获取页面已经卷动的高度或者宽度

<script type="text/javascript">
function myscroll(){if(window.pageYOffset !=null){//【IE9+和其他浏览器】均声明DTD头return{left : window.pageXOffset,top : window.pageYOffset}}if(document.compatMode=="CSS1Compat"){// 声明了DTD头// 检测是不是怪异模式浏览器,--就是没有声明<!DOCTYPE html>return {left : document.documentElement.scrollLeft,top : document.documentElement.scrollTop}}if(document.compatMode=="BackCompat"){ // 未声明return {left : document.body.scrollLeft,top : document.body.scrollTop}}return {left :0,top :0}
}
window.onscroll = function(){console.log(myscroll().top);
}
</script>

4.CSS三大家族-client家族,也有兼容性。如下是获取当前浏览器窗口的宽度高度。

可以根据页面当前宽度,调整标签样式,也可以来判断当前访问者是手机,pad还是电脑

<script type="text/javascript">function client (){if(window.innerWidth!=null){return {width:window.innerWidth,height:window.innerHeight}}if(document.compatMode=="CSS1Compat"){return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}}return {width:document.body.clientWidth,height:document.body.clientHeight}}window.onresize = function(){console.log(client().width);}
</script>

5.取消冒泡

box.onclick = function(event){var event = event || window.event;if(event && event.stopPropagation){//取消冒泡event.stopPropagation();}else{//IE 678 取消冒泡event.cancelBubble = true;}console.log("box被点击了");}
document.onclick = function(event){var event = event || window.event;var targetid = event.target? event.target.id :event.srcElement.id;if(targetid!="show"){console.log("id为show的标签不能算点击document");   }
}

6.获取标签样式属性。例:box.style.left,这种方式只能获取行内式的值。为了能获取css样式中的值,可以用如下写法

function getStyle(obj,attr){if(obj.currentStyle){return ojb.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr];}
}getStyle(box,"left");

7.for in 循环中,item的值是数组的下标,是json字符串的key,C#中item的值是数组中某变量的值

这篇关于前端-js中不需要记,但是要用的小知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/899081

相关文章

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例