常用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号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
随机推荐
- Redis常用特性
发布订阅 ·服务器状态在pubsub_channels字典保存了所有频道的订阅关系:SUBSCRIBE命令负责将客户端和被订阅的频道关联到这个字典里面,而UNSUBSCRIBE命令则负责解除客户端和被 ...
- UVA - 1639 Candy （概率，精度）
X表示剩下的糖数量,如果最后打开的是p对应的盒子.划分:Xi表示剩下i个糖,最后一次选的概率为p, 前面的服从二项分布.根据全概率公式和期望的线性性,求和就好了. 精度处理要小心,n很大,组合数会很大 ...
- 【BZOJ3106】[CQOI2013] 棋盘游戏（对抗搜索）
点此看题面 大致题意: 在一张\(n*n\)的棋盘上有一枚黑棋子和一枚白棋子.白棋子先移动,然后是黑棋子.白棋子每次可以向上下左右四个方向中任一方向移动一步,黑棋子每次则可以向上下左右四个方向中任一方 ...
- tableViewcell上放定时器
tableviewcell上的定时器: 1.创建一个管理定时器的TimerManger类, TimerManger.h #import <Foundation/Foundation.h> ...
- vue组件 $children,$refs，$parent的使用
如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...
- PAT (Basic Level) Practise （中文）- 1003. 我要通过！(20)
http://www.patest.cn/contests/pat-b-practise/1003 “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入 ...
- Oracle grant connect, resource to user语句中的权限
博主在 Oracle 11g r2上测试(测试日期:2017.10.30): 用sys登陆到oracle中,执行以下两条语句: select * from role_sys_privs WHERE R ...
- Nginx学习记录(一)
1. 什么是nginx Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试nginx能够支支 ...
- vue实现tab切换功能精简版
<template> <div> <p class="tabs" v-for="(list,index) in lists" :c ...
- 【前端_js】Chrome禁止缓存的方法
在前端开发中,浏览器缓存使得我们改了代码后页面不变,得经常手动清理缓存. 1.按如下操作即可禁用浏览器缓存, 这种方法基本能够做到完全禁止缓存,然而缺点是必须要将开发模式一直打开,占用屏幕空间.而且, ...