常用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号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
随机推荐
- Hybris Enterprise Commerce Platform 服务层的设计与实现
Hybris Enterprise Commerce Platform这个系列之前已经由我的同事,SAP成都研究院Hybris开发团队的同事张健(Zhang Jonathan)发布过两篇文章了.这里J ...
- C#中？和??用法
在C#中“?”有三种用法. 1.可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空,例如:string str=null;是正确的.int i= ...
- IOS tabelView退出键盘
/** *当开始拖拽表格的时候就会调用 * */ -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { //退出键盘 [sel ...
- python 数据库操作 SQLite、MySQL 摘录
转自: http://www.cnblogs.com/windlaughing/p/3157531.html 不管使用什么后台数据库,代码所遵循的过程都是一样的:连接 -> 创建游标 -> ...
- cin对象的一些常用方法使用总结
>> 最初定义的是右移,当但是出现在 cin >>中的时候这个符号被重载了,变成了一个流操作,在用户通过键盘输入信息的时候,所有内容都会先直接存储在一个叫输入缓冲区的的地方,c ...
- 第27题：Leetcode226: Invert Binary Tree反转二叉树
翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 思路 如果根节点存在,就交换两个子树的根节点,用递归 ...
- 【前端_js】js中数字字符串之间的比较
js中字符串间的比较是按照位次优先,比较各字符的ASCII大小,包括数字字符串之间的比较. 1.console.log("1"<"3");//true 2 ...
- 【转】Mysql查询语句优化策略
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索 ...
- 【104】Maven3.5.0结合eclipse使用，提示Lambda expressions are allowed only at source level 1.8 or above错误的解决方法
错误重现 我的机器上安装了 maven 3.5.0,在 eclipse 中创建 maven 项目.pom.xml配置如下: <project xmlns="http://maven.a ...
- stark组件前戏（2）之单例模式
单,一个. 例,实例.对象. 通过利用Python模块导入的特性:在Python中,如果已经导入过的文件再被重新导入时候,python不会重新解释一遍,而是选择从内容中直接将原来导入的值拿来用. ...