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

//取消提交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>";

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

Java复习第一天---Javascript的基本知识点的更多相关文章

  1. #021 Java复习第一天

    上学期在慧河工作室学习简单过java到面向对象就停止了 现在有事情又要用到java发现全忘了..... 快速复习一下 网课PPT 计算机: 硬件 + 软件 主要硬件: cpu :cpu是一个计算机的运 ...

  2. Java复习第一天

    Day01 1.独立编写Hello World程序. public class Test{ public static void main(String[] args){ System.out.pri ...

  3. 九天学会Java,第一天,变量和数据类型,赋值和输出

    用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...

  4. javascript基础入门知识点整理

    学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...

  5. java复习面向对象(二)

    java复习面向对象(二) 1.static关键字 举例图片 静态变量 使用static修饰的成员变量是静态变量 如果一个成员变量使用了关键字static,那么这个变量不属于对象自己,而属于所在的类多 ...

  6. javascript数组的知识点讲解

    javascript数组的知识点讲解 阅读目录 数组的基本方法如下 concat() join() pop() push() reverse() shift() sort() splice() toS ...

  7. JAVA入门第一季(mooc-笔记)

    笔记相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第一季 ...

  8. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿的JavaScript学习笔记(1——理念)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. HTML 5 <details> 标签

    <details> 标签用于描述文档或文档某个部分的细节. <details> <summary>Copyright 2011.</summary> & ...

  2. linux之SQL语句简明教程---DISTINCT

    SELECT 指令让我们能够读取表格中一个或数个栏位的所有资料.这将把所有的资料都抓出,无论资料值有无重复.在资料处理中,我们会经常碰到需要找出表格内的不同资料值的情况.换句话说,我们需要知道这个表格 ...

  3. Linux脚本练习

    例1:写一个脚本,利用循环和continue关键字,计算100以内能被3整除的数之和 运行结果: 例2: 写一个脚本,利用循环和continue关键字,计算100以内能被3整除的数之和 运行结果: 例 ...

  4. 开源 iOS 项目分类索引大全

    GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义 ...

  5. ExtJs3学习资料分享

    最近在学习EXTJS3,在网上找了一些pdf的书.不过网上分享的有些书都是Ext2.0的.Ext3的比较少.有些书也不全.很多是样章.最近找到一本分享的书<ExtJS源码分析与开发实例宝典> ...

  6. spring boot 中文文档

    https://qbgbook.gitbooks.io/spring-boot-reference-guide-zh/content/VII.%20Spring%20Boot%20CLI/index. ...

  7. 使用FileSystemWatcher捕获系统文件状态

    源代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...

  8. JS中的Function对象

    Function是函数的原型,所有的函数都来源于Function,获得函数的方法有两种类型,分为动态函数和函数继承. 动态函数 创建一个Function语法: var func = new Funct ...

  9. Position详解---转

    position有四个属性值: relative absolute fixed static 下面分别讲述这四个属性. 1. relative relative属性,相对定位,我们要搞清它是相对哪个对 ...

  10. iOS开发之设置界面的抽取

    几乎每款app都会有一个设置的界面!!! 那么我们的设置界面到底要怎么写才能最方便使用呢?下面我就来说说我的想法. 1.观察原型图 2.找出相同的东西,目的是抽出一个基类模块,只要我写好了这个控制器, ...