前端基础复习(代码片段)

shaozheng shaozheng     2022-12-15     422

关键词:

前端学习

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 语法:

设置样式:
	h1color:red;font-size:50px
	h1,acolor:red;font-size:50px    
    

导入样式:
	link href=‘../xx.css‘ type=‘text/css‘ rel=‘stylesheel‘
    
使用:
	body/h1
    
选择其分组:
	h1,acolor:red;font-size:50px    
    --》选择多个样式分组

继承:
	bodycolor:red
  --> 在body 标签内存在有 标签没有自己的样式,就会继承body 样式

css 选择器:

ul 无序列表

strong  

派生选择器:
	li strongcolor:red
    ---> li 标签下 strong 添加样式
    
    --》注意:定义的样式会按照样式改变,
    	     没定义样式会采用默认的样式
        
id 选择器:
	用 ‘#’ 定义
    div/ id=content 
    
#contentcolor:red


类选择器:
	‘.‘ 显示
    div/ class=content
    
.contentcolor: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


--> 滚动条创建

前端技能树,面试复习第50天——vue3.0基础|vue3有什么更新|compositionapi(代码片段)

1.Vue3.0有什么更新(1)监测机制的改变3.0将带来基于代理Proxy的observer实现,提供全语言覆盖的反应性跟踪。消除了Vue2当中基于Object.defineProperty的实现所存在的很多限制:(2)只能监测属性,不能监测对象检测属性的添加和删除... 查看详情

前端css效果复习(代码片段)

页面毛玻璃<style>.bgwidth:400px;height:200px;background-image:url('http://api.wx0725.top/sjbz?type=image&image=small');background-size:100%100%;.maowidth:300px;height:150px;backdr 查看详情

前端css效果复习(代码片段)

页面毛玻璃<style>.bgwidth:400px;height:200px;background-image:url('http://api.wx0725.top/sjbz?type=image&image=small');background-size:100%100%;.maowidth:300px;height:150px;backdr 查看详情

基础复习1(代码片段)

基础回顾1查找元素位置题目描述:找出元素item在给定数组arr中的位置输出描述:如果数组中存在item,则返回元素在数组中的位置,否则返回-1functionindexOf(arr,item)if(Array.prototype.indexOf)returnarr.indexOf(item);for(leti=0;i<arr.length;i++)if(it... 查看详情

零基础学前端.jquery入门与实践教程(代码片段)

...s-to:media复习:原生js的优缺点:优点:​所有前端框架的基础,类似于Java、C语言的大基础;缺点:​1.不能添加多个入口函数& 查看详情

零基础学前端.jquery入门与实践教程(代码片段)

...s-to:media复习:原生js的优缺点:优点:​所有前端框架的基础,类似于Java、C语言的大基础;缺点:​1.不能添加多个入口函数& 查看详情

前端考前复习阶段练习题(代码片段)

前端考前复习阶段练习题(一)运用所学的Vue的知识,编写程序,按要求完成下列内容。要求如下:(1)在根实例中创建数组,名为items,其内包含四个元素,分别是语文、数学、英语和物理;(2)使用v-for指令遍历数组,并通... 查看详情

前端技能树,面试复习第55天——代码输出:同步异步任务|事件循环(代码片段)

1console.log(1);setTimeout(()=>console.log(2);setTimeout(( 查看详情

实验三:sql语句基础(复习)(代码片段)

实验三:SQL语句基础(复习)实验目的oracle中常用数据字典的使用。复习并掌握表管理(创建、修改、创建约束、删除等)操作实验内容1.根据课堂讲授数据字典相关内容,将本人对数据字典所做的操作语... 查看详情

前端基础之css复习

!/usr/bin/envpython#-*-coding:utf-8-*-#前端基础之CSS#CSS语法#CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。‘‘‘selector{#选择器property:value;#属性:值property:value;...property:value}‘‘‘#例如:#h1{color:red;font-size:14px;}#css的四... 查看详情

前端之基础复习

!/usr/bin/envpython#-*-coding:utf-8-*-#web服务本质##!/usr/bin/envpython##-*-coding:utf-8-*-#importsocket##defmain():##sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)#sock.bind((‘localhost‘,8081))#so 查看详情

javascript基础复习(代码片段)

一.JavaScript一.介绍:1.JavaScript是一种专门在浏览器编译并执行的编程语言2.JavaScript处理用户与浏览器之间请求问题3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言二.弱类型编程语言风格VS强类型... 查看详情

python基础复习函数篇(代码片段)

目录1.猴子补丁2.global和nonlocal关键字3.迭代器和生成器4.递归函数5.高阶函数和lamdba函数6.闭包7.装饰器  1. 猴子补丁  猴子补丁主要用于在不修改已有代码情况下修改其功能或增加新功能的支持。  例如:在使用第... 查看详情

java基础知识复习(代码片段)

文章目录复习1.Java编译和运行2.Java运行环境3.Java注释4.Java中的打印5.数据类型整形浮点型字符类型字节类型布尔类型数据类型转换强制类型转换隐式类型转换小结6.变量命名规范7.运算符算数运算符逻辑运算符移位运算符关系运算... 查看详情

前端技能树,面试复习第47天——vue-router详解(代码片段)

1.Vue-Router的懒加载如何实现非懒加载:importListfrom\'@/components/list.vue\'constrouter=newVueRouter(routes:[path:\'/list\',component 查看详情

oo复习--基础知识回顾(变量,控制符)(代码片段)

构造方法构造方法的方法名必须与类名一样。构造方法没有返回类型,也不能定义为void,在方法名前面不声明方法类型。 Java中局部变量、实例变量、类变量(静态变量)publicclassVariablestaticintallClicks=0;//类变量Stringstr="hellowor... 查看详情

js基础--大复习(阶段一)(代码片段)

一:编程基础编程语言(了解)编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。从事编程的人员:就是我们程序员(程序猿)计算机是指任何能够执行代码的... 查看详情

动态sql基础概念复习(javaweb作业5)(代码片段)

作业5一.单选题二.填空题三.判断题作业5一.单选题1、以下有关<sql>元素说法错误的是()A、<sql>元素的作用就是定义可重用的SQL代码片段,然后在其他语句中引用这一代码片段B、使用<include>元素的refid属... 查看详情