Javascript的基础知识点

1、Javascript的引入

（1）内嵌式

<head>

//此处为Javascript代码

</script>

</head>

2、外链接的格式

</script>

3、Javascript的关键字不能做为变量名和函数名的使用。否则会出现异常

4、变量的注意

（1）必须以字母或下画线开头，中间可以是数字、字母或下画线

（2）变量名不能包含空格、加、减等符合

（3）不能使用Javascript中的关键字作为变量名

（4）Javascript的变量名严格区分大小写的

5、变量的说明与赋值

var 变量

var ABC=1‘

可以一下子弄多个变量赋值

var a=1,b=2,c=3,

6、prompt的函数的

用于显示和提示用户的输入信息的对话框。

window.prompt(提示信息字符串，默认输入值)；

或如下所示

prompt（提示信息字符串，默认输入值）

如果用户单击提交提示框的取消按钮，返回null，单击确认按钮，则返回输入字符串的当前的显示的文本

7、alert函数

主要用于弹出警示对话框，通常用于对用户进行提示，语法格式

Window.alert（“hello world”）;

或

alert（“hello word ”）；

如果是确定按钮，那就是关闭对话框

8、console.log（）函数的

用于标准的输入输出的，即在控制台中显示输出的结果，

9、函数

假如入到重复写的代码，我们就把他弄进去一个代码块，然后这个就是函数。

在JavaScript中的，函数使用关键字function来定义，语法的格式

function 函数名（参数1，参数2，.......）{

函数体

}

</script>

10、dom的节点树

文档的树行结构，其中HTML、head、body都表示节点，一个文档的树行结构就是由各种不同的节点组成的，、

（1）每个节点树一根节点，如图HTML的元素，

（2）根节单，每一个点都有一个父亲的点

（3）每个节点都可以有许多的子节点，具有相同的父亲的节点叫做兄弟节点

11、节点的访问

（1）一个元素对象可以拥有元素节点、文本的节点、子节点或其他类型的节点，访问指定的节点的常用的方法

类型方法描述说明

访问指定的节点 getelementbyid() 获取拥有与指定的ID的第一个元素对象的引用

getelementbyname（）获取带有指定名称的元素对象集合

getelementbytagname（）获取带有指定的标签名的元素对象的集合

getelementbyclassname（）获取指定class的元素对象集合不支持 IE6到8

12、使用不同的方法可以访问HTML文档中指定ID，name、class或标签名的元素，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>指定节点操作</title>

function init(){

var element = document.getElementById("js"); //找到<li id="js">的元素

element.style.fontWeight = "bold"; //将文本加粗

var lis = document.getElementsByTagName("li"); //找到所有li元素

lis[0].style.fontSize = "24px"; //将第一个li元素的字体设为24px

步骤思路：

第一步：一般就是寻找元素

第二步：就是设置样式style的对象，接下来的第三个就是大小或者颜色或者宽度或高度

}

</script>

</head>

<ul>

<li id="js">JavaScript</li>

</ul>

</body>

</html>

13、就是访问相关的元素

引用完成一个页面的元素对象后，可以使用dom节点对象进行对元素的处理

属性说明

parentnode 元素节点的父亲点

childnodes 元素节点的子节点数组

firstchild 第一个字节点数数组

lastchild 最后一个子节点

previoussibling 前一个兄弟节点

nextsibling 后一个兄弟节点

需要注意的是

document对象是所有dom对象的访问入口，当进行节点的访问时需要首先从document对象开始

14、元素常用的操作

类型方法说明

创建节点 createlement 创建元素的节点

createtextnode 创建文本节点

节点的操作 appendchild 为当前的节点增加一个子节点（作为最后一个子节点）

insertbefore 为当前的节点增加一个子节点（插入到指定子节点之前）

removechild 删除当前的节点的某个子节点

14、元素的属性与内容的操作

类型属性方法说明

元素内容 innerHTML 获取或设置元素的HTML内容

样式的属性 classname 获取或设置元素的class属性

