标签：function console log DOM 标签 py 42 dic var

今日学习内容

• 运算符
• 流程控制
• 函数
• 内置对象
• BOM与DOM操作

运算符

# 算术运算符
  前自增: ++num
  后自增:num++
  共同点:对于变量自身而言是没有任何影响的,都是在自身的基础上+1
  不同点:在变量的赋值过程中,前自增是先自增在赋值,后自增是先赋值在自增 
    
var x=10;
var res1=x++;  '先赋值后自增1'
var res2=++x;  '先自增1后赋值'

# 比较运算符
  弱等于:自动转换类型
  字符串的'5'等于整型的5
  '5' == 5  '结果是true js会自动转换成相同数据类型比较值是否一样'
  强等于:不转换类型
  '5' === 5  '结果是false'

# 逻辑运算符
	python中使用 and、or、not
  js中使用&&、||、!

流程控制

# if判断
记住这个写的格式就差不多会使用

1.单if分支
  	if(条件){
      条件成立执行的分支代码块
    }
2.if...else分支
  	if(条件){
      条件成立执行的分支代码块
    }else{
      条件不成立执行的分支代码块
    }
3.if...else if...else分支
  	if(条件1){
      条件1成立执行的分支代码块
    }else if(条件2){
      条件1不成立条件2成立执行的分支代码块
    }else{
      条件1和2都不成立执行的分支代码块
    }
4.switch语法
	var n1 = 1;
    switch (n1) {
      case 0:
      console.log("空我");
      break;  # 如果不加break会基于当前位置一直往下运行
      case 1:
      console.log("亚极陀");
      break;
      case 2:
      console.log("灵骑")
    default:  # 没有对应条件统一执行default子代码
      console.log("响鬼")
    }
    
# 2.while循环
	while(循环条件){
    循环体代码
  }
  var i = 0;
  while (i<3){
  console.log(i);
  i++;
  }
  0
  1
  2
  

# 3.for循环
	for(初始值;循环条件;每次循环之后的操作){
    循环体代码
  }
  循环打印0到9的数字
    for (var i=0;i<4;i++) {
      console.log(i);
    }
    0
    1
    2
    3
    
"""
使用for循环打印出数组内所有的元素
	var l1 = [11, 22, 33, 44, 55]
	for(var i=0;i<l1.length;i++){
    console.log(l1[i])
	}
	> 11
	> 22
	> 33
	> 44
    > 55
"""

三元运算符

