javascript基础

发表于   |   分类于   |     |  

[TOC]

enter description here

前言

  • NaN表示不是一个数字enter code here
    *

小记

1.consol.log();在控制台打印输出括号里的内容

数据类型

所有数据类型声明都是用var，不需要像C语言那样加数据类型，自动识别数据类型。

字符串 string

var a = "This is a strings";

布尔值 bool

var myBool = true;

数字 number

var pi = 3.14;

undefined

变量存在但是未被赋值或者 读取一个不存在的对象属性时
变量的类型不确定，逻辑判断是相当于false

null

表示值已被定义了，但是它不属于任何一种合法的类型，逻辑判断是相当于false

(1.typeof()：查看变量的类型
(2.字符串拼接：string1+strign2
(3.类型转换：parseInt()将字符串转化为整形值， parseFloat()将字符串转化为浮点型

类型转换

(1.数字转字符串
num.toString(); 括号内可以填数字表示转化成几进制，不填默认是十进制
(2.字符串转数字

Number(str) 解析str得到整数或者实数
parseInt(str) 解析str得到整数
parseFloat(str) 解析str得到整数或者实

字符串操作

.length

1
2
word = "hello world";
word.length  // 结果是11

charAt

得到字符串中某个字符

1
2
word = "hello world";
word.charAt(0)  // 结果是h

indexOf

字符在字符串中的位置

1
2
word = "hello world";
word.indexOf('e')  // 结果是1

substring截取字符串

截取字符串

1
2
word = "hello world";
word.substring(0,3)  // 结果是hello

replace替换字符

string.replace(‘被替换字符’,’替换后的字符’)

split 分割字符串

string.split(‘分割的标志’) 得到的结果是个数组，可以放到变量里然后去出

数组

定义

var arry1=[];
var myarry=[‘hello’, 100, 1, 5, 25, 10];

属性

push添加数组

string.push(要添加的内容1,要添加的内容2)
把药添加的内容加到数组最后

unshift往数组头加元素

string.unshift() 把元素加到数组头

删除数组元素pop shift splice delete

  • 删除数组最后一个元素：string.pop();本身返回的是删除掉的元素的值
  • 删除数组开头第一个元素：string.shift();本身返回的是删除掉的元素的值
  • 删除数组内具体某元素：delete string[2]; 但是它不会影响元素数量，只是把那个元素变成undefined
  • 彻底删除某个元素：string.splice(元素索引) 本身返回的是被删除的元素

    两个数组合并concat

    string1.concat(string2)返回的是合并后的结果

if判断语句

if(a==b){} 仅测试操作数的数值是否相等，而不关心操作数的类型
if(a===b){} 操作数的值和类型都相等才为真

1
2
3
4
5
6
if() {
}
else if() {
}
else{
}

switch语句

1
2
3
4
5
6
7
switch(条件){
 case 条件1： 语句1；break；
 case 条件2： 语句2；break；
 case 条件1： 语句3；break；
 default:     语句；break；
}

循环语句

while

1
2
3
while(条件){
语句；
}

for循环语句

1
2
3
4
for (var i=0;i<10;i++)
{
   语句;
}

函数

  • 定义函数
    function functionName(参数1，参数2…)
    {
    }
  • 函数表达式、匿名函数
    var functionName = function (参数1，参数2)
    {
    }

对象

property（属性） method（方法）

注：

  • 对象里面的属性可以是任何类型的数据：数字、字符串、数组等
  • 对象中属性的类型可以用typeof取出来，方法类型是’function’

访问对象属性方法：

  • 对象名.属性名
  • 对象名[‘属性名’]

    创建对象

  • 单独设置属性

    1
    2
    3
    var objName_my = {};
    objName_my.namemy='wang';或者 objName_my['namemy']='wang';
    objName_my.agemy=23;

  • 方式二：

    1
    2
    3
    4
    5
    var objName = {
    namemy:'wang',
    agemy:23,
    family:['父亲','母亲']
    };

删除对象属性

delete 对象名.属性名；

给对象添加方法

对象名.functionNamemy = function (参数1，参数2)
{
//方法体中的this表示对象functionNamemy本身
函数内容;
}; //注意结尾加上分号

用for输出对象内属性

1
2
3
4
5
var i;
for(i in objName)
{
console.log(i);
}

DOM 文档对象

注意：

  • 元素 = 标签（H1 P…） + 文本内容

DOM树

document作为文档的root根，元素（标签）作为结点，构成一颗树，有父节点、兄弟节点。

获取DOM元素

(1). document.getElementById(‘元素的id’)
这样获得整个元素标签

(2). document.getElementsByTagName(‘标签名’)
返回的结果是所有相关的标签元素，是个数组对象，如getElementsByTagName(‘li’)返回所有li标签的内容

(3). document.querySelector(‘CSS选择器’) CSS选择器可以是“类名+标签”
返回的是查找到的第一个元素
例：document.querySelector(‘.content li’)

(4).document.querySelectorAll(‘CSS选择器’)
返回的是查找到的所有的元素

获取DOM节点

注：假设将获取到的元素赋值给变量pagemy
(1. pagemy.nodeName用于获取该元素标签属性 如果是段落返回的是p
(2. pagemy.innerText 返回的是元素的文字内容
(3. pagemy.parentNode 返回的是父节点的元素
(4. pagemy.previousElementSibling返回的是前面一个兄弟节点的元素
pagemy.nextElementSibling返回的是前面一个兄弟节点的元素
(5.pagemy.childNodes返回的是所有的子节点元素，包含元素类型的节点和文本类型的节点
(6. pagemy.firstElementChild 返回的是第一个子节点元素
pagemy.lastElementChild 返回的是最后一个子节点元素

创建DOM新节点

(1.创建节点：

  • .creatElement创建元素类型新节点：
    var newMenber_my=document.creatElement(‘li’);
  • .creatTextNode创建文本类型节点:
    var newTextnode_my=document.creatElement(‘这是文本内容！’);
    (2.
  • .appendChild：被添加的元素a.appendChild(要添加的元素b)
1
2
3
4
DOM结构
<a>
  <b></b>
</a>

例：newMenber_my.appendChild(newTextnode_my);

  • .insertBefore(插入的元素,被插入的地方) 作用是将插入的元素放到被插入地方的上面

事件

onmouseover
onclick
onmouseout
window.onload=function(){}//在页面图片等都加载完了触发

热评文章