标签：console log DOM 对象 标签 前端 js var d1
内容概要
- 运算符
- 控制流程
- 函数
- 内置对象
- BOM与DOM操作
运算符
# 1.算术运算符
var x=10;
var res1=x++; '先赋值后自增1'
# res1 = 10 x = 11
var res2=++x; '先自增1后赋值'
# res2 = 11 x = 11
# 2.比较运算符
弱等于:自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型
'5' === 5 '结果是false'
# 3.逻辑运算符
python中使用 and、or、not
js中使用&&、||、! # 与 或 非
流程控制
if判断
# 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都不成立执行的分支代码块
}
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("无所事事!!!")
}
"""
需要注意的是，语句break;不能省略
如果不加break会基于当前位置一直往下运行
"""
while循环
# while循环
while(循环条件){
循环体代码
}
for循环
# for循环
# 语法结构:
for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
# 循环打印0到9的数字
for (var i=0;i<10;i++) {
console.log(i);
}
"""
使用for循环打印出数组内所有的元素
var l1 = [100, 200, 300, 400]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}
"""
三元运算符
python中的三元运算
res = 11 if 1 > 2 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
res = 1 > 2 ? 11 : 22 # 22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!
函数
函数的定义与调用
# 函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
# 函数调用:
函数名加括号 有参则传参即可!!!
函数类型
# 1无参函数
function f1(){
console.log('哈哈哈')
}
f1()
# 有参函数
function f2(a, b){
console.log(a, b)
}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用
f2(1,2) # 可以调用
f2(1,2,3,4,5) # 可以调用
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f3(a, b){
console.log(arguments)
}
f3(1,2,3,4,5,6) # [1, 2, 3, 4, 5, 6, callee: ƒ, Symbol(Symbol.iterator): ƒ]
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 3.返回值参数
return不支持返回多个数据
# 4.匿名函数
var ff = function (){
console.log(123)
}
# 5.箭头函数(drf中vue框架会再次接触)
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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
"""了解:作用域(与python一致)"""
自定义对象
# 自定义对象(相当于python里面的字典)
# 方式一
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
# 取值操作
var d2 = {'name':'清华大学','age':107}
d2.name # 清华大学
# 循环取值
for(var i in d2){X
console.log(d2[i])
}
# 清华大学 107
# 方式二 (后面更常用)
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
"""pytgon中反射setattr可以 实现字典句点符取值"""
内置对象
Date对象
# 创建Date对象
var d1 = new Date()
d1.toLocaleString() '2022/4/28 10:47:01'
d1.toLocaleDateString() '2022/4/28'
d1.toLocaleTimeString() '10:47:01'
# Date对象的使用方法
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
Date对象小练习
# 小练习:2017-12-27 11:11 星期三
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
JSON对象
# python中实现序列化与反序列化
import json
json.dumps() # 序列化
json.loads() # 反序列化
# js中实现实现序列化与反序列化
JSON.stringify() # 序列化
JSON.parse() # 反序列化
正则对象
# 创建正则表达式的两种方式
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 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
"""
全局匹配如果有匹配正确的话会停在最后的位置
下一次匹配会接着上一次的位置开始匹配不会重头开始匹配
如果匹配为false 就会重置即下一次从开头的位置开始匹配
"""
BOM与DOM操作
BOM操作(了解)
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面
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)
补充说明
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方
DOM操作*
HTML DOM 树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
方法操作
Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)
'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
# html
<div id="d1">
<p class="c1">
<span ></span>
</p>
</div>
<div id="d2"></div>
<div id="d3"></div>
<script>
function CloseView(){
window.close()
}
# setTimeout(CloseView,9000) //九秒后自动关闭窗口
var t = setTimeout(CloseView,9000) //九秒后自动关闭窗口
clearTimeout(t) # 取消定时器
</script>
标签：console,log,DOM,对象,标签,前端,js,var,d1 来源： https://www.cnblogs.com/Mr-fang/p/16204353.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。