style 获取或设置元素的style的杨树的属性

位置属性 offsetwidth 、offsetheight 获取或设置元素的宽和高的（不含滚动）

scrollwidth scrollheight 这个是含滚动在里面

offsettop、offsetleft 获取或设置包含滚动条距离上或左边滚动的过得距离

scrolltop scrollleft 获取设置元素在网页中的坐标

属性的操作 getattribute（）获得元素的指定属性的值

setattribute（）为元素设置新的属性

removeattribute（）为元素的删除的指定的属性的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>元素属性与内容操作</title>
<script type="text/javascript">
	function init() {
 		 var test = document.getElementById("test");  //获取test元素对象
 		 test.innerHTML = "<h1>Hello,JavaScript!</h1>";  //元素内容操作
 		 test.setAttribute("style","font-size:12px;color:red;");  //设置元素的属性
 		 test.innerHTML += test.getAttribute("style")  //获得元素的style属性并显示
 	}
</script>
</head>
<body onload="init()">
  <div id="test">test</div>
</body>
</html>

15、元素的样式的操作

在操作元素的属性时，style属性可以修改元素的样式、classname属性可以修改元素的类名，通过这两种方法即可完成元素的样式操作，

（1）style属性

每个元素对象都有一个style属性使用这个属性可以动态调整元素的内嵌式样式，从而获得所需要的效果。

var     test = document.getElenmentById("test");//获得待操作的元素对象

test.style.width  = "200px";//设置样式，相当于：#test{width：200px;}

test.style.height  ="100px";   //设置样式，相当于：#test{height：100px}

test.style.backgroundcolor  = "#ff000";


var  testWidth   = test.style.width;    //获得width样式



alert（testwidth）;  //输出的结果为“200px”

2、classname属性，

元素对象的class属性用于切换元素的的类名或为元素追加类名。

var   test  = document.getelementbyid("test");//获取元素对象，<div id="test">
test.className  = "aa";   //添加样式，执行后：<div id ="test"  class="aa">
test.className   = "bb"   //添加样式，执行后：<div id ="test"  class="bb">

alert(test.className);    //获取样式，执行后输出：bb
test.className  + = "cc";    //追加样式，执行后：执行后：<div id="tesst" class="bb  cc">




test.className= test.ClassName.replace("cc","dd");


//替换样式，执行后：<div id = "test" class = "bb dd">

test.className = test.className.replace("dd"," ");


//删除dd样式，执行后，<div id =“ test” class =“bb”>

test.className =" " ; //删除所有样式

3、简单的计算器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作计算器</title>
<script type="text/javascript">
function calculate(){
	//获取数据，并将其转化为浮点型数据
	var num1 = parseFloat(document.getElementById("num1").value);
	var num2 = parseFloat(document.getElementById("num2").value);
	var oper = document.getElementById("operator").value;
	//存放输出结果
	var res = "";
	//拼接运算表达式
 	var expression= num1+oper+num2;
 	//判断输入的数据，若不是数据或是为0，都为假；否则为真
 	if(num1 && num2){
 		//执行运算表达式，求出运算结果
 		eval("res="+expression);
 	}else{
 		//判断此运算是否为除法且除数是否为0
 		if((oper == "/") && (num2 ==0)){
 			res = "除数不能为0";
 		}else if(num1 && (num2 ==0) || (num1 ==0) && num2){
 			eval("res="+expression);
 		}else if((num1 ==0) && (num2 ==0)){
 			eval("res="+expression);
 		}else{
 			res = "请输入数字";
 		}
 	}
 	//将运算结果或提示写入到form表单中
 	document.getElementById('result').value = res;
 }
 </script>
</head>
<body >
<form>
	<input type="text" id="num1" value=""/>
	<select id="operator">
		<option value="+" selected="selected">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input type="text" id="num2" value=""/>
	<input type="button" value="=" onclick="calculate()"/>
	<input type="text" id="result" readonly="true"/>
</form>	
</body>
</html>

Javascript的基础知识点

猜你喜欢