JavaScript简介

鲜鸡屎
96 阅读6分钟

JS数据类型之布尔值

python中的布尔类型关键字是bool
    True
    False  (0, None, '', [], {})
js中的布尔类型关键字是boolean
    true
    false	(空字符串, 0, null, undefind, NaN)

null与undefined的区别：
    null表示值是空，一般在需要指定或清空一个变量时才会使用，如name=null;
    undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

    null可以理解为曾经拥有过，现在暂时没了
    undefined可以理解为从来没有拥有过

JS数据类型之对象

JS中一切皆对象：字符串、数值、数组、函数...对象只是带有属性和方法的特殊数据类型。
数组对象的作用是：使用单独的变量名来存储一系列的值，类似python中的列表
var l1 = [123, "abc"]
console.log(li[1])  // 输出"abc"
方法说明方法说明
.length数组的大小.reverse()反转
.push(ele)尾部追加元素.join(seq)将数组元素连接成字符串
.pop()获取尾部的元素.concat(val, ...)连接数组
.unshift(ele)头部插入元素.sort()排序
.shift()头部移除元素.forEach()将数组的每个元素传递给回调函数
.slice(start, end)切片.splice()删除元素，并向数组添加新元素。
forEach():将数组的每个元素传递给回调函数
语法：forEach(function(currentValue, index, arr), thisValue)
参数说明：
    currentValue:当前元素(必须参数)  
    index:当前元素的索引值(可选参数)
    arr:当前元素所属的数组对象(可选)
    thisValue :传递给函数的值一般用"this"值。如果这个参数为空，会自动传入"undefind"(可选)

splice():删除元素(主要)，并向数组添加新元素(次要)。
语法：splice(index,howmany,item1,.....,itemX)
参数说明：
    index:规定从何处添加/删除元素，填写下标，必须是数字(必须参数)
    howmany:规定应该删除多少元素，必须是数字但可以是0，如果不规定这个参数，则从删除index后的所有元素(必须参数)
    item1,...itemx:要添加到数组的新元素(可选参数)

JS数据类型之自定义对象

类似于python中的字典
定义方式：
    1.	let d1 = {'name': 'jason', 'age': 19}
    2.	let d2 = new Object()
自定义对象操作数据值的方式更加简单，不用中括号按key取值，而是直接用句点符。

运算符

1.算数运算符
	+ = - * / % ++ -- 	与python一样
  特殊说明：
    var x=10;
    var res1=x++;
    var res2=++x;
    res1;	//  10
    res2;	//  12
	// x++ 会先赋值再自增   ++x会 先自增再赋值
2.比较运算符
	> < >= <= != 	与python一样
  特殊说明：
	1 == '1'	//  true  弱等于
	1 === '1'	//  false  强等于
	// js是弱类型语言，当我们用==比较时js内部会自动将两个1装换成相同的数据类型(字符串)再比较。以后涉及到比较时尽量用===强制限制类型。
3.逻辑运算符
			 js				python
	与		 &&				 and
	或		 ||				 or
	非		 !				 not
4.赋值运算符
	=  +=  -=  *=  /=		与python一样

流程控制

1.分支结构
    1.单if分支
        if(条件){条件成立之后执行的代码}
    2.if...else分支
        if(条件){
            条件成立执行的代码
        }else{
            条件不成立执行的代码
        }
    3.if...else if...else分支
        if(条件1){
            条件1成立执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }else{
            条件12都不成立执行的代码
        }
2.循环结构
        for(let i=0;i<10;i++){
            console.log(i)
        }
        while(条件){
            循环体代码
        }

函数

语法：
function 函数名(形参){
    函数体代码
    return	返回值    
}

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

2.匿名函数
    function(a,b){
        return a+b;
    }
3.箭头函数
    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内置对象

类似于python中的内置函数或者内置模块
固定语法：
    var 变量名 = new 内置对象()
	
