js补充笔记 1
来源：互联网 发布：福彩3d软件分析软件 编辑：程序博客网 时间：2024/06/07 09:19
1.如何放置js位置
<html>
<head>
<title>js1</title>
<script type="text/javascript">
//当整个html文档加载成功后触发window.onload事件
//事件触发时，执行后面function里的函数体
window.onload=function(){
//获取所有button节点，并取得第一个元素
var btn=document.getElementsByTagName("button")[0];
//为button的onclick事件赋值，当点击button时执行函数
btn.onclick=function(){
alert("helloworld");
}
}
</script>
</head>
<body>
<button>clickme</button>
</body>
</html>
<html>
<head>
<title>js1</title>
</head>
<body>
<button >clickme</button>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementsByTagName("button");
btn[0].onclick= function(){
alert("helloworld");
}
</script>
2。如何获取元素节点
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//1。获取id为bj 的节点
var bjnode=document.getElementById("bj");
//2.获取所有的li节点
//使用标签名获取制定节点集合
var linode=document.getElementsByTagName("li");
//制定节点的子节点
var citynode=document.getElementById("city");
var citylinode= document.getElementsByTagName("li");
//3。根据html文档的name属性名来获取制定节点的集合
var gendernode= document.getElementsByName("gender");
//ByName对ie有局限
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
gender:
<input type="radio" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female
</body>
</html>
3。获取属性节点
(1)通过id
<html>
<head>
<title>js1</title>
<script type="text/javascript">
//读写属性节点
window.onload=function(){
//1。属性节点既为某一指定节点的属性
//县获取指定的那个元素节点
var namenode =document.getElementById("name");
alert(namenode.value);
namenode.value="上硅谷";
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input type="text" name="username" id="name" value="name"/>
</body>
</html>
(2)通过元素节点的getAttributeNode
4。获取元素节点的子节点
<html>
<head>
<title>js1</title>
<script type="text/javascript">
//获取属性节点的子节点
window.onload=function(){
//1获取#city节点的所有子节点
var citynode=document.getElementById("city");
//2利用元素节点的childNodes方法(不使用)
alert(citynode.childNodes.length);
//3获取节点的li子节点
var citylinodes=citynode.getElementsByTagName("li");
alert(citylinodes.length);
//4第一个字节点和最后一个子节点
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input type="text" name="username" id="name" value="name"/>
</body>
</html>
5.文本节点
<html>
<head>
<title>js1</title>
<script type="text/javascript">
//获取文本节点
window.onload=function(){
//文本节点时元素节点的子节点
//1。获取文本节点所在元素节点
var bjnode=document.getElementById("bj");
//2.firstChild定义到文本节点
var bjtextnode=bjnode.firstChild;
alert(bjtextnode.nodeValue);
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input type="text" name="username" id="name" value="name"/>
</body>
</html>
6。节点属性
nodeName
nodeType
nodeValue
<html>
<head>
<title>js1</title>
<script type="text/javascript">
function he(){
alert("jf");
}
window.onload=function(){
//点击每个li节点度弹出其文本值
//1。获取所有li节点
var linodes=document.getElementsByTagName("li");
//2.遍历的到每一个li节点
for( var i=0;i<linodes.length;i++){
//3.为每个li节点添加onclick响应
linodes[i].onclick=function(){
//this指当前
alert(this.firstChild.nodeValue);
// alert(linodes[i].onclick.firstChild.nodeValue);
//不行因为i已经是8
}
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//点击每个li节点度，若没有^^开头则加上
//有祛出
/* var str="^^abc";
var reg=/^\^{2}/g;
alert(reg.test(str));
str=str.replace(reg,"");//去除
var str2="abc";
*/
var linodes=document.getElementsByTagName("li");
for(var i=0;i<linodes.length;i++){
linodes[i].onclick=function(){
var val=this.firstChild.nodeValue;
var reg=/\^{2}/g;
if(reg.test(val)){
val=val.replace(reg,"");
}
else{
val="^^"+val;
}
this.firstChild.nodeValue=val;
}
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
*************在文档中，任何节点都有3属性nodeType nodeName nodeValue
7。创建一个元素节点
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
//新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
window.onload = function(){
alert(1);
//1. document.createElement(elementTagName)
//新创建一个元素节点, 返回值为指向元素节点的引用
//<li></li>
var liNode = document.createElement("li");
//2. 创建 "厦门" 的文本节点
//document.createTextNode(string) 创建一个文本节点
//参数为文本值, 返回该文本节点的引用.
var xmText = document.createTextNode("厦门");
//<li>厦门</li>
liNode.appendChild(xmText);
var cityNode = document.getElementById("city");
//2. elementNode.appendChild(newChild): 为 elementNode
//新添加 newChild 子节点, 该子节点将作为 elementNode 的最后
//一个子节点.
cityNode.appendChild(liNode);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="atguigu"/>
</body>
</html>
8。创建属性节点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
* 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
* 第一个 td 子节点的文本值, 且要去除前后空格.
* 2. 若点击 "确认" , 则删除 a 节点的所在的 行
*
* 注意:
* 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
* 2. tr 的直接父节点为 tbody, 而不是 table
* 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.
*
* 为 #addEmpButton 添加 onclick 响应函数:
* 1. 获取 #name, #email, #salary 的文本框的值
* 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
* 节点价位 tr 节点的子节点
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
</tr>
* 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>
* 4. 把 3 创建的 td 也加为 tr 的子节点.
* 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
* 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.
*
*
*/
window.onload = function(){
function removeTr(aNoe){
var trNode = aNoe.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0]
.firstChild.nodeValue;
textContent = trim(textContent);
var flag = confirm("确定要删除" + textContent + "的信息吗?");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
var aNodes = document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
document.getElementById("addEmpButton").onclick = function(){
var nameVal = document.getElementById("name").value;
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value;
var nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal));
var emailTd = document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal));
var salaryTd = document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal));
var tr = document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
alert("aa");
//<td><a href="deleteEmp?id=xxx">Delete</a></td>
var aNode = document.createElement("a");
aNode.href = "deleteEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));
var aTd = document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd);
aNode.onclick = function(){
removeTr(this);
return false;
}
document.getElementById("employeetable")
.getElementsByTagName("tbody")[0]
.appendChild(tr);
//value: 用于获取 html 表单元素的值
//alert(this.value); //
//nodeValue: 用于获取文本节点的文本值.
//alert(this.nodeValue); //null
}
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
}
</script>
</head>
<body>
<center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>
Jerry
</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
11.节点替换
1。replaceChild();把一个给定父元素的一个子节点替换为另一格子节点
var reference =element.replaceChild(newChild,oldChild);
返回值是一个已被替换的子节点的引用指针
2。除了替换功能还有移动功能
3。只能完成单向替换，互换要自己写方法
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
alert(1);
//测试replaceChild
var bjnode=document.getElementById("bj");
var rlnode=document.getElementById("rl");
//替换
// var citynode=document.getElementById("city");
// citynode.replaceChild(rlnode,bjnode);
//实现节点互换
/* var citynode=document.getElementById("city");
var gamenode=document.getElementById("game");
var bjnode2=bjnode.cloneNode(true);
gamenode.replaceChild(bjnode2,rlnode);
alert(2);
citynode.replaceChild(rlnode,bjnode);
*/
replaceeach(bjnode,rlnode);
}
function replaceeach(anode,bnode){
var aparent=anode.parentNode;
var bparent=bnode.parentNode;
if(aparent && bparent){
var anode2=anode.cloneNode(true);
bparent.replaceChild(anode2,bnode);
aparent.replaceChild(bnode,anode);
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
**********city与game对应属性位置互换
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//city与game对应位置互换
var linodes=document.getElementsByTagName("li");
for(var i=0;i<linodes.length;i++){
linodes[i].index=i;
linodes[i].onclick=function(){
var targetindes=0;
if(this.index<4){
targetindes=4+this.index;
}else{
targetindes=this.index-4;
}
var temindex=this.index;
this.index=linodes[targetindes].index;
linodes[targetindes].index=temindex;
replaceeach(this,linodes[targetindes]);
}
}
}
function replaceeach(anode,bnode){
var aparent=anode.parentNode;
var bparent=bnode.parentNode;
if(aparent && bparent){
var anode2=anode.cloneNode(true);
//交换事件fuzi
anode2.onclick=anode.onclick;
//
anode2.index=anode.index;
bparent.replaceChild(anode2,bnode);
aparent.replaceChild(bnode,anode);
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
12。插入节点
1。insertBefore();把给定节点插到子节点前面
2。自定义insertSfter;
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//插入
var citynode=document.getElementById("city");
var bjnode=document.getElementById("bj");
var rlnode=document.getElementById("rl");
//citynode.insertBefore(rlnode,bjnode);
var refnode=document.getElementById("dj");
insertAfter(rlnode,refnode);
}
function insertAfter(newnode,refnode){
var parentnode=refnode.parentNode;
if(parentnode){
var lastnode=parentnode.lastChild;
if(refnode==lastnode){
parentnode.appendChild(newnode);
}else{
var nextNode = refnode.nextSibling;
parentnode.insertBefore(newnode, nextNode);
}
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="tj">天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
13.删除节点
removeChild();删除字节点
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//removeChild
/*alert("1");
var bjnode =document.getElementById("bj");
bjnode.parentNode.removeChild(bjnode);
*/
var linodes =document.getElementsByTagName("li");
for(var i=0;i<linodes.length;i++){
linodes[i].onclick=function(){
var flag=confirm("确定删除"+this.firstChild.nodeValue+"?");
if(flag){
this.parentNode.removeChild(this);
}
}
}
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
14 insertHTML属性
<html>
<head>
<title>js1</title>
<script type="text/javascript">
window.onload=function(){
//insertHTML
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//互换 #city 节点和 #game 节点中的内容.
var tempHTML = cityNode.innerHTML;
var gameNode = document.getElementById("game");
cityNode.innerHTML = gameNode.innerHTML;
gameNode.innerHTML = tempHTML;
}
</script>
</head>
<body>
<p></p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="tj">天津</li>
</ul>
<br>
<p></p>
<ul id="game">
<li id="rl" name="beijing">弘景</li>
<li>实况</li>
<li>飞车</li>
<li>魔</li>
</ul>
<br>
name:
<input onclick="he()" type="text" name="username" id="name" value="name"/>
</body>
</html>
0 0
- js补充笔记 1
- scikit-learn补充笔记1
- 【待补充】BASH学习笔记1
- 补充文献笔记[1]-Hybrid p2p botnet
- js固定表头补充
- JS的补充
- JS深刻理解补充
- node.js待补充
- JS补充学习
- JS之JQuery补充
- 薛开宇caffe学习笔记的补充笔记1
- Spring学习笔记 补充
- Guice笔记_补充
- 学习笔记补充
- wpf学习笔记补充
- WPF笔记--Binding补充
- 基础补充笔记
- git笔记--补充
- selinux对文件的控制
- Android触摸手势
- React Native error: Raw “ ” must be wrapped in an explicit <Text> Component
- 安装第三方工具对redis数据库进行导出或导入
- VUE2.0不可忽视的很多变化
- js补充笔记 1
- haproxy 4层和7层负载
- linux下基于libRTMP的接收流媒体的程序
- Oracle ADDM性能诊断利器及报告解读
- linux 防火墙设置及查看
- 分析服务升级数据库脚本编码问题
- ASSIGN COMPONENT <comp> OF STRUCTURE <s> TO <FS>.
- 斗地主AI算法——第十四章の主动出牌(3)
- selenium的chromedriver与chrome浏览器的对应关系表
