Js基础知识

时间 2019-12-09

标签基础知识栏目 JavaScript 繁體版

原文原文链接

1、Javascript是什么?javascript

被设计用来向 HTML 页面添加交互行为css

一种脚本语言（脚本语言是一种轻量级的编程语言）html

一般被直接嵌入 HTML 页面java

是一种解释性语言（就是说，代码执行不进行预编译）正则表达式

2、javascript 与html 的结合方式编程

js与html的结合方式主要有两种api

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 做为一体的就是网页网页就应该包含这些。

这些代码都是由浏览器来解析的。而不是服务器，因此说网页对于不一样的浏览器有不一样的显示，这就是兼容性。

3、Javascript 语法

虽说是若类型的语言js的逻辑性跟java等面向对象的语言差很少，js也是区分大小写的。

一、变量的声明

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

二、js的运算符没什么好说的主要记住的就是 "=="跟"==="双等号是只比较数值而不比较数据类型然后者不只比较数值还比较数据类型

例子：8=="8" 返回true 8==="8"返回false

三、函数（方法）

格式：

function 函数名(形式参数...)

{

执行语句；

return 返回值；

}

注意：一、函数是多条执行语句的封装体，只有被调用才会被运行。

二、函数的执行，只要写了函数名后面跟一对小括号，该函数就会运行-----注意：咱们js动态绑定事件的时候不能写括号只要写括号就会

在绑定的时候执行，可是在html代码的事件中添加处理方法的时候应该加括号，应为只有当html事件触发的时候才会去通知它此时它就执行

三、调用有参数的函数，但没有给其传值，函数同样能够运行

四、调用没有参数的函数，给其传值，该函数也同样运行。-------注意：运行函数的时候js默认会传参数的他会传当前调用该参数的对象

（1）网页中好比<input type="button" onclick="fn_click(this);" /> 此时html传的就是input这个标签在fn_click函数中能够设置参数接受

function fn(obj){

alert(obj.aa);

}

</script>

运行结果：aaaaaaaaaa

（2）js中动态绑定事件的时候，执行该参数的时候不用写传入参数，由于只要加括号写传入参数函数就会执行，传入参数就能够在运行函数是this直接调用

function init(){

document.getElementById("button01").onclick=fn;

}

function fn(){

alert(this.aa);

}

</script>

</head>

也就是说只要在js中绑定事件就不用（）；直接函数名便可，而在html代码中用（）激活函数运行；

四、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

五、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() 编码的字符串进行解码。

4、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