常用的JS原生方法-程序员宅基地

技术标签: # JavaScript  前端  js  javascript  

常用的JS原生方法

最近做项目用到了js一些常用的原生方法,谨记以下:
#心得#:多撸文档,总有意外收获!

1. 常用的JS原生方法:
var bgdiv = window.document.getElementById("div_demo_id");
if (!bgdiv) {
    
	bgdiv = window.document.createElement("div");
	bgdiv.id = "div_demo_id";
	window.document.getElementsByTagName("BODY")[0].appendChild(bgdiv);
}
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
if (!height)
	height = 30;
var scrollTop = document.documentElement.scrollTop;
if (!scrollTop) {
    
	scrollTop = document.body.scrollTop;// IE
}
bgdiv.className = "div_demo_class";
bgdiv.style.cssText = "position:absolute;height:" + height+ "px;left:" + (iWidth - 200) / 2 + "px;top:"+ ((iHeight - height) / 2 + scrollTop - 72)+ "px;z-index:9999;text-align:center;";
bgdiv.style.display = "block";
bgdiv.style['z-index'] = 9999;	//重要!!	(不知道的转不过来,竟然可以用[],哈哈哈哈)
bgdiv.innerHTML = "<div>Hello Word !</div>";
bgdiv.setAttribute("属性","值");
bgdiv.getAttribute("属性");
  • document.getElementById 根据Id,获取元素
  • document.createElement 创建元素
  • document.getElementsByTagName 根据元素名称,获取元素(返回数组)
  • appendChild 追加元素
  • document.documentElement.clientWidth 获取宽高
  • document.documentElement.clientHeight 获取宽高
  • document.documentElement.scrollTop 滚动条位置
  • document.body.scrollTop 滚动条位置
  • xxx.className 设置class属性值
  • xxx.innerHTML 插入html代码
  • xxx.style.cssText 设置样式内容
  • xxx.style.display 设置样式内容

2. 获取元素、查找元素:
  • document.querySelector(element); 查找元素,支持class、id等
    (大部分jquery支持的写法,如“div.mi-body”),本方法仅支持IE8及以上使用。
  • getElementsByClassName; 根据class名称查找,返回元素数组
  • getElementsByTagName();
  • getElementById();
  • getElementsByName();
  • xxx.parentNode 获取上级元素
  • xxx.parentNode.removeChild(xxx); //删除元素

3.复制文字

input.select();
document.execCommand(“copy”)

function copyText(text) {
    
		var copy_input = window.document.getElementById("copy_input");
		if (!copy_input) {
    
			copy_input = window.document.createElement("input");
			copy_input.id = "copy_input";
			window.document.getElementsByTagName("BODY")[0].appendChild(copy_input);
		}
		copy_input.style.display = "block";
		copy_input.value = text;
		copy_input.select();
		if (document.execCommand("copy"))
			layer.msg("复制成功" + text);
		copy_input.style.display = "none";
}
4.模拟滚动屏幕(到顶部or到底部)

模拟手滑动屏幕效果(可扩展为到顶部or到底部)
高度可以控制,例如0,或dom.offsetHeight。

  • 使用jQuery(有动画)
var height= $(window).height(), scrollTop = Math.max($('#xx-container').scrollTop(), height);
$('#xx-container').animate({
    
	scrollTop : parseInt(scrollTop + (height * 0.8)) + 'px'
}, 'slow');
  • 使用JS(无动画)

说明:js如需要动画效果,可以将height使用setTimeout分段滚动。

var bgdiv = window.document.getElementById("search-inaccount-content");
if (bgdiv) {
    
	bgdiv.scrollBy(0, height);
}
5.动态加载图片、动态加载js…
	var oScript = document.createElement("script");
	oScript.src = fileServer + '/js/stream-v1.js';
	oScript.onload = oScript.onreadystatechange = function() {
    
		if (this.complete || this.readyState == "loaded" || this.readyState == "complete") {
    
			//@-操作
		}
	};

onload、complete 为普通浏览器
onreadystatechange、readyState 为IE浏览器事件

var ohd = document.getElementsByTagName('HEAD').item(0),v=new Date().getTime(),ot0 = document.createElement('script');
ot0.src = 'https://www.showdoc.com.cn/static/jquery.min.js?v='+ v;
ohd.appendChild(ot0);ohd.appendChild(ot0);

其它说明:

浏览器控制台中,可以使用js进行页面的数据操作(比如引入jquery,引入js文件,追加元素等)。


【备份地址】

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_26599807/article/details/104648846

智能推荐

树莓派4调用CSI相机_树莓派4b buster使用csi3-程序员宅基地

文章浏览阅读3k次,点赞2次,收藏8次。1.根据需要,下载anaconda资源官网下载,我这里下载的是python3.7的2.bash执行一下刚下好的文件bash anaconda-x86.shList item执行过程中遇到问题,可能是缺少一个bunzip2模块,用yum安装一下sudo yum apt-get install bzip2List itemyum使用过程中遇到问题,显示line 30ex..._树莓派4b buster使用csi3

TensorFlow中的数据统计_tensor中各数字出现次数-程序员宅基地

文章浏览阅读1.1k次。1.向量范数向量范数(Vector norm)是表征向量“长度”的一种度量方法,在神经网络中,常用来表示张量的权值大小,梯度大小等。常用的向量范数有:L1范数:定义为向量所有元素绝对值之和:L2范数:定义为向量所有元素的平方和再开根号:∞ −范数:定义为向量x的所有元素绝对值的最大值:对于矩阵、张量,同样可以利用向量范数的计算公式,等价于将矩阵、张量打平成向量后计算。在 Tens..._tensor中各数字出现次数

