标签：function 函数 DOM 对象 标签 数据类型 JS var

JS数据类型

JS数据类型之布尔值

1.布尔值(Boolean)
在js中布尔值用用true和false来表示(都是小写)

2.(空字符串)、0、null、undefined、NaN都是false
2.1null表示这个变量的值时空(需要指定或清空一个变量时)
2.2undefined表示当声明了一个变量，但还没有赋值
'console.log()相当于python的print()'

JS数据类型之数组

'在js中也是一切皆对象'
1.对象之数组(相当于python的列表)
let l1 = [11, 22, 33]

2.forEach()
var l1 = [1, 2, 3, 4, 5]
l1.forEach(function(a){console.log(a)})  // 相当于for循环打印列表
/*
1
2
3
4
5
*/

3.splice()
var l1 = [1, 2, 3, 4, 5]
l1.splice(2,1,6)  // 在2的位置(第3个)开始删除1个元素并添加6,新元素可添加可不添加
// l1 = [1, 2, 6, 4, 5]

4.map()
var l1 = [1, 2, 3, 4, 5]
l1.map(function(a){return a + 1})  // 修改数组内部所有的元素
// [2, 3, 4, 5, 6]

JS数据类型之自定义对象(object)

1.自定义对象(相当于python中的字典)
1.1定义方法1:
let d1 = {'name':'barry','pwd':123}
1.2定义方法2:
let d2 = new Object()

2.在自定义对象操作数据值的方式很简单,直接使用句点符
d.name

JS常见运算符

var x=10;		赋值
var res1=x++;	 先赋值后自增
var res2=++x;	 先自增后赋值

==			  弱等于(自动转换成相同数据类型)
===			  强等于(不自动转换)

&&			  等价于python中and
||			  等价于python中or
!			  等价于python中not

JS流程控制

JS流程控制之分支结构

1.单if分支
if(条件){条件成立之后执行的代码}

2.if...else分支
if(条件){条件成立之后执行的代码
    }else{条件不成立之后执行的代码}

3.is...elif...else分支
if(条件1){条件1成立之后执行的代码
    }else if(条件2){条件1不成立条件2成立之后执行的代码
    }else{条件都不成立之后执行的代码}

JS流程控制之循环结构

1.switch
var day = new Date().getDay();
switch (day) {
    case 0:
        console.log('sunday');
        break;
    case 1:
        console.log('monday');
        break;
    default:
        console.log('...')}

2.for循环
for(let i=1;i<101;i++){console.log(i)}

3.while循环
while(条件){循环体代码}

JS函数

JS函数分类

1.普通函数定义
function 函数名(形参){
    函数体代码
    return 返回值
}

2.带参数的函数
function func(a, b){
    console.log(a, b)
}
'参数的个数不需要一一对应，如果想限制参数个数需要使用内置关键字arguments'
function func(a, b){
    if(arguments.length==2){
        console.log(a, b)
    }else{
        console.log('参数个数不对')
    }
}

3.匿名函数
function(a, b){
    return a + b;
}

4.箭头函数
var f = function(v){
    return v;
}
// 等同于
var f = v => v;

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
    return num1 + num2;  // 这个return只能返回一个值，如果要返回多个值就要先手动组成一个数组或对象中
}

JS函数名称空间与作用域

1.局部变量
在JavaScript函数内部声明的变量(使用var)是局部变量，所以只能在函数内部访问它，只要函数运行结束，本地变量就会被删除

2.全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

3.变量生存周期
局部变量会在声明开始到运行结束后被删除
全局变量会在声明开始到页面关闭后被删除

4.作用域
在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

JS内置对象

1.固定语法
var 变量名 = new 内置对象名();

2.Date日期对象
var d1 = new Date();
console.log(d1.toLocaleString());

2.JSON序列化对象
2.1将对象转换成JSON字符串
JSON.stringify()
2.2JOSN字符串转换成对象
JSON.parse()

3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

BOM与DOM操作

1.BOM:浏览器对象模型
通过写js代码可以跟浏览器交互

2.DOM:文档对象模型
通过写js代码可以访问html文档的元素

3.BOM操作
3.1window的子对象
window.open()  // 打开新窗口
window.close()  // 关闭当前窗口
window.navigator.userAgent()  // 客户端的大部分信息
window.history.forward()  // 前进一页
window.history.back()  // 后退一页
window.location.href  // 获取当前页面的地址(URL)
window.location.href = 新网址  // 跳转到指定页面
window.location.reload()  // 重新加载页面
alter()  // 警告框
confirm()  // 确认框
prompt()  // 提示框

3.2定时器相关操作(重要)
function func1(){
    alert('我什么场面没见过')
}
let t = setTimeout(func1,3000)  // 3秒之后自动执行func1函数
clearTimeout(t)  // 取消上面的定时任务

'每3秒自动执行func1重复3次'
var s1 = null
function showMsg(){
    function func1(){
        alert('这场面我真没见过')}
    s1 = setInterval(func1,3000)}
function clearMission(){
    clearInterval(s1)}
setTimeout(clearMission,10000)
showMsg()

4.DOM操作
4.1查找标签
document.getElementByld()
根据id值查找标签，结果直接是标签对象本身
document.getElementByClassName()
根据class值查找标签，结果是数组类型
document.getElementByTagName()
根据标签名操作标签，结果是数组类型

4.2间接查找
parentEement  // 父节点标签元素
children  // 所有子标签元素
firstElementChild  // 第一个子标签元素
lastElementChild  // 最后一个子标签元素
nextElementSibling  // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素
"let divEle = document.getElementById('d1')"

4.3节点操作
let XXXEle = document.createElement('标签名')  // 创建节点
XXXEle.id = 'id值'  //  添加id值
XXXEle.innerText = '内部文本'  // 设置文本节点的值
divEle.append(XXXEle)  // 追加一个子节点

4.4属性操作
XXXEle.属性			自带的属性还可以直接.属性名来获取和设置
XXXEle。setAttribute   可以设默认属性、自定义属性

4.5文本操作
获取文本节点的值：
divEle.innerHTML
divEle.innerText
'区别在于有没有赋值符号(=)'
设置文本节点的值：
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'  // 能识别标签
divEle.innerText = '<h1>哈哈哈</h1>'  // 不能识别标签

标签：function,函数,DOM,对象,标签,数据类型,JS,var
来源： https://www.cnblogs.com/riuqi/p/16625968.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。