前端基础复习

目录

前端学习

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
}

--> 滚动条创建

相关推荐