Java复习第一天---Javascript的基本知识点

时间：2024-01-12 17:52:02

1、HelloWord：

Java复习第一天---Javascript的基本知识点

2、基础语法：

Java复习第一天---Javascript的基本知识点

3、嵌入HTML

借助window.onload事件在整个窗体载入完毕之后运行程序代码

4、事件驱动：

Java复习第一天---Javascript的基本知识点

5、DOM操作

5、1 查找元素节点

5.1.1 依据id值

方法：document.getElementById(id值) 获取到的是一个元素节点

var bj = document.getElementById("bj");

alert(getText(bj));

5.1.2 依据标签名

方法：document.getElementsByTagName(标签名) 获取到的是指定标签名的一组元素节点

var lis = document.getElementsByTagName("li");

alert(lis.length);

//还有一种使用方法：

var city = document.getElementById("city");

var cities = city.getElementsByTagName("li");

alert("cities="+cities.length);

5.1.3 依据name属性

方法：document.getElementsByName(name值) 获取到的是指定name值的一组元素节点

var genders = document.getElementsByName("gender");

//alert(genders.length);

var nameText = document.getElementsByName("name")[0];

alert(nameText.value);

5.1.4 依据兄弟关系

var android = document.getElementById("android");

var next = android.nextSibling;

alert(getText(next));

var prev = android.previousSibling;

alert(getText(prev));

5.2 操作属性

5.2.1 直接读写

var username = document.getElementById("username");

读取value属性

alert(username.value);

读取type属性

alert(username.type);

读取id属性

alert(username.id);

username.value = "new value";

username.type = "radio";

5.2.2 通过属性节点读写

首先获取属性节点，再通过nodeValue读写其值

var attrNode = username.getAttributeNode("value");

alert(attrNode.nodeValue+"~");

attrNode.nodeValue = "new value ~";

5.3全选全不选的练习：

Java复习第一天---Javascript的基本知识点

Java复习第一天---Javascript的基本知识点

Java复习第一天---Javascript的基本知识点

Java复习第一天---Javascript的基本知识点

Java复习第一天---Javascript的基本知识点

Java复习第一天---Javascript的基本知识点

5.4 获取子节点

5.4.1 推断是否存在子节点

推断一个节点是否有子节点

alert("city:"+city.hasChildNodes());

var br = document.getElementsByTagName("br")[0];

alert("br:"+br.hasChildNodes());

5.4.2 获取所有子节点

var childs = city.childNodes;

W3C:包含空格和换行

IE8:不包含空格和换行

alert(childs.length);

5.4.3 获取第一个子节点

firstChild:通经常使用来获取文本节点，注意IE和W3C标准的差异

var bj = document.getElementById("bj");

var first = city.firstChild;

alert(first);

5.4.4 获取最后一个子节点

var last = city.lastChild;

alert(last);

5.4.5 获取指定标签名的子节点

使用父节点.getElementsByTagName()

var city = document.getElementById("city");

var cities = city.getElementsByTagName("li");

alert(cities.length);

5.5节点的属性：

Java复习第一天---Javascript的基本知识点

5.6 获取节点的文本内容

获取文本节点的父节点

var bj = document.getElementById("rl");

父节点.firstChild

var textNode = bj.firstChild;

alert(textNode.nodeName+" "+textNode.nodeType);

文本节点.nodeValue

alert(textNode.nodeValue);

5.7练习2：单击li弹出文本内容

获取所有的li节点

var liNodes = document.getElementsByTagName("li");

//遍历

for(var i = 0; i < liNodes.length; i++){

//绑定单击响应函数

liNodes[i].onclick = function(){

//弹出文本内容

//在事件响应函数中使用this代表当前正在被操作的对象

alert(this.firstChild.nodeValue);

}

}

5.8练习3：单击li显示隐藏“^_^”

正則表達式

258406984@qq.com

aaaabbbaaaa /b{3}/gi

var text = "aabbbaaa";

var reg = /b{3}/g;

//正則表達式对象.test(文本值) 检測文本值是否符合正則表達式中规定的规则，返回布尔值

alert(reg.test(text));

//aabbbaaa aaNNNaaa

//字符串.replace(正則表達式对象,新文本) 将字符串中匹配正則表達式的部分替换为新文本

text = text.replace(reg,"NNN");

alert(text);

var content = "^_^content";

var reg = /^\^_\^/g;

alert("~"+reg.test(content));

alert("content="+content);

content = content.replace(reg,"");

alert("content="+content);

