Js基础知识
一、Javascript是什么?
被设计用来向 HTML 页面添加交互行为
一种脚本语言(脚本语言是一种轻量级的编程语言)
通常被直接嵌入 HTML 页面
是一种解释性语言(就是说,代码执行不进行预编译)
二、javascript 与html 的结合方式
js与html的结合方式主要有两种
1,文件内结合方式:<script type="text/javascript">js代码</script>
2,文件外记在js文件<script type="text/javascript" src="test.js"></script>
css与html文件结合的方式:
1,文件内部样式表<style type="text/css">样式代码</style>
2,外部样式表<link rel="stylesheet" type="text/css" href="css_3.css" />
明显js用src引用文件地址;css href一用,我认为应该把js跟css html 作为一体的就是网页 网页就应该包含这些。
这些代码都是由浏览器来解析的。而不是服务器,所以说网页对于不同的浏览器有不同的显示,这就是兼容性。
三、Javascript 语法
虽然说是若类型的语言js的逻辑性跟java等面向对象的语言差不多,js也是区分大小写的。
1、变量的声明
js的全部变量可以用var来定义,var相当于java的object 可以说是所有数据类型的基类吧,但是java语言是需要编译的
因此java不允许这样的代码:Object obj =34;int num =obj+56;这样编译的时候会出错的,而js是解释性的语言所以js不用编译直接交给浏览器运行就行
因此js允许这样的代码var obj=34;var num=obj+67;当处理到第二段代码时这时才确定obj的类型是int类型,
也就是当执行程序的时候才确定类型,因此我们也可以这样写var obj=34;var str=obj+"hah";这样的话浏览器就将变量obj当成字符串来处理了。
也就是说 网页中的任何元素都可以用var来声明的。
如果变量没有赋值或没有声明,默认值为:undefined
其实js是有数据类型的即在运行的时候它将会根据环境的到变量的数据类型然后处理数据(运行的时候)当运行的时候它就会处理该处理的数据类型
js原始数据类型:
number :数字
string :字符串,使用引号引起(单引号或双引号)
boolean :逻辑类型 true false
null :代表的是空,一般用于引用类型赋默认值
undefined :未定义,我们在使用变量时,这个变量没有声明就使用了//这个变量还没定义
如果变量没有声明,改变量将自动声明
例如:x = "abc"; //之前没有声明,可以直接使用
如果重复声明变量,变量不会被重置或清除
例如:var x = "abc"; var x; alert(x); //结果仍是abc
2、js的运算符没什么好说的主要记住的就是 "=="跟"==="双等号是只比较数值而不比较数据类型 而后者不仅比较数值还比较数据类型
例子:8=="8" 返回true 8==="8"返回false
3、函数(方法)
格式:
function 函数名(形式参数...)
{
执行语句;
return 返回值;
}
注意: 1、函数是多条执行语句的封装体,只有被调用才会被运行。
2、函数的执行,只要写了函数名后面跟一对小括号,该函数就会运行-----注意:我们js动态绑定事件的时候不能写括号只要写括号就会
在绑定的时候执行,但是在html代码的事件中添加处理方法的时候应该加括号,应为只有当html事件触发的时候才会去通知它此时它就执行
3、调用有参数的函数,但没有给其传值,函数一样可以运行
4、调用没有参数的函数,给其传值,该函数也一样运行。-------注意:运行函数的时候js默认会传参数的他会传当前调用该参数的对象
(1)网页中比如<input type="button" onclick="fn_click(this);" /> 此时html传的就是input这个标签在fn_click函数中可以设置参数接受
<script type="text/javascript">
function fn(obj){
alert(obj.aa);
}
</script>
<input type="button" aa="aaaaaaaaaa" value="提交" onclick="fn(this);"/>
运行结果:aaaaaaaaaa
(2)js中动态绑定事件的时候,执行该参数的时候不用写传入参数,因为只要加括号写传入参数函数就会执行,传入参数就可以在运行函数是this直接调用
<script type="text/javascript">
function init(){
document.getElementById("button01").onclick=fn;
}
function fn(){
alert(this.aa);
}
</script>
</head>
<body onload="init();">
<input type="button" id="button01" aa="aaaaaaaaaa" value="提交"/>
也就是说只要在js中绑定事件就不用();直接函数名即可,而在html代码中用()激活函数运行;
4、js对象
Array new Array();返回新创建并被初始化了的数组
属性:length常用;
Boolean
Date new Date()
方法:getTime()
Math
Number
String
方法:substr(start,length)在字符串中抽取从 start 下标开始的指定数目的字符
substring(start,stop)提取字符串中介于两个指定下标之间的字符
match(regexp)在字符串内检索指定的值,或找到一个或多个正则表达式的匹配
RegExp
Global
详情信息查api w3c
5、js全局函数(相当与java的static修饰的函数直接调用就行)
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
escape() 对字符串进行编码。
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。 (常用)
getClass() 返回一个 JavaObject 的 JavaClass。
isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。 (常用)
Number() 把对象的值转换为数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。(常用)
String() 把对象的值转换为字符串。 String(object)
unescape() 对由 escape() 编码的字符串进行解码。
四、Javascript 操作html元素
每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
也就是说在浏览器解析html的时候就生成了dom树,浏览器解析html的方式是dom方式,我们不用自己解析,若是想修改html的元素我们
只是操作已经存在的dom然后将内存修改好的写如到当前浏览器解析的文件,
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
1,dom介绍
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。
也就是说dom只是操作文档的一种方式;
2,名词解析
HTML 文档中的每个成分都是一个节点。
HTML DOM 的这样规定:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
HTML 文档中的所有节点组成了一个文档树(或节点树)
节点彼此间都存在关系
除文档节点之外的每个节点都有父节点
大部分元素节点都有子节点
当节点分享同一个父节点时,它们就是同辈(同级节点或兄弟节点)
3,节点访问
节点信息:属性 直接"。" 元素.backgroundcolor="red";文本节点 元素.innerHTML 可以设置可以获取
父子关系:getElementById() 通过HTML元素的Id属性获得第一个对象Element id值不能重复
getElementsByName() 通过HTML元素的Name属性获得对象集合 name值可以重复
getElementsByTagName() 通过HTML元素(标签)名称获得对象集合 标签名称可以重复
childNodes() 全部节点
增删改:createElement(标签名)
removeChild(子节点)
元素:setAttribute("属性名称","属性值")
getAttribute("属性名称","属性值")
文本:innerHTML,
dom解析方式只能由父节点删除子节点
var x=document.getElementById("td01");
x.parentNode.removeChild(x);
注意:如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序
五:最后事例
模拟注册页面级联三级地址
说明:里面的市县级联写的有点代码浪费,时间紧急就没去修正
http://pan.baidu.com/s/1gdqp9lh