前端基础复习
目录
前端学习
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 } --> 滚动条创建
相关推荐
架构技术交流 2020-07-28
前端小白 2020-07-19
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
yanzhelee 2020-10-13
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03