常用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号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
随机推荐
- 远程链接mongoDB robomongo
墙裂推荐一个软件robomongo 下载地址:https://robomongo.org/download 最初不用这个软件的时候需要shell链接mongoDB,折腾了半天结果版本不匹配 用robo ...
- 1.redis 安装
1.https://redis.io/download. 2. $ wget http://download.redis.io/releases/redis-3.2.9.tar.gz $ .tar.g ...
- kubernetes-配置管理（十一）
Secret https://kubernetes.io/docs/concepts/configuration/secret/ Secret解决了密码.token.密钥等敏感数据的配置问题,而不需要 ...
- UNC路径格式
\\192.168.3.66\c$ 访问本地网内计算机
- java内存模型原理阅读总结
Java内存模型可以理解为在特定操作协议下,对特定的内存或高速缓存进行读写访问的过程抽象.不同架构的物理计算机可以有不一样的内存模型,java虚拟机也有自己的内存模型,java虚拟机规范中试图定义一种 ...
- 51nod——2476 小b和序列（预处理 思维）
对于每一个元素,预处理出它作为最小值,两边可以作用到的最大位置.比如下标∈[0,8]的这个数组:1 8 6 2 5 4 3 8 7,1可以作用到所有区间,2可以作用到区间[1,8],第一个8可以作用到 ...
- Redis常用诊断命令
1.info 命令查看redis信息,可以指定要查看的section名 sections:Server,clients,memory,persistence,stats,replication,cpu ...
- linux替换yum源及配置本地源
linux系统安装后自带的bash源由于在国外,安装软件包的时候会非常慢,最好替换一下yum源. 关于yum源的简单介绍 yum的主要功能是更方便地添加,删除和更新rpmba ...
- opengl 学习的链接，以后需要可以再来查需要的
记录一些好的opengl学习站点,以供日后查阅: modern opengl tutorial : 一个英国的opengl学习网站 上面网站的中文版 日后发现新的再更新
- PHP PDO 使用类
PDO类 <?php class MYPDO { protected static $_instance = null; protected $dbName = ''; protected $d ...