常用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号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
随机推荐
- 洛谷 P1077 摆花
题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能超过ai盆,摆花时 ...
- 【洛谷4009】汽车加油行驶问题（SPFA乱搞）
点此看题面 大致题意:给定一个\(N*N\)的方形网格,其中1表示这个格子有油库,0表示这个格子没油库,且汽车加满油可以行驶\(k\)条网格边.如果遇到油库必须加满油并花费\(A\)元,如果\(X\) ...
- 【BZOJ1433】[ZJOI2009] 假期的宿舍（二分图匹配入门）
点此看题面 大致题意:有\(n\)个学生,其中一部分是在校学生,一部分不是,而在校学生中一部分回家,一部分不回家,并且我们用一个01矩阵表示学生之间相互认识关系.已知每个学生只能睡自己认识的人的床(当 ...
- 【HHHOJ】NOIP模拟赛 捌 解题报告
点此进入比赛 得分: \(30+30+70=130\)(弱爆了) 排名: \(Rank\ 22\) \(Rating\):\(-31\) \(T1\):[HHHOJ260]「NOIP模拟赛 捌」Dig ...
- python实现二叉树的镜像
题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...
- Python F-string 更快的格式化
Python的格式化有%s,format,F-string,下面是比较这三种格式化的速度比较 In [12]: a = 'hello' In [13]: b = 'world' In [14]: f' ...
- InstallShield Limited Edition for Visual Studio 2013 图文教程打包安装包
http://www.wuleba.com/23892.html 从Visual Studio 2012开始,微软就把自家原来的安装与部署工具彻底废掉了,转而让大家去安装使用第三方的打包工具“Inst ...
- 1043: [HAOI2008]下落的圆盘
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1725 Solved: 743[Submit][Status][Discuss] Descripti ...
- django+xadmin在线教育平台（一）
大家好,此教程为在慕学网的实战教程Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台的学习笔记,不对望指正! 使用Django+Xadmin打造在线教育平台(Python2, ...
- [Wolfgang Mauerer] 深入linux 内核架构 第十三章 系统调用
作为Linux开发爱好者,从事linux 开发有三年多时间.做过bsp移植,熟悉u-boot代码执行流程:看过几遍<linux 设备驱动程序开发>,分析过kernel启动流程,写过驱动,分 ...