前端基础复习
目录
前端学习
bootstrap 4 学习：
样式：
https://v4.bootcss.com/docs/getting-started/introduction/
css :
层叠样式表：
标签 style='width:80px;height:45px;background-color=""'
style="text-align:center;background-color"
span 容器标签（一个区域！！！）
font-size:24px 字体的大小
b 标签（加粗） color : 文字字体变色
background-color 背景图片
整体样式：
div (通用容器标签)--》 只是容器，可疑包裹容器（可相互包裹）
--》 容器内的默认样式
margin:auto 让容器本身水平居中 --》 没效果
text-align:center; 容器内部元素居中
容器本身水平居中：
--> 内容的展示宽度--》 页面的宽度
--》减少容器的宽度 ;width:500
css 语法：
设置样式：
h1{color:red;font-size:50px}
h1，a{color:red;font-size:50px}
导入样式：
link href='../xx.css' type='text/css' rel='stylesheel'
使用：
body/h1
选择其分组：
h1，a{color:red;font-size:50px}
--》选择多个样式分组
继承：
body{color:red}
--> 在body 标签内存在有 标签没有自己的样式，就会继承body 样式
css 选择器：
ul 无序列表
strong
派生选择器：
li strong{color:red}
---> li 标签下 strong 添加样式
--》注意：定义的样式会按照样式改变，
没定义样式会采用默认的样式
id 选择器：
用 ‘#’ 定义
div/ id=content
#content{color:red}
类选择器：
'.' 显示
div/ class=content
.content{color:green}
js:
// 单行 /* */ 多行
var；
定义变量
var 变量名（有意义） = 值
var k1,k2,k3... = va,v2,v3....
--》 区分大小写 （值不同）
变量的声明：
变量 --》 容器（可修改）
console.log(xx) 输出xx
scrapt :
document.getElementByID('id 属性的值')：
console.log(document)
---->通过当前页的id 的值
document.getElementsByTagname('标签名')
document.getElementsByName('xxx 的name 的名字')
document.getElementsByClassName('class 的类名') ---》 集合
js 输出数据：
--> 输出数据
script /
document 当前页面对象
document.write('写入数据')
conslog.log('打印数据')
window.alert('弹窗') ---》 页面的弹窗效果
选择器：
document.querySelector('选择器')：
var op = document.querySelector('p')
var op = document.querySelector('.wrap') # 单个获取
var op = document.querySelectorAll('.wrap') #获取多个
consolg.log(op)
页面写入：
--->元素内部修改文本
body class=box;
scrapt
innerHtml [ 可以添加 / 修改页面的标签]
innerText [只会识别纯文本]
/scrapt
-->修改页面的文本数据
var ob = document.getElementsByTagname('标签名')
ob[0].innerHtml= '修改的内容'
函数：
script
function coke(){
// 代码
}
coke() // 函数执行！！
/script
无名函数
var coke = function (){
consolg.log('xxx')
}
coke() / /函数执行
匿名函数：
function (){
consolg.log('匿名函数')
} // 不能独立存在
(function(){
consolg.log('匿名函数')
})()
函数自执行：
(function(){
consolg.log('匿名函数')
})()
(function(){}())
函数参数：
function chunhua(a,b){
// 代码执行
consloe.log(a,b)
}
chunhua('碳酸','糖')
修改标签的自由属性：
script
var oimg = document.querySelector('img')
oimg.src = 'xxx.jpg'
oimg.className = 'box'
--> 查找标签--》 修改标签的属性--> 属性名
元素的属性操作：
obj.getAttribute('name')
obj.setAttribute('name','xxx')
obj.removeAttribute('name')
-->obj.style.cssText='样式'
事件：
var oimg = document.querySelector('.wrap')
oimg.onclick = function(){
// 捕捉用户点击
console.log(1111)
oimg.style.height='300px' //点击修改样式
oimg.style.cssTest='width:300px ;height:500' //点击修改多个样式
}
oimg.onmousemove = function(){
// 鼠标在其中滑动 执行
console.log(1111)
}
--> onclick 点击事件(左键点击)
onmousemove 鼠标滑动
onkeydown 捕捉键盘输出
事件2：
window.onload =function(){
//页面加载完成触发
console.log('')
}
window.onresize=function(){
//页面展示页面宽度改变
console.log('')
}
window.onresize=function(){
//页面滚动条移动
console.log('')
}
style/
html{
height:3000px
}
--> 滚动条创建
