javaweb(02): JavaScript基础知识

JavaScript简介

为什么出现JavaScript

Javascript是什么

JavaScript和Java的关系？

就像卡巴斯基和巴基斯坦一样，有个基巴关系···

JavaScript版的hello world

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hellojs</title><script type="text/javascript">window.onload = function () {let btn = document.getElementById("btn1");btn.onclick = function () {alert("hello,word!");}}</script>
</head>
<body>
<button id="btn1">hello</button>
</body>
</html>

基础语法

变量

声明

使用var关键字声明变量，不需要指定数据类型。格式：var 变量名

数据类型

五种原始类型： number String boolean null undefined（声明未赋值）

对象：object

变量在使用过程中可以接收不同类型的值

var num1;
num1 = 1;
num1 = "1";
num1 = true;

判断一个变量的类型： typeof；如 alert（typeof num1）

数组

数组定义的格式

var 数组名 = []; // 空数组

var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

函数

声明与调用

方式一：

  function sum(a,b) {alert(a+b);}sum(1,2);//调用

方式二：

 var sum = function (a,b) {alert(a+b);}sum(1,2);

函数声明的注意点：

在js中方法的唯一标识就是方法名，在js中没有方法重载，调用方法的时候参数是可以选传的；
在 JS 中函数的重载会直接覆盖掉上一次的定义

对象

创建对象的两种方式及使用属性方法

       //方式一：var obj = new Object();//方式二：var obj2 = {};//方式三：var obj = {interest: "football", run: function () {alert("run,run,run");}};//动态向对象中添加属性obj2.name = "八戒";//获取属性值：对象.属性alert(obj2.name);//动态向对象中添加方法obj2.work = function () {alert("sleep,eat");}//调用对象的方法：obj2.work();

事件

什么是事件

常用的事件

事件响应方式

1.在标签事件属性中编码

<button id = "btn" onclick = "alter('hello')">I'm button
</button>

2.动态绑定事件

var button = document.getElementById("btn")
button.onclick = function(){alert("hello");
}

动态为元素绑定事件：

找到元素；

为元素相应的事件属性赋值一个方法，如onclick；

当事件发生以后浏览器就会自动调用。

window.onload:浏览器加载完成整个页面的时候调用后面的方法

加载方式

方式一：写在HTML标签内的事件属性上

写在HTML标签内的事件属性上，结构与行为耦合，不推荐

<button onclick = "alert('hello')">hello
</button>

方式二：写在script标签里

写在head里面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {var btn = document.getElementById("btnId");alert(btn);}</script>
</head>
<body>
<button id="btnId">hello</button>
</body>
</html>

写在body闭合之前

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btnid">hello</button>
<script type="text/javascript">var btn = document.getElementById("btnid");alert(btn);
</script>
</body>
</html>

方式三：引入外部文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
<button id="btnn">hello</button>
<script type="text/javascript" src="abc.js"></script>
</body>
</html>

DOM

什么是DOM

树形结构

节点

节点：每一个元素都是节点

节点分为父节点、子节点、祖先节点、后代节点、兄弟节点

节点的分类

节点的属性

所有的节点（封装好的对象），都有三个属性：

nodeName：节点名
nodeType：节点类型所有节点的nodeType值都会返回一个整数
nodeValue：节点值

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

document

document对象

document对象的常用方法

注意点：

节点的常用属性和方法

常用方法

属性

属性名	描述
childNodes	获取当前节点的所有子节点
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
parentNode	获取当前节点的父节点
nextSibling	获取当前节点的下一个节点
previousSibling	获取当前节点的上一个节点
className	用于获取或设置标签的 class 属性值
innerHTML	表示获取/设置起始标签和结束标签中的内容
InnerText	表示获取/设置起始标签和结束标签中的文本

DOM查询示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">window.onload = function(){//1.查找#bj节点var btn01Ele = document.getElementById("btn01");btn01Ele.onclick = function () {var bj = document.getElementById("bj");alert(bj.innerText);}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerText);}};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var names = document.getElementsByName("gender");for (var i = 0; i < names.length; i++) {alert(names[i].value);}};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){var city = document.getElementById("city");var cityli = city.getElementsByTagName("li");for (var i = 0; i < cityli.length; i++) {alert(cityli[i].innerHTML);}};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){var city = document.getElementById("city");var preEle = city.childNodes;for (var i = 0; i < preEle.length; i++) {alert(preEle[i].innerText);}};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){var phone = document.getElementById("phone");var first = phone.firstChild;alert(first.innerText);};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){var bjj = document.getElementById("bj");var father = bjj.parentElement;alert(father.innerText)};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){var ad = document.getElementById("android");var bro = ad.previousElementSibling;alert(bro.innerText);};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){var us = document.getElementById("username");alert(us.value);};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){document.getElementById("username").value = "desert";};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){alert(document.getElementById("bj").innerText)};};
</script>
</head>
<body>
<div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</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 /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div>
</div>
<div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

DOM增删改方法（了解）

后面用jquery进行增删改比较方便

javaweb(02) JavaScript基础知识相关推荐

JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
深入浅出Pytorch：02 PyTorch基础知识
深入浅出Pytorch 02 PyTorch基础知识内容属性:深度学习(实践)专题航路开辟者:李嘉骐.牛志康.刘洋.陈安东领航员:叶志雄航海士:李嘉骐.牛志康.刘洋.陈安东开源内容:http ...
JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
js java用var_Java基础———JavaScript基础知识
原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
Javascript基础知识之四（常用数组方法）
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...

javaweb(02) JavaScript基础知识