JavaScript基础理论

用户6828628340220
96 阅读4分钟

basic--day1： 查看类型 console.log(typeof("1"))--->string

&&与||或！非

前加加跟后加加的区别 前加加:先自加，再使用 后加加:先使用再自加，自加保存的值是储存在内存中的 var i=0 console.log(++i)-->1 console.log(i++)-->1 但是保存的是2

十二位运算符 console.log(3<<6)3*6个2 console.log(16>>3)16/3个2

basic--day2

程序的流程控制语句（3种） 顺序结构 分支结构 循环结构

if...else if...与switch...case...的区别 if做的是等值比较而不是范围查找 1.要求条件从上往下范围依次减小， 2.语句更加灵活

eg:
var user=prompt("输入数字")
if(user>=90){
    alert("1")
}else if(user>=80){
    alert("2")
}

switch...case... case做的不是范围查找而是等值比较 一般情况下break是不能少的。否则可能会出现意料之外的错误。如果没有break，程序会继续执行后面的代码 只能完成等值比较，不能完成大小判断，也不支持Boolean类型 优点： 1.条件越多，使用switch性能比if的更好 2.比if排版更简洁

eg:
var a=prompt("1查话费\n2查流量")

switch(parseInt(user)){
    case 1:
        console.log("111")
        break;
    case 2:
        console.log("222")
    defalut:
        console.log("333")
}

三目运算

var a=prompt("1查话费\n2查流量")
console.log(a=1?"查流量":a=2?"查话费":"输入有误")
a=1吗？等于查流量，a=2吗？等于查话费，否则"输入有误"

强转字符串 string("") tostring("") toString是属于Object原型上的一个方法 强转数字 parseInt("") 不可以保留小数点 parseFloat("") 可以保留小数点 num(""()) 强转布尔 Boolean("") "" "0" "undefind" "false" "null" "NAN" 都是false

basic--day3 while和for的区别 while一般用于不明确循环次数的时候使用 break - 退出整个循环 - 多半都是用于配合死循环使用的 continue - 退出本次循环 - 还会执行下一次操作

for一般用于明确循环次数的时候使用，更简洁

while 和 do...while 的区别？ 区别只看第一次，如果第一次条件都满足，那么两者没有区别 如果第一次条件都不满足，while一次都不会执行，而do...while至少会执行一次

basic--day4

一、函数的两种创建方式

1.声名方式
function 函数名(){}
2.直接量方式
var 函数名=function(形参列表){}

二、作用域

1、全局作用域：全局变量 和 全局函数，在页面的任何一个位置都可以使用
2、函数作用域：局部变量 和 局部函数，只能在【函数调用时，内部可用】
带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错
		特殊点：缺点：
			1、局部可以使用全局的，但是全局不能使用局部的，解决：看上面，加return
			2、千万不要在函数中对着未声明的变量赋值 - 全局污染：全局本身没有这个东西，但是函数作用域却给添加上了，降低网页的性能！

三、声名提前(笔试比较多)

四、重载

相同的函数名，根据传入的实参的不同，自动选择对应的函数去执行，但是JS不支持，如果函数名重复了，后面的肯定会覆盖前面的
		目的：减轻我们程序员的压力，记住一个方法就可以执行很多的操作
		解决：在【函数内部】自带一个arguments的对象（类数组对象），不需要我们去创建的

		作用：哪怕没有写任何形参，它也可以接住所有的实参，
		固定套路：
			1、通过下标去获取传入的某一个实参：arguments[i] - i下标是从0开始的！
			2、通过length去获取到到底传入了几个实参：arguments.length;
		所以我们可以通过判断传入的实参的不同，执行不同的操作，变相实现重载操作
                    
                    
  eg
  function zwjs(){
			if(arguments.length==1){
				return "我的名字叫"+arguments[0];
			}else if(arguments.length==2){
				return "我的名字叫"+arguments[0]+"，今年"+arguments[1]+"岁";
			}else if(arguments.length==3){
				return "我的名字叫"+arguments[0]+"，今年"+arguments[1]+"岁，喜欢"+arguments[2];
			}
		}
                    
                    console.log(zwjs("name","age","hobby"))

basic--day5

DOM:document object model 文档对象模型

每一个页面都有一个唯一dom树根，可以通过dom查找到任意对象
找元素的方法
动态集合
var a=document.getElementById("id值")
document.getElementsByTagName("标签名")
document.getElementsByClassName("class名")


    父亲元素  elem.parentNode
    儿子元素  elem.children
    第一个儿子 elem.firstElementChild
    最后个儿子 elem.lastElementChild
    前一个兄弟 elem.previousElementSibling
    后一个兄弟 elem.nextElementSibling

操作元素

操作元素的内容：
    先找到元素再进行操作，不能直接操作集合
    elem.innerHTML=""(支持识别标签)
    elem.innerText=""(是纯文本，不支持识别标签)
    特殊：
    单标签input
    input.value=""
    
操作元素的属性：    
    获取属性名
    elem.getAttribute("属性名")
    设置新属性值
    elem.setAttribute("属性名":"属性值")
    简化为
    elem.属性名="属性值"
    简化版缺点  class改为className，不能设置自定义的属性值
    
操作元素的样式：
    css属性名有横线的地方要改为驼峰命名法
    eg：
        background-color:
        backgroundColor

完成开关门，选项卡，购物车(封装版跟未封装版)

avatar
文章
阅读
粉丝