前端开发(五)

前端开发(五)

JavaScript运算符

# 1.算数运算符
+、-、*、/、%、++、--
	++:自增
    --:自减
# 2.比较运算符
>、<、>=、<=、==、!=、===、!==
	==:弱等于 字符一样就返回ture
    !=:弱不等于
	===:强等于 只有字符和类型都一样才返回ture
    !==:强不等于
# 逻辑运算符
python:and(与),or(或),not(非)
    js:&&(与),||(或),!(非)

算数运算符

比较运算符

流程控制

# 1.if判断
	1.单if分支:
        if(条件){
            条件成立执行的代码
        }
    2.if...else分支
    	if(条件){
            条件成立执行的代码
        }else{
            条件不成立执行的代码
        }
    3.if...else if...else分支
    	if(条件一){
            条件一成立触发
        }else if(条件二){
            条件二成立触发
        }
        ...
        else{
            以上条件都不成立触发
        }
    4.switch语法
    	switch(条件){
            case 0:
            条件结果=0触发
            break # 不加break会一直挨个问一遍条件是否成立
            case 1:
            条件结果=1触发
            break
            ...
        default:
            如果上述条件都不触发则触发
        }
        
# while循环
	while(条件){
        循环体代码
    }

# for循环
	for(初始值;循环条件;每次循环之后的操作){
        循环体代码
    }
    eg:
    for循环打印10以内的数字
    for(var i = 0;i < 10;i++){
        console.log(i)
    }

for循环打印10以内的数字

三元运算符

python: a = 1 if 1 > 2 else 2(if条件成立使用if左边的值，反之使用else右边的值)
    
js: a = 1 > 2 ? 1 : 2(?前面的判断成立使用:左边的值，反之使用右边的值)
# 三元运算一般情况下都不推荐嵌套使用!

函数

# 函数定义(关键字function)
	function 函数名(形参){
        函数体
        return 返回值
    }
	'''
	1.js函数命名推荐驼峰体
	2.参数可写可不写
	3.返回值关键字return
	'''

# 函数调用
	函数名(实参)
    
# 1.无参函数
	function MyFunc(){
        console.log('我是无参函数')
    }

# 2.有参函数
	function MyFunc1(a,b){
        console.log(a,b)
    }
    '''
    js函数无论传多少值都可以执行
    当实参少于形参时，按顺序形参实参赋值，没有被赋值的形参的值为undefined
    当实参多余形参时，按顺序形参实参赋值，所有实参都会存在内置关键字arguments中
    '''

# 3.返回值参数
	js中，一个return只能返回一个值，不支持多返回
    
# 4.匿名函数
	var a = function(){
        console.log(1)
    }
    
# 5.箭头函数
	var f = v => v;
  // 等同于(箭头左边是形参右边是返回值)
  var f = function(v){
    return v;
  }

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

  var sum = (num1, num2) => num1 + num2;
  // 等同于
  var sum = function(num1, num2){
    return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
  }

无参函数

有参函数

内置关键字arguments

返回值参数

匿名函数

箭头函数

自定义对象

# 自定义对象(相当于python的字典)
eg:
    # 定义
    var dict1 = {'name':petter,'age':18,'gender':'male'}
    # 使用
    dict1.name # petter
    # 遍历
    for(var i in dict1){
        console.log(dict1[i])
    }
   
# 定义对象的标准格式
	var d = new Object()
    '''相当于定义了一个空字典'''

自定义对象

内置对象之Date对象

# 基本使用
	var d = new Date()  # 实例化一个Data对象
    # 获取当前时间
    d1.toLocaleString()  # 年/月/日 时:分:秒
    d1.toLocaleDateString()  # 年/月/日
    d1.toLocaleTimeString()  # 时:分:秒

Date对象常用方法

方法	功能
toLocaleString()	年/月/日 时:分:秒
toLocaleDateString()	年/月/日
toLocaleTimeString()	时:分:秒
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

Date对象基本使用

内置对象之JSON对象

# python与js的JSON对比
序列化
	python:json.dumps()
    js:JSON.stringify()
反序列化
	python:json.loads()
    js:JSON.parse()

内置对象之正则对象

# 创建方式
	# 方式一
    	var reg1 = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$")
    # 方式二(推荐使用)
    	var reg2 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      
# 正则使用
    '''
    正则对象.test(待匹配值)
    括号内不写东西相当于undefined
    '''
    reg2.test('1902396390@qq.com')  # ture
    
# 全局匹配
在正则表达式的最后添加一个字母g
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex  # 上次校验的最后一个位置
0
reg3.test('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false
'''加上g后，校验会循环进行，即校验完成后，停在最后的位置，再次校验再往后走，没值了从头开始'''

正则表达式

BOM操作(了解)

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面 
	子页面的操作其实可以通过一些手段传递给父页面(父子联动)
 	window.open([URL], [窗口名称], [参数字符串])
# 关闭页面
	window.close()  
 
window.navigator.appVersion  # 返回浏览器的平台和版本信息
window.navigator.userAgent  # 区分设备和浏览器


window.history.forward()  # 前进一页
window.history.back()  # 后退一页


window.location.href  # 获取页面的url地址
window.location.reload()  # 刷新页面
window.location.href = url  # 跳转到指定页面
"""window可以省略不写"""

# 弹框系列
	alert("FBI警告")  				警告
    	弹出警告框
  	confirm('是否退出')				确认
  		弹出选择框，用户可以选择确定和取消 返回true和false
  	prompt('请输入手机号')				提示
  		弹出输入框 返回用户输入内容 也可以通过第二个参数添加默认内容
   
# 计时器
    function MyFunc(){
            console.log('我是无参函数')
        }
	'''单次定时'''
	var t = setTimeout(MyFunc,5000)  # 5秒钟之后自动执行MyFunc
	clearTimeout(t)  # 取消定时器
  '''循环定时'''
  var s = setInterval(MyFunc,3000)  # 每隔3秒执行一次
  clearInterval(s)  # 取消定时器

补充说明

由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕 

解决的措施之一:
  	将script标签写在body内最下方

DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div')  # 结果是数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1')  # 结果是数组套标签对象
# 通过id值查找标签
document.getElementById('d1')  # 结果是标签本身

# 方法得出的标签对象还可以继续点击上述方法

间接查找

方法	功能
parentElement	父节点标签元素
children	所有子标签
firstElementChild	第一个子标签元素
lastElementChild	最后一个子标签元素
nextElementSibling	下一个兄弟标签元素
previousElementSibling	上一个兄弟标签元素