SpringBoot整合Druid案例_springboot druid使用案例-程序员宅基地

文章浏览阅读772次。学习新思想争做新青年一、Druid介绍1.1、Druid是一个JDBC组件,它包括三部分:DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系。DruidDataSource 高效可管理的数据库连接池。SQLParser1.2、Druid可以做什么?① 可以监控数据库访问性能,Druid内置提供了一个功能强大的StatFilter插件,能够详细统计SQL的执行性能,这对于线上分析数据库访问性能有帮助。② 替换DBCP和C3P0。Druid提._springboot druid使用案例

直博人数远大于硕士人数,清华计算机系到底有多强?_清华大学计算机系人数-程序员宅基地

文章浏览阅读2.7k次。1、院校介绍清华大学计算机科学与技术系(以下简称计算机系)包含了国内计算机专业最全的学科方向,设有高性能计算机与处理器、大数据与云计算、计算机与VLSI设计自动化、人工智能、智能控制及机器人、计算机视觉、媒体信息处理等研究方向。在保研途中,清华大学计算机系是众多保研er心中的“白月光”。2、培养特色※以上信息综合搜集整理自院系官网。如有信息偏误,欢迎留言评论指出3、招生批次※每年情况不同,以官网为准注:下文提到的2021年招生指的是2018年入学,2021年参加夏令._清华大学计算机系人数

tnsping命令的作用和适用场景_tnlsping-程序员宅基地

文章浏览阅读2.1k次。在操作系统上直接运行tnsping命令,就可以得到它的使用方法,如下所示:[ora10g@capaa admin]$ tnsping TNS Ping Utility for Linux: Version 10.2.0.1.0 - Production on 08-JUL-2012 12:03:42 Copyright (c) 1997, 2005, Oracle. All right..._tnlsping

Matlab 图像处理工具箱-程序员宅基地

文章浏览阅读1.1w次,点赞3次,收藏38次。转自:http://cvnote.info/matlab-cv-ip-toolbox/计算机视觉/图像处理研究中经常要用到Matlab,虽然其自带了图像处理和计算机视觉的许多功能,但是术业有专攻,在进行深入的视觉算法研究的时候Matlab的自带功能难免会不够用。本文收集了一些比较优秀的Matlab计算机视觉工具箱,希望能对国内的研究者有所帮助。VLFeat:著名

随便推点

geohash算法原理及实现方式 1 geohash特点_geohash索引的基本思想及其特点。-程序员宅基地

文章浏览阅读520次。geohash算法原理及实现方式 1 geohash特点_geohash索引的基本思想及其特点。

Shader实现瓶内液体效果_liquid shader-程序员宅基地

文章浏览阅读6.3k次,点赞7次,收藏53次。话不多说,先上图…需求:1.液体效果可变色。2.液体透明有折射效果。3.适应各种容器形状。4.随移动幅度进行抖动。实现思路:一、水平面的实现这个是比较简单的,设定一定的高度,有超过此高度的则进行一个片原舍弃。但片元的高度的本地的坐标,真实对比的高度是世界坐标,因此这里需要有一个坐标的转换的操作。设定一个值即当前点的裁剪的世界坐标高度,由外面的脚本传进来。然后每个片元高度转成世..._liquid shader

VsCode编辑器设置自动保存_vscode点击编辑器保存自动刷新vue配置-程序员宅基地

文章浏览阅读750次。VsCode编辑器设置自动保存,便于修改代码后文件在发生改变后进行保存,便于vue项目的热加载vscode编辑器工具栏找到 文件->首选项->设置会出现下面图片中的弹框..._vscode点击编辑器保存自动刷新vue配置

C++ - 带参构造函数,拷贝构造函数_c++ 带参数的构造函数-程序员宅基地

文章浏览阅读749次。1.带有参数的构造函数-> 构造函数可以根据需要定义参数。-> 一个类中可以存在多个重载的构造函数。-> 构造函数的重载遵循C++重载的规则。#include <stdio.h>class Test{public: Test() { printf("Test()\n"); } Test(int v) { printf("Test(int v), v = %d\n", v.._c++ 带参数的构造函数

Beginning Perl for Bioinformatics 总结提升_perl in bioinformatics-程序员宅基地

文章浏览阅读1.3k次。1 Biology and Computer Science2 Getting Started with Perl3 The Art of Programming4 Sequences and Strings5 Motifs and LoopsExample 5­3. Searching for motifs #!/usr/bin/perl ­w # Searching for mo_perl in bioinformatics

教你如何在Android Studio 的模拟器上安装搜狗输入法实现中文输入-----建议收藏备用!_android模拟器安装中文输入法-程序员宅基地

文章浏览阅读564次,点赞12次,收藏7次。教你如何在Android Studio 的模拟器上安装搜狗输入法实现中文输入-----建议收藏备用! 我们在使用Android Studio的过程中,肯定会用运行app,有时候app需要输入中文内容,这时候就需要中文输入法了,但是在API比较低的模拟器中,是没有中文输入法的,需要我们自己安装和配置。下面就教大家如何安装和配置搜狗中文输入法。_android模拟器安装中文输入法

推荐文章

热门文章

相关标签