与html css相比js算是一门真正意义上的编程语言，js和c语言有着非常多的相似之处，本篇文章我想从类比c语言的角度对js基础知识点进行一下复习和总结
万人之岛在身后沉默，孤单的灵魂也盛开光芒
打印：
js有两种方式打印内容一种是 alert("hello js") 可以在网页显示面向用户，另一种是 console.log("hello js") 在控制台输出面向开发人员
数据类型及强制转换：
1：js一共有六种数据类型，其中为String字符串 Number数字 Boolen布尔 Null空值 Undefined未定义 Object对象，和c语言不同之处是js全部用var关键字进行声明var a=113 var b="123" var c=true,编译器会自动识别声明类型
2：将其它类型转换为String字符串类型
方法一：var a=123 var b=a.toString(a) undefined和null无法转换
方法二：var a=123 var b=String(a)所有类型可转
3：String字符串类型
方法一：var a="123" var b=Number(a)若字符串有除了数字的字符，则b数值为NaN
方法二：var a="123px" var b=ParseInt(a)b结果为123
var a="12a456" var b=ParseInt(a)b结果为12
方法二在与css交互中更为常用
与c语言相同语法：
for循环 if语句 case语句 自增自减运算 取余数 while循环… js和c语法完全一致，直接套用即可
object用法：
object类似c语言的结构体，都是对于一整个对象的数据存储描述，差别之处在于声明方式及添加属性的方式不同
声明方式：
方法一var obj=new Object();
方法二var obj={name:"柯基吹泡泡",age:21,gender:"男"};
添加属性：obj.name="柯基吹泡泡；obj.age=21"
访问方式分为两种（经常使用方法二更为灵活）
方法一：alert(obj.name)直接打印obj的name属性
方法二：var n=name;alert(obj[n])这种方式结合函数传参使用，较为常见
函数：
js函数更加灵活，我写了一段较为灵活的函数我们来总结一下(读到这里不要略过，分析逻辑很重要！)
var obj=new Object();
obj.name="柯基吹泡泡";
obj.age=18;
function fun1(a,b){ //定义函数不需要加返回数据类型,传参不需要定义数据类型
var k="泡泡糖";
a.name+=k;
a.age+=b;
function(){ //函数可以嵌套函数
alert("我是嵌套函数")；
}
return a;//函数可以返回任意类型包括返回对象及函数本身
}
obj=fun1(obj,3);
obj.f=fun1;//函数可以当作一个object对象的属性
obj.f(obj,15);//通过自身属性函数可以改变自身属性
alert(obj.f);
定义函数不需要加返回数据类型，传参不需要定义数据类型，函数可以返回任意类型包括返回对象及函数本身，函数可以当作一个object对象的属性，函数可以嵌套函数,通过自身属性函数可以改变自身属性
数组：
简单说一下常用的方法
声明空数组：var arr=new Array()
向数组结尾添加数据：arr.push();
声明长度为10的数组：var arr=new Array(10)
返回数组长度：var k=arr.length();
访问数组索引为3：alert(arr[3])
js封装了好多关于数组的方法，例如forEach,splice等等，需要可以查一下资料
来一行分割线下面进入正题开始js操纵html css
=======================================================================
DOM的基本操作：
根据html标签id属性获取，返回值为标签对象：
var id=document.getElementId("id名称");
获取标签的文本：
alert(id.innerHTML);
根据标签类型获取,返回值为类数组：
var div=document.getElementsByTagName("div");
根据标签name属性获取（用于表单项）：
var input=document.getElementSByname("name属性");
获取表单项内容value：
alert(input.value);
获得city下的所有li标签
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
var city=document.getElementById("city");
va list=city.getElementByTagName("li");
获取city下的所有标签
<div id="city">
<p>文本</p>
<h1>文本</h1>
<a href="javascript:;">文本</a>
</div>
var city=document.getElementBy("city");
var all=city.children;
firstchild获取子元素的第一个节点
lastchild获取子元素的最后一个节点
parentNode获取父元素节点
简单的图片切换练习：
思路：先将图片所有src储存在数组中，将两个图片绑定单机响应函数，用索引num控制轮到哪张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.οnlοad=function(){
var up=document.getElementById("up");
var down=document.getElementById("down");
var arr=["a1.png","a2.png","a3.png","a4.png","a5.png"];
var num=0;j
up.οnclick=function(){
var picture=document.getElementById("picture");
if(num==0){
num=4;
picture.src=arr[num];
}else{
num--;
picture.src=arr[num];
}
}
down.οnclick=function(){
var picture=document.getElementById("picture");
if(num==4){
num=0;
picture.src=arr[num];
}else{
num++;
picture.src=arr[num];
}
}
表单选项练习：
练习源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post">
你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="qx" value="全选" />
<input type="button" id="qbu" value="全不选" />
<input type="button" id="fx" value="反 选" />
</form>
</body>
</html>下面我们要通过js来实现这个表单按钮的基本功能
实现思路：
我们观察一共有 全选 全不选 反选 三个按钮，四个兴趣勾选框，以及checkedAllBox全选/全部选勾选框
我们用flag来监听四个按钮是否全部被选，若全被选flag=1否则flag=0,初始化flag=0；
一定要注意flag是逻辑的关键
judge()函数用来监听四个按钮，一旦四个按钮全部勾选则触发checkedAllBox勾选框
1 下面实现全选按钮功能
var items=document.getElementsByName("items");
var checkedAllBox=document.getElementById("checkedAllBox");
var qx=document.getElementById("qx");
var qbu=document.getElementById("qbu");
var fx=document.getElementById("fx");
var flag=0;
qx.οnclick=function(){
checkedAllBox.checked=true;
flag=1;
all();
}
function all(){
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
} 2 实现全部选按钮
qbu.οnclick=function(){
checkedAllBox.checked=false;
flag=0;
allno();
}
function allno(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
} 3 实现反选按钮
fx.οnclick=function(){
if(flag==1){
flag=0;
checkedAllBox.checked=false;
allno();
}
else{
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
judge();
}
}
function judge(){
for(var i=0;i<items.length;i++){
if(items[i].checked==false){
flag=0;
checkedAllBox.checked=false;
break;
}
flag=1;
checkedAllBox.checked=true;
}
} 4实现checkAllBox勾选框
checkedAllBox.οnclick=function(){
if(flag==0){
flag=1;
checkedAllBox.checked=true;
all();
}
else{
flag=0;
checkedAllBox.checked=false;
allno();
}
}5 监听四个兴趣勾选框，若四个兴趣都勾选则checkAllBox同步勾选，反之checkBox不勾选
for(var i=0;i<items.length;i++){
items[i].οnclick=function(){
judge();
}
}
结点的增删改：
创建结点：document.createElement("标签名称")；
创建文本结点：document.createTextNode("文本名称")
向父标签结尾添加子结点：父结点.appendChild("标签名称")
向兄弟标签前面添加结点：父结点.insertBefore(标签名称，兄弟名称)
删除结点：父结点.removeChild("标签名称")
通过DOM方法实现插入结点功能，下面代码是一个简单的城市列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
</ul>
</body>
</html>创建标签结点和文本结点，并将文本结点添加进标签结点 标签结点添加目标标签
向city标签结尾加入文本为哈尔滨的子结点
具体实现代码
<script type="text/javascript">
window.οnlοad=function(){
var city=document.getElementById("city");
var li=document.createElement("li");
var text=document.createTextNode("哈尔滨");
li.appendChild(text);
city.appendChild(li);
}
</script>向上海标签前加入文本为哈尔滨的结点
<script type="text/javascript">
window.οnlοad=function(){
var city=document.getElementById("city");
var sh=document.getElementById("sh");
var li=document.createElement("li");
var text=document.createTextNode("哈尔滨");
li.appendChild(text);
city.insertBefore(li,sh);
}
</script>删除上海结点
<script type="text/javascript">
window.οnlοad=function(){
var city=document.getElementById("city");
var sh=document.getElementById("sh");
city.removeChild(sh);
}
</script>简便写法（不用获取父元素）
<script type="text/javascript">
window.onload=function(){
var city=document.getElementById("city");
var sh=document.getElementById("sh");
city.removeChild(sh);
}
</script>