JavaScript基础
标签：
JavaScript
JavaScript基本语法
变量
什么是变量变量是用于存储数据的存储器，每个变量都占一段内存JavaScript 中的变量由字母、数字、下划线组成，区分大小写以字母开头变量名不能有空格不能使用 JavaScript 中的关键字做变量名变量的声明var test 声明变量var test = 'kernel' 声明变量的同时并赋值作用域与其他语言一样，JavaScript 中的变量同样有全局变量和局部变量之分全局变量是定义在所有函数之外的，其作用范围是整段 JavaScript 代码而局部变量是定义在函数体之内，只对其该函数是可见，而对其它函数则是不可见的
数据类型
字符串字符串是存储字符的变量var test = 'kernel'数字JavaScript 只有一种数字类型，数字可以带小数点，也可以不带var x = 34;布尔布尔只有两个值，true和falsevar x = true;数组创建一个名为boys的数组 var boys=new Array(); boys[0]="Tom"; boys[1]="Jack"; boys[2]="Alex";
运算符
算数运算符运算符 描述 示例+ 加 x+y- 减 x-y* 乘 x*y/ 除 x/y++ 累加 x++-- 累减 x--% 取余数 x%y逻辑运算符运算符 示例 描述&& x&&y 逻辑与，当x和y同时为true，否则返回false|| x||y 逻辑或，当x和y同时为false时返回false，否则返回true?: c?x:y 条件，当c为true时，返回x的值，否则返回y的值& x&y 按位与，当两个数位同时为1时，返回数据的当前数位为1，其他情况都为0| x|y 按位或，当两个数位同时为0时，返回数据的当前数位为0，其他情况都为1^ x^ 按位异或，当两个数位有且仅有一个为0时，返回数据的当前数位为1，其他情况都为0== x==y 相等，x等于y时，返回true，否则返回false!= x!=y 不等，x不等于y时，返回true，否则返回false
JavaScript 语句
if/else语句 if (条件 1) { 当条件 1 为 true 时执行的代码; } else if (条件 2) { 当条件 2 为 true 时执行的代码; } else { 当条件 1 和 条件 2 都不为 true 时执行的代码; }switch语句 switch(k) { case k1: 执行代码块 1 ; break; case k2: 执行代码块 2 ; break; default: 默认执行（k 值没有在 case 中找到匹配时）; }for 循环 for(变量 = 初始值 ; 循环条件 ; 变量累加方法) { 循环语句; }while 循环 while (条件) { 需要执行的代码; } do { 需要执行的代码; } while (条件);break 和 continue 语句 break 本语句放在循环体内，作用是立即跳出循环 continue 本语句放在循环体内，作用是中止本次循环，并执行下一次循环JavaScript 函数 function 函数名 (参数1，参数2) { 函数体; return 返回值; }
事件
什么是事件
通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动，对事件进行处理程序或函数，我们称之为事件处理程序
事件处理程序
在某个事件发生的时候，执行特定的 JavaScript 代码（事件处理程序）<html><head><script> function click_button() { // 事件处理程序，弹出提示窗 alert('welcome to shiyanlou'); }</script></head><body align="center"><br></br><button onclick="click_button()">click me</button> <!--发生事件 onclick 的时候，执行 click_button()--></body></html>常见事件
onclick 单击ondblclick 双击onfocus 元素获得焦点onblur 元素失去焦点onmouseover 鼠标移到某元素之上onmouseout 鼠标从某元素移开onmousedown 鼠标按钮被按下onmouseup 鼠标按键被松开onkeydown 某个键盘按键被按下onkeyup 某个键盘按键被松开onkeypress 某个键盘按键被按下并松开
对象
什么是对象
JavaScript的所有数据都可以被视为对象，而每个对象都有其属性（properties)和方法（methods）
对象的 属性 是反映该对象某些特定的性质的
对象的 方法 能对该对象做一些事情创建对象
创建一个student对象，并指定几个属性和方法 student = new Object(); // 创建对象“student” student.name = "Tom"; // 对象属性 名字 student.age = "19"; // 对象属性 年龄 student.study =function() { // 对象方法 学习 alert("studying"); }; student.eat =function() { // 对象方法 吃 alert("eating"); };还可以这样创建对象var student = {}; student.name = "Tom";亦或是这样var student = { name:"Tom"; age:"19";}但是以上代码创建多个对象时，会产生大量冗余代码，所以我们也可以采用函数的方式新建对象 function student(name,age) { this.name = name; this.age = age; this.study = function() { alert("studying"); }; this.eat = function() { alert("eating"); } }然后通过 new 创建 student 对象的实例 var student1 = new student('Tom','19'); var student2 = new student('Jack','20');访问对象的属性和方法
var x = student1.name; // 访问对象的属性var y = student1.age;student1.study(); // 调用对象的方法当我们需要 反复访问 某对象的时候，可以使用 with 语句简化操作，而不需要反复地用“.”符号，比如： with(student1) { var x = name; var y= age; study(); eat(); }常用内置对象
String 字符串对象String属性 length，表示字符串中的字符个数，包括所有的空格和符号String的方法 charAt(n) ：返回该字符串第 n 位的单个字符。（从 0 开始计数） charCodeAt(n) ：返回该字符串第 n 位的单个字符的 ASCII 码 indexOf() ：用法：string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索，查找 string_2，返回查找到的位置，如果未找到，则返回 -1，其中 n 可以不填，默认从第 0 位 开始查找 lastIndexOf() ：跟 indexOf() 相似，不过是从后边开始找 split('分隔符') ：将字符串按照指定的分隔符分离开，返回一个数组 substring(n,m) ：返回原字符串从 n 位置到 m 位置的子串 substr(n,x) ：返回原字符串从 n 位置开始，长度为 x 的子串 toLowerCase() ：返回把原字符串所有大写字母都变成小写的字符串 toUpperCase() ：返回把原字符串所有小写字母都变成大写的字符串Math 对象“数学”对象，提供对数据的数学计算Math的属性 E ：返回常数 e (2.718281828...) LN2 ：返回 2 的自然对数 (ln 2) LN10 ：返回 10 的自然对数 (ln 10) LOG2E ：返回以 2 为底的 e 的对数 (log2e) LOG10E ：返回以 10 为底的 e 的对数 (log10e) PI ：返回π（3.1415926535...) SQRT1_2 ：返回 1/2 的平方根 SQRT2 ：返回 2 的平方根 Math的方法 abs(x) ：返回 x 的绝对值 round(x) ：返回 x 四舍五入后的值 sqrt(x) ：返回 x 的平方根 ceil(x) ：返回大于等于 x 的最小整数 floor(x) ：返回小于等于 x 的最大整数 sin(x) ：返回 x 的正弦 cos(x) ：返回 x 的余弦 tan(x) ：返回 x 的正切 acos(x) ：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示 asin(x) ：返回 x 的反正弦值 atan(x) ：返回 x 的反正切值 exp(x) ：返回 e 的 x 次幂 (e^x) pow(n, m) ：返回 n 的 m 次幂 (nm) log(x) ：返回 x 的自然对数 (ln x) max(a, b) ：返回 a, b 中较大的数 min(a, b) ：返回 a, b 中较小的数random() ：返回大于 0 小于 1 的一个随机数Array 数组对象数组对象是对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在 数组中的位置（从 0 开始计数）数组下标表示myArray[2] ='hello';JavaScript只有一维数组，要使用多维数组，使用虚拟法var myArray(new Array(),new Array(),new Array())Array的属性 length ：返回数组的长度，即数组里有多少个元素Array的方法 - join("指定分隔符") ：返回一个字符串，把数组元素串起来，元素间用指定分隔符隔开 - toString() ：把数组转为字符串，并返回结果 - reverse() ：使数组元素倒序 - slice(n,m) ：返回子数组，从数组第 n 个元素到第 m 个元素 - sort(SortFunction) ：按照指定的 SortFunction 将数组的元素排序 - concat(Array\_1,Array\_2) ：用于连接两个或多个数组
DOM
基本概念
什么是DOM DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档解析成一系列的节 点，再由这些节点组成一个树状结构,所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程 语言操作文档的目的，所以，DOM 可以理解成文档的编程接口节点 节点 名称 含义 Document 文档节点 整个文档 DocumentType 文档类型节点 文档的类型 Element 元素节点 HTML元素 Attribute 属性节点 HTML元素的属性 Text 文本节点 HTML文档中出现的文本 DocumentFragment 文档碎片节点 文档的片段
通过ID选取元素 getElementById()通过元素的ID选取元素 document.getElementById("my_div").style.height="100px";通过名字（Name）或标签名（TagName）选取元素 document.getElementsByTagName("input")[0].value="hello";选取文档元素
节点、属性操作
查询和设置元素的属性 可以通过 getAttribute()和setAttribute() 查询和设置元素的属性 document.write(document.getElementById("div_1").getAttribute("class")); document.getElementById("div_1").setAttribute("class","class_2"); 父节点 通过parentNode()方法可以查看并操作一个节点的父节点 document.write(document.getElementById("demo").parentNode.getAttribute("class"));创建和插入节点 createElement()、appendChild()方法，它们的作用分别是创建节点和插入节点 var mydiv = document.createElement("div"); mydiv.style.height = "100px"; mydiv.style.background = "red"; document.getElementsByTagName("body")[0].appendChild(mydiv);删除节点 通过removeChild()方法 var obj = document.getElementById("div_red"); obj.parentNode.removeChild(obj);
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