前端基础复习

Posted 2020-12-23 shaozheng

目录

• 前端学习
  • bootstrap 4 学习：
• css :
  • css 语法：
  • css 选择器：
• js:
  • scrapt :
  • js 输出数据：
  • 选择器：
  • 页面写入：
  • 函数：
  • 无名函数
  • 函数自执行：
  • 函数参数：
  • 修改标签的自由属性：
  • 元素的属性操作：
• 事件：
  • 事件2：

前端学习

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
}

--> 滚动条创建