【JS】JavaScript笔记油猴脚本

136ytr

已于 2023-09-29 07:32:04 修改

阅读量826

点赞数 1

分类专栏：笔记文章标签： javascript 笔记开发语言

于 2023-09-23 05:48:15 首次发布

本文链接：https://blog.csdn.net/qq_21049619/article/details/133192769

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

等待页面加载完成后执行代码[1]
获取DIV的属性值[2]
修改div内容[3]
改变元素的样式[4]
异常捕获[5]
根据自定义属性的值查找元素[6]
父子兄弟节点[7]
删除节点[8]
打开/关闭窗口[9、10、23、24]
定时器[11]
获取当前页面URL[12]
字符串与数字运算[13、14]
字符串常用方法(截取、替换、拼接)[15、16、17、18]
刷新页面仍保留数据[19、22]
脚本点击视频无法正常播放[20]
判断一个\<video\>元素是否正在播放[21]
向页面中添加元素[25、26]
向页面中添加JS脚本[27]
参考资料

等待页面加载完成后执行代码[1]

//在JavaScript中
window.onload=function(){
	//do something
}
 
//元素载入完成后，执行某些动作
document.getElementById("imgID").onload=function(){
	//do something
}

//在 HTML 中，通常用于 <body> 元素
<body onload="JS方法名">

获取DIV的属性值[2]

document.getElementById('mochu').getAttribute('title');

修改div内容[3]

document.getElementById('updateId').innerHTML = 'xxx';

改变元素的样式[4]

元素对象名.style.样式名="样式值"//添加或者修改
元素对象名.style.样式名=""//删除样式

注意:以上操作，操作的是HTML的style属性声明中的行类样式样式。而不是其他css代码域中的样式。

异常捕获[5]

try {
  openFile('../test.js')
} catch(e) {
  // 优雅地处理抛出的期望
}

根据自定义属性的值查找元素[6]

document.querySelector("div[dataid='222']")

父子兄弟节点[7]

//父节点
document.getElementById("test").parentNode;

//子节点
document.getElementById("test").getElementsByTagName("div");
document.getElementById("test").children[0];

//兄弟节点
document.getElementById("test").parentNode.children[1];
document.getElementById("test").previousElementSibling; //获取上一个兄弟节点
document.getElementById("test").nextElementSibling; //获取下一个兄弟节点

删除节点[8]

document.getElementById(divId).remove();

打开/关闭窗口[9、10、23、24]

window.opener=null;window.open('','_self');window.close(); //关闭

window.open('http://www.baidu.com','_blank'); //跳转到新页面显示
window.open('http://www.baidu.com','_self'); //刷新当前页面或者覆盖当前页面

location.reload(); //刷新当前文档

定时器[11]

//延时定时器 在固定时间（毫秒）后执行一次代码
setTimeout(function(){
	//do something
},1000);

//间隔定时器 按照指定周期（毫秒）执行
setInterval(function(){
	//do something
},1000);

获取当前页面URL[12]

window.location.href; /* 获取完整URL */
/* http://127.0.0.1:8020/Test/index.html#test?name=test */
 
window.location.pathname; /* 获取文件路径（文件地址） */
/* /Test/index.html */

window.location.hash; /* 获取锚点（“#”后面的分段） */
/* #test?name=test */
 
window.location.search; /* 获取属性（“?”后面的分段） */
/* ?name=test */

字符串与数字运算[13、14]

//在所有数字运算中， JavaScript 会将字符串转为数字，但是加法会进行级联
"12" + 12 = 1212;
"12" - "10" = 2;
//字符串前面有符号，没有别的东西，字符串转换成数字
+"12" + 34 = 46;

字符串常用方法(截取、替换、拼接)[15、16、17、18]

//查找索引
str.indexOf('1'); // 返回第一个字符1的下标
str.indexOf('1',5); // 以下标5开始，返回第一个字符1的下标
s.lastIndexOf('1'); // 返回最后一个字符1的下标
str.lastIndexOf('1',5); // 以下标5为终点，返回最后一个字符1的下标

//替换
str1 = str.replace("world", "js"); 

//截取
str.slice(beginIndex[, endIndex]) //如果endIndex为负数，则被看作是strLength + endIndex
str.substr(beginIndex[, length]) //如果beginIndex为负数，则被看作是strLength + beginIndex
str.substring(beginIndex[, endIndex]) //endIndex非负

刷新页面仍保留数据[19、22]

//保存数据，长期有效直到过期（设置了过期时间）
 localStorage.setItem(keyname, value); //key and value should be string.
 localStorage.getItem(keyname);

//当前会话有效，同一个域名下的所有tab都关闭了失效
sessionStorage.setItem(keyname, value); //key and value should be string.
sessionStorage.getItem(keyname);

注意: 存储的值都是字符串，只要有值就都是true，空值（''）代表的就是false

脚本点击视频无法正常播放[20]

设置volume为0后再调用play()

var video = document.getElementById("J_prismPlayer").getElementsByTagName("video")[0];
video.volume = 0;
video.play();

判断一个<video>元素是否正在播放[21]

var isVideoPlaying = !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
// !!将变量隐式转换为布尔型

向页面中添加元素[25、26]

var div = document.createElement('div');
div.innerHTML = 'your html code'; //``可创建多行文本
document.body.appendChild(div);
div.outerHTML = div.innerHTML;
//innerHTML设置或获取位于对象起始和结束标签内的HTML e.g. <h5>就是喜欢你</h5>
//outerHTML设置或获取对象及其内容的HTML形式 e.g. <div id="test"><h5>就是喜欢你</h5></div>

向页面中添加JS脚本[27]

var script = document.createElement("script");  //创建一个script标签
script.type = "text/javascript";
try {
   //IE浏览器认为script是特殊元素,不能再访问子节点;报错;
   script.appendChild(document.createTextNode(code));
}
catch (ex) {
   script.text = code;
}
document.getElementsById('test').appendChild(script);

参考资料

136ytr

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【JS】JavaScript笔记油猴脚本

目录等待页面加载完成后执行代码[1]获取DIV的属性值[2]修改div内容[3]改变元素的样式[4]异常捕获[5]根据自定义属性的值查找元素[6]父子兄弟节点[7]删除节点[8]打开/关闭窗口[9、10]定时器[11]获取当前页面URL[12]字符串与数字运算[13、14]字符串常用方法(截取、替换、拼接)[15、16、17、18]刷新页面仍保留数据[19]
复制链接

扫一扫