1.Date日期对象
  创建date对象
    var d1 = new Date();
    var d2 = new Date("2003/3/20 11:12");  // 日期字符串
    var d3 = new Date(5000)  // 毫秒数
    var d4 = new Date(2003,3,20,11,12,0,300)  //年月日时分秒毫秒
  Date对象的方法
    var d = new Date()
    getDate()	获取日
    getDay()	获取星期
    getMonth()	获取月(0-11)
    getFullYear ()            获取完整年份
    getYear ()                获取年
    getHours ()               获取小时
    getMinutes ()             获取分钟
    getSeconds ()             获取秒
    getMilliseconds ()        获取毫秒
    getTime()	获取时间戳   

2.JSON对象
var obj = {"name":"jason","age":19}
将对象转化成json字符串
var str = json.stringify(obj)
将json字符串转化为对象
var obj1 = json.parse(str)

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操作

BOM:浏览器对象模型
    通过写js代码可以跟浏览器交互
DOM:文档对象模型
    通过写js代码可以跟HTML交互
Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

BOM

1.常用的window方法
    window.open()	打开新窗口
    window.close()	关闭当前窗口
2.window的子对象(以下方法可以省略前面的  window.  )
    1.navigator对象
    window.navigator.userAgent()	//获取当前浏览器的基本信息
    2.history对象
    window.history.forward()	//前进一页
    window.history.back()	//后退一页
    3.location对象
    window.location.href	//获取当前url
    window.location.href="URL"	//跳转到指定页面
    windoe.location.reload()	//重新加载页面
    4.弹出框
        警告框：当警告框出现后，用户需要点击确定按钮才能进行下一步操作。
        确认框：用户需要点击确认框的确定或取消按钮才能继续操作，如果点击确认，返回true，点取消返回false。
        提示框：用户需要输入提示框要求的值，然后点击确认或取消才能继续操作，点击确认则返回输入的值，取消则返回null。
    5.计时相关
    setTimeout()
    语法：var t=setTimeout("JS语句",xxx毫秒)	//表示xxx毫秒后，执行前面的js代码，这个js代码可以是函数。
    clearTimeout()
    语法：clearTimeout(setTimeout_variable)	//表示取消setTimeout_variable计时对象
    举个栗子：
    // 在指定时间之后执行一次相应函数
    var timer = setTimeout(function(){alert(123);}, 3000)
    // 取消setTimeout设置
    clearTimeout(timer);

    setIntrval()
    语法：setInterval("JS语句",xxx时间间隔)	//表示每隔xxx毫秒，都会执行一次前面的js语句，直到clearInterval()被调用或者窗口被关闭。可以返回一个id值作为直到clearInterval()的参数来取消对code的周期性执行的值
    clearInterval()
    语法：clearInterval(setinterval返回的ID值)		//专门取消setIntrval设置的timeout
    举个栗子：
    // 每隔一段时间就执行一次相应函数
    var timer = setInterval(function(){console.log(123);}, 3000)
    // 取消setInterval设置
    clearInterval(timer);

DOM

DOM标准规定HTML文档中的每个成分都是一个节点(node)：
注意：涉及到DOM操作的js代码应该放在BODY的最下方，因为浏览器渲染html文件时从上往下开始的。

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)　

1.查找标签
    document.getElementByID		根据ID获取一个标签
    document.getElementsByClassName		根据class属性获取若干标签
    document.getElementsByTagName		根据标签名获取标签合集

    parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素
2.节点操作
    1.创建节点
    createElement(标签名)	
    var divEle = document.createElement("div")

    2.添加节点
    somenode.appendChild(newnode)		//尾部追加
    somenode.insertBefore(newnode, 某个节点)	//在某个节点前插入新节点
    var imgEle=document.createElement("img");
    imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
    var d1Ele = document.getElementById("d1");
    d1Ele.appendChild(imgEle);
	/ps:动态创建 临时有效 非永久/

    3.删除节点		//获得要删除的元素，通过父元素调用该方法删除
    somenode.removeChild(要删除的节点)

    4.替换节点
    somenode.replaceChild(newnode, 某个节点)

3.属性操作
    xxxEle.属性			只能是默认属性
    xxxEle.setAttribute()		可以是默认属性、自定义属性

4，文本操作
    divEle.innerHTML	//会解析html标签
    divEle.innerText	//不会解析标签，设置什么就是什么

    divEle.innerHTML = '<h1>呵呵呵</h1>'
    divEle.innerText = '<h1>哈哈哈</h1>'
avatar
文章
阅读
粉丝