常用JS整理
目录
1 事件
a addEventListener--绑定事件
b removeEventListener--解绑事件，只能解开addEventListener绑定的事件
2 JS获取节点信息
a byTagName,byName,byId
b parentNode
c childNodes
d firstChild
e lastChild
f nodeName,nodeType
g nextSibling--下一个兄弟节点
h previousSibling--上一个兄弟节点
3 JS对节点进行增删改
a createElement
b removeChild
c appendChild
4 小应用
a 触发事件后,DIV可编辑(contentEditable)
b 触发事件后，在DIV里面写入下拉框(createElement,appendChild,addEventListener,removeEventListener)
c 触发事件后,更变原有节点的类型(replaceChild)
一、事件
1 获得键盘按键对应的keyCode
document.onkeydown = function(event){
alert("您按的键对应的keyCode: "event.keyCode);
}
2 键盘按键触发事件
按上下左右触发事件
<script type="text/javascript">
document.onkeydown = function(event) {
if (event.keyCode == ) //up
alert("up");
if (event.keyCode == ) //down
alert("down");
if (event.keyCode == ) //left
alert("left");
if (event.keyCode == ) //right
alert("right");
}
</script>
3 获得光标所在位置的网页X,Y坐标
<script type="text/javascript">
document.onmousedown = function(event) {
x = event.clientX;
y = event.clientX;
alert("X坐标: " + x + ", Y坐标: " + y)
}
</script>
4 获得光标所在位置的屏幕X,Y的坐标
<script type="text/javascript">
document.onmousedown = function(event) {
x = event.screenX;
y = event.screenY;
alert("X坐标: " + x + ", Y坐标: " + y)
}
</script>
5 动态绑定事件（addEventListener，注意给对象添加事件的时候对象得先初始化）
<html>
<head>
<script type="text/javascript">
function test(){
var b1 = document.getElementById("button1");
b1.addEventListener("click",t,false); //动态给button1 绑定t()函数
}
function t(){
alert("ok");
} </script>
</head> <body>
<input id="button1" type="button" value="test1">
<input id="button2" type="button" value="test2" onclick="test()">
</body>
</html>
6 动态解除绑定（RemoveEventListener方法只能移除addEventListener添加的事件，注意给对象添加事件的时候对象得先初始化）
<html>
<head>
<script type="text/javascript"> function test(){
var b1 = document.getElementById("button1");
alert("移除button1的事件");
b1.removeEventListener("click",t,false);
}
function t(){
alert("button1事件");
}
</script>
</head> <body>
<input id="button1" type="button" value="test1" >
<input id="button2" type="button" value="test2" onclick="test()">
</body> <script type="text/javascript">
var b1 = document.getElementById("button1");
b1.addEventListener("click",t,false);
</script>
</html>
二 JS获取节点
HTML文本
<body>
<div>
<p id="pid" name="pname">pNode</p>
<a id="aid" name="aname">aNode</a>
</div>
<input type="button" value="test" onclick="test()">
</body>
1 byTagName,byName,byId 三种常用获取HTML对象的方式
<script type="text/javascript">
function test() {
var byTag = document.getElementsByTagName("p");
var byName = document.getElementsByName("pname");
var byId = document.getElementById("pid");
alert(byTag[].innerHTML);
alert(byName[].innerHTML);
alert(byId.innerHTML);
}
</script>
2 获取父节点
function test() {
var pNode = document.getElementById("pid");
parentNode=pNode.parentNode;
alert(parentNode);
}
3 获取全部的子节点
function test() {
var divNode = document.getElementsByTagName("div");
childNodes = divNode[0].childNodes;
for (i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeName != "#text") //去除FF浏览器空节点
alert(childNodes[i].nodeName);
}
}
4 获取第一个子节点
function test() {
var divNode = document.getElementsByTagName("div");
childNode=divNode[].firstChild;
alert(childNode);
}
5 获取最后一个子节点
function test() {
var divNode = document.getElementsByTagName("div");
childNode=divNode[].lastChild;
alert(childNode);
}
6 向下获取获取兄弟节点 ---->由于会存在回车、空格节点，所以这里做了一个循环判断，不知道有没有更好的办法（FF浏览器）
function test() {
var pNode = document.getElementById("pid");
for (; pNode.nextSibling != null;) {
if (pNode.nextSibling.nodeName != "#text")
alert(pNode.nextSibling.nodeName);
pNode = pNode.nextSibling;
}
}
7 向上获取兄弟节点
function test() {
var aNode = document.getElementById("aid");
for (; aNode.previousSibling != null;) {
if (aNode.previousSibling.nodeName != "#text")
alert(aNode.previousSibling.nodeName);
aNode = aNode.previousSibling;
}
}
三、 JS对节点进行增删改
HTML
<body>
<div>
<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td><a href="http://www.baidu.com">baidu</a></td>
<td>td2</td>
</tr>
</table>
</div>
<input type="button" value="test" onclick="test()">
</body>
1 修改<a>标签的内容
function test() {
var aNode = document.getElementsByTagName("a")[];
aNode.href="http://www.sina.com";
aNode.innerHTML="sina";
}
2 在body处新增一个P标签
function test() {
var p = document.createElement("p");
p.innerHTML = "ppp";
b = document.getElementsByTagName("body")[0];
b.appendChild(p);
}
3 新增一个单元格
function test() {
var td = document.createElement("td");
td.innerHTML="tdtd";
tr1 = document.getElementsByTagName("tr")[];
tr1.appendChild(td);
}
4 删除一个单元格
function test() {
var td = document.getElementsByTagName("td")[];
tr1 = document.getElementsByTagName("tr")[];
tr1.removeChild(td);
}
5 删除一行单元格（其实就是删除了一个父节点）
function test() {
var td = document.getElementsByTagName("td")[];
tr1 = document.getElementsByTagName("tr")[];
tr1.parentNode.removeChild(tr1);
}
四、 小应用
1 触发事件后DIV可编辑
<html>
<head>
<script type="text/javascript">
function test(obj) {
obj.contentEditable=true;
}
</script>
</head>
<body>
<table border="">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td><div onclick="test(this)">点我修改</div></td>
<td><div onclick="test(this)">点我修改</div></td>
<td><div onclick="test(this)">点我修改</div></td>
</tr>
</table>
</body>
</html>
2 触发事件后，在DIV里面写入下拉框
<html>
<head>
<script type="text/javascript">
var select;
var option1;
var option2;
function test() {//把新增的节点挂在div下面
obj = document.getElementById("d1");
obj.innerHTML="";
createSelectNode();
obj.appendChild(select);
d.removeEventListener("click", test, false);
} function createSelectNode() {//新建select和option节点
select = document.createElement("select");
option1 = document.createElement("option");
option2 = document.createElement("option");
option1.innerHTML = "option1";
option2.innerHTML = "option2";
select.id="slt";
select.appendChild(option1);
select.appendChild(option2);
} </script>
</head>
<body>
<table border="">
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td><div id="d1" >点我修改</div></td>
<td>
<div>
<select>
<option>option1</option>
<option>option2</option>
</select>
</div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
d = document.getElementById("d1");
d.addEventListener("click",test,false); //初始化绑定test方法
</script>
</html>
3 更变原有节点的类型
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<script type=text/javascript>
function test(){
var newNode=document.createElement("input");
newNode.type="text";
var oldNode=document.getElementsByTagName("p")[];
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</head>
<body>
<p>我是P[]节点</p>
<p>我是P[]节点</p>
<p>我是P[]节点</p>
<br/>
<input type="button" value="test" onclick="test()">
</body>
</html>
常用JS整理的更多相关文章
- 前端常用js脚本
常用js整理 //获取Url中的参数值 function getQueryString(name) { var reg = new RegExp("(^|&)" + nam ...
- 常用js方法整理common.js
项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...
- 原生JS研究：学习jquery源码，收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- javascript中字符串常用操作整理
javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...
- api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- NiosII常用函数整理
NiosII常用函数整理 IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏 ...
- 常用js方法
function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...
- 常用JS正则表达式
常用JS正则表达式 收集一些常用的JavaScript正则表达式匹配规则,比如匹配电话号码.Email.中文字符.身份证号.邮编.QQ号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
随机推荐
- IE的Trident引擎下实现C++和Javascript相互调用
我们知道实现C++和Javascript通讯有下表5种接口: 引擎 编写语言 API接口 C.C++与JavaScript交互(变量.函数.类) vc2005编译静态库的大小 示例EXE的大小 执行. ...
- 【BZOJ1076】[SCOI2008] 奖励关（状压DP）
点此看题面 大致题意:总共有\(n\)个宝物和\(k\)个回合,每个回合系统将随机抛出一个宝物(抛出每个宝物的概率皆为\(1/n\)),吃掉一个宝物可以获得一定的积分(积分可能为负),而吃掉某个宝物有 ...
- 2017.12.6 计算机算法分析与设计---------Fibonacci数列
(1)题目: 无穷数列1,1,2,3,5,8,13,21,34,55,--,称为Fibonacci数列.它可以递归地定义为: 第n个Fibonacci数可递归地计算如下: int fibonacci( ...
- linux分区之ext2,ext3,ext4,gpt
linux分区之ext2,ext3,ext4,gpt 2013-07-10 12:00:24 标签:ext3 gpt 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明 ...
- VS Code 用户自定义代码片段(React)
VS Code 用户自定义代码片段(React) .jsxReact组件模板:javascriptreact.json { "Import React": { "pref ...
- node第一天
一.主要执行的文件命名一般为main.js var aModule =require('./a.js');//相对路径 var aModule =require('a.js');//专门从node_m ...
- 抽屉head部分，hover应用，鼠标放上变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Date.prototype.Format---对Date的扩展
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...
- 一次完整的HTTP请求需要的7个步骤
HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1:建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...
- vue axios请求频繁时取消上一次请求
一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求 ...