Java温习第一天-Javascript的基本知识点
1、HelloWord：
2、基础语法：
3、嵌入HTML
借助window.onload事件在整个窗口加载完成之后执行程序代码
4、事件驱动：
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全选全不选的练习：
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节点的属性：
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);
//取消提交按钮的默认行为 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>";
（第一天的复习，让我感觉自己要学的东西真的还有很多很多，希望每天带着之前实训内容慢慢一点点的复习，水滴石穿，厚积而薄发！！！）
- 1楼lygscg123昨天 21:40
- 好！！！