//点击每一个li，若文本值不是以“^_^”开头则加上“^_^”，若是则去除

var liNodes = document.getElementsByTagName("li");

for ( var i = 0; i < liNodes.length; i++) {

liNodes[i].onclick = function() {

var reg = /^\^_\^/g;

var text = this.firstChild.nodeValue;

if (reg.test(text)) {

text = text.replace(reg, "");

} else {

text = "^_^" + text;

}

this.firstChild.nodeValue = text;

}

}

5.9创建节点

将形如<li>广州</li>这样一个节点加入�到#city下面

//1.创建文本节点

//方法：document.createTextNode("文本值")

var textNode = document.createTextNode("广州");

//2.创建li元素节点

//方法：document.createElement("标签名")

var liNewEle = document.createElement("li");

//3.把文本节点加入�进li元素节点，原因是textNode和liNewEle还没有关系

liNewEle.appendChild(textNode);

//4.把填充好的li加入�进#city

var city = document.getElementById("city");

//假设不加入�的话，新创建出来的节点不会出如今页面上，仅仅是存在于当前文档的上下文中

city.appendChild(liNewEle);

5.10练习4：依据用户输入加入�节点

//功能：依据用户输入动态加入�节点

var submitBtn = document.getElementById("submitBtn");

submitBtn.onclick = function(){

//1.获取用户输入

//(1)获取用户选择的类型，假设没有选择就提示

var radios = document.getElementsByName("rType");

var rType = null;

for(var i = 0; i < radios.length; i++){

if(radios[i].checked){

rType = radios[i].value;

}

}

if(rType == null){

alert("请你选择类型");

return false;

}

//(2)获取用户输入的文本，假设没有输入就提示

var liContentIpt = document.getElementsByName("liContent")[0];

//去掉文本框输入内容的前后空格

var liContent = myTrim(liContentIpt.value);

//把处理过的文本内容写回文本框

liContentIpt.value = liContent;

if(liContent == ""){

alert("请您输入内容");

return false;

}

//2.加入�节点

//(1)依据用户选择的类型决定加入�到#city还是#game下面

var ulEle = document.getElementById(rType);

//(2)将用户输入的内容组装成：<li>用户输入的文本值</li>

var textNode = document.createTextNode(liContent);

var liEle = document.createElement("li");

liEle.appendChild(textNode);

//(3)添加

ulEle.appendChild(liEle);

//取消提交button的默认行为 return false

return false;

}

5.11替换节点

var city = document.getElementById("city");

var bj = document.getElementById("bj");

/* var textNode = document.createTextNode("广州");

var liNewEle = document.createElement("li");

liNewEle.appendChild(textNode); */

var rl = document.getElementById("rl");

alert("要换掉啦！");

city.replaceChild(rl,bj);

5.12 插入节点

var city = document.getElementById("phone");

var bj = document.getElementById("android");

var textNode = document.createTextNode("广州");

var liNewEle = document.createElement("li");

liNewEle.appendChild(textNode);

alert("要插入啦！");

city.insertBefore(liNewEle,bj);

function insertAfter(newNode,targetNode){

//1.推断目标节点是不是最后一个子节点：lastChild

//获取targetNode的父节点 获取父节点的方法：节点.parentNode

var parentNode = targetNode.parentNode;

var lastChild = parentNode.lastChild;

if(targetNode == lastChild){

//假设是，则运行父节点.appendChild(newNode)

parentNode.appendChild(newNode);

}else{

//假设不是，则找到目标节点的下一个兄弟节点

var nextSibling = targetNode.nextSibling;

//运行parentNode.insertBefore(newNode,下一个兄弟节点)

parentNode.insertBefore(newNode,nextSibling);

}

}

5.13删除节点

var city = document.getElementById("city");

var bj = document.getElementById("bj");

alert("要删除啦！");

//父节点.removeChild(要删除的节点) 返回一个指向被删除的节点的指针

var delEle = city.removeChild(bj);

alert(delEle.firstChild.nodeValue);

var game = document.getElementById("game");

var gameParent = game.parentNode;

//当删除一个节点时，它以下的子节点也会被一同删除

gameParent.removeChild(game);

5.14innerHTML属性

var city = document.getElementById("city");

alert(city.innerHTML);

city.innerHTML = "<li>淮阴</li>";

（第一天的复习，让我感觉自己要学的东西真的还有非常多非常多，希望每天带着之前实训内容慢慢一点点的复习，水滴石穿，厚积而薄发！！！）

相关文章