python中的三元运算
	res = 11 if 1 > 2 else 22
  '''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
	res = 1 > 2 ? 11 : 22
 	'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!

函数

# 定义函数
  function 函数名(参数1， 参数2){
  函数体代码
      return 返回值
  }

  1.function 定义函数的关键字 相当于python中的def
  2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
  3.参数可写可不写
  4.return返回值
函数调用:
	函数名加括号 有参则传参即可!!! 
# 无参函数
  function f1() {
      console.log(212)
  }
  f1()  # 212

# 有参函数
  function f1(a, b) {
      console.log(a, b)
  }
  f1()  # undefined undefined
  f1(1)  # 1 undefined
  f1(1, 2)  # 1 2
  f1(1,1,1,1,1)  # 1 1
  
  '''js中的函数提供了有个内置关键字arguments:接收所有参数'''
  function f2(){
    console.log(arguments)
    if (arguments.length === 0){
      console.log('什么参数都没传')
    }else if(arguments.length === 1){
      console.log('传了一个参数')
    }else{
      console.log('传了多个参数')
    }
  }
  f2()  
  # Arguments [callee: ƒ,Symbol(Symbol.iterator): ƒ] 
  # 无
  f2(1)  
  # Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  # 一
  f2(1,2,3,4,5)  
  # Arguments [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  # 多
    
# 返回值参数
  return不支持返回多个数据,返回一个数据，包括一个列表这种
  function f1(){
      return 123,123,123
  }
  f1()  # 123
  function f2() {
      return [1,2,3,4]
  }
  f2()  # [1,2,3,4]
    
# 匿名函数
  var aa = function (){
      console.log(123)
  }
  aa
  # f(){
  # console.log
  #  }
  aa()  # 123

# 箭头函数
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(nunm1, num2) {
    retuen num1+num2;  # //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

自定义对象

自定义对象  相当于python里的字典
可以通过句点符(.)的方式取值
var a = {'name': 'kuuga', 'age': '20'}
a.name  # kuuga
# for循环取值
for(var i in a){  # i 是字典中的键
    console.log(a.[i]) 
}  

标准格式的自定义对象(自定义对象 内置对象 第三方对象)
var dic = new Object()  # 相当于生成空字典

内置对象

# Date对象
var dic = new Date()
dic.toLocaleString()  # '2022/4/28 18:46:21'
dic.toLocaleDateString()  # '2022/4/28'
dic.toLocaleTimeString()  # '18:49:34'

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

# 将当前时间按 2017-01-01 11:11 星期三 格式输出
const WEEKMAP = {
    0:"星期日",
    1:"星期一",
    2:"星期二",
    3:"星期三",
    4:"星期四",
    5:"星期五",
    6:"星期六"    
}; //定义数字与星期之间的关系

function showTime() {
    var dic = new Date();
    var year = dic.getFullYear();
    var month = dic.getMonth() + 1; # 月份范围0~11
    var day = dic.getDate(); 
    var hour = dic.getHours();
    var minute = dic.getMinutes() < 10?"0"+dic.getMinutes():dic.getMinutes(); # 三元运算
    var week = WEEKMAP[dic.getDay()];  # 星期0~6
    var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}`;
    console.log(strTime)
}
showTime();  # 2022-4-28 19:11 星期四

JSON对象

# python中如何序列化反序列
  import json
  json.dumps()
  json.loads()
# js中如何序列化反序列化
  JSON.stringify()  # 序列化
  JSON.parse()  # 反序列化
例子:
  var dd = {'name': 'kuuga', 'age': '12'}
  JSON.stringify(dd)  # '{"name":"kuuga","age":"12"}'
  var js = '{"name":"kuuga","age":"12"}'
  JSON.parse(js)  # {name: 'kuuga', age: '12'}

正则对象

# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

# 使用正则
reg2.test('jason123')   true

'''括号内什么都不写 就相当于写了undefined'''
reg2.test() 		   true
"""
验证
var reg3 = /undefined/
reg3.test('jason666')		false
reg3.test('undefined')	     true
reg3.test()				    true
"""

# 全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
0
reg3.test('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false

BOM操作

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
# 浏览器窗口大小
  window.innerHeight
  980
  window.innerWidth
  860

window.open('https://www.baidu.com','','width=400,height=400')  
# 打开子页面 
  window.open()
  子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面(空白页)
  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("你看到了吗？")    警告
  confirm('要不要敲老赵的天灵盖')    确认
  	获取用户是点击取消还是确认 返回false和true
  prompt('你还有什么要交代的吗')     提示
  	获取用户输入的内容 也可以通过第二个参数添加默认内容
   
# 计时器
  '''单次定时'''
  var t = setTimeout(showMsg,9000)  # 9秒钟之后自动执行showMsg
  clearTimeout(t)  # 取消定时器
  '''循环定时'''
  var s = setInterval(showMsg,3000)  # 每隔3秒执行一次
  clearInterval(s)  # 取消定时器
  
  function showMsg() {
          alert(123)
        }
  var t = setInterval(showMsg,3000)
  function clearMsg() {
  	clearInterval(t)
  }
  setTimeout(clearMsg, 9000)

# 定时弹窗的一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        function showMsg() {
            alert(123)
        }
        var t = setInterval(showMsg,3000)
        function clearMsg() {
            clearInterval(t)
        }
        setTimeout(clearMsg, 9000)
    </script>
</head>
<body>
</body>
</html>

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   上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法

标签：function,console,log,DOM,标签,py,42,dic,var
来源： https://www.cnblogs.com/kazz/p/16204356.html

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