首页 > 代码库 > Java复习第一天---Javascript的基本知识点

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:通经常使用来获取文本节点,注意IEW3C标准的差

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元素节点,原因是textNodeliNewEle还没有关

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>";

 

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