web开发技术复习笔记
Posted MangataTS
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web开发技术复习笔记相关的知识,希望对你有一定的参考价值。
一、html
超链接各属性作用
href
用于链接到另一个网页,使用形式:href="https://www.baidu.com/"
target
可以让链接在新窗口打开
id
相当于一种标记的作用
表单form中各属性的作用
Action
用来定义表单处理程序的位置
method
定义表单结果从浏览器传送到服务器的方法,一般有get
和post
name
表单的名称
常见表单元素的外观
text
可见的文本框
eg:<input type="text" >
password
可以看作不可见的文本框,也就是密码框
eg:<input type="password">
radio
单选框
eg:<input type="radio">
checkbox
多选框
eg:<input type="checkbox">
file
文件选择框
eg:<input type="file">
submit
提交按钮
eg:<input type="submit">
button
按钮框
eg:<input type="button">
单选和多选按钮如何设定默认选中的状态
对于单选和双选都是类似的,在所选的input标签中加入checked属性即可,举个栗子:
<form action="" >
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female" checked>Female
</form>
我们在这个例子中将Female中加入了checked属性,所以默认选中Female,对于多选按钮同理,在所有想选择的地方加上一个checked即可
表单元素中readonly和disabled属性的应用
相同点
两者都能让用户不能更改表单域中的内容
readonly
①只针对input(text / password)和textarea有效
②表单元素在使用了readonly后,当我们将表单以POST或GET的方式提交的话,该元素的值会被传递出去
③使用该元素后外观不会有变化
disabled
① disabled对于所有的表单元素都有效
② 表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,该元素的值不会被传递出去
③ 使用该属性后,会让表单元素外观变灰
二、CSS
Css常见选择器
基础选择器
1.类型选择器
通过类型选择器可以选择某一类型的html标签,并对其使用样式
举例:h1 color:Red; font-size:30px;
这个就是选中所有的h1并让其颜色都为Red、size为30px
2.类选择器
通过类选择器可以选择class相同的html标签,并对其使用样式
举例:.error-message color:Red; line-height:2px;
这样就能选中所有class为"error-message"
的元素,并改变它的样式
3.ID选择器
ID选择器可以选择ID为某值的特定元素,并对其使用样式
举例:#title color:Red;
我们将属性id为"title"
的元素的样式更改。
4.标签内部CSS
即就在单个标签内部写上CSS的样式,并修改单个元素
举例:<h3 style="color:red;">Hello</h3>
层次选择器
1.后代选择器
举例:$('div p')
,在祖先元素的所有后代(子孙)中,查询指定元素
2.子元素选择器
举例:$('div > p')
,在父元素的所有第一级子元素中进行查找
3.相邻选择器
举例:$('.top + li')
,选择当前元素的直接同级相邻元素
4.兄弟选择器
举例:$('.top ~ li')
,选择当前元素后面所有同级兄弟元素
字体相关css属性
font-size
指定文本的字体大小
可以通过绝对大小、相对大小、长度值、百分比四个方法来更改字体大小
例如:
绝对大小:font-size: large;
相对大小:font-size: larger;
长度值:font-size: 12px;
百分比:font-size: 70%;
font-weight
指定字体的粗细。
可以通过文字或者数字来修改字体的粗细
文字方面:
- normal:默认值。定义标准的字符。
- bold:定义粗体字符。
- bolder:定义更粗的字符。
- lighter:定义更细的字符。
数字:
100~900
定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
代码举例:
p.normal font-weight:normal;
p.thick font-weight:bold;
p.thicker font-weight:900;
font-style
指定文本的字体样式
有四个可选值:
- normal:默认值。浏览器显示一个标准的字体样式。
- italic: 浏览器会显示一个斜体的字体样式。
- oblique:浏览器会显示一个倾斜的字体样式。
- inherit:规定应该从父元素继承字体样式。
代码例子:
p.normal font-style:normal;
p.italic font-style:italic;
p.oblique font-style:oblique;
font-family
设置文本的字体系列,换句话说就是修改字体样式
p.seriffont-family:"Times New Roman",Times,serif;
这个就算是设置了class为serif的字体为Times New Roman
样式
盒子模型中如何通过外边距的设置达成水平居中
①让盒子有一定的宽度
②盒子的左右边距设置为auto
代码举例:
div
width: 200px;
height: 200px;
margin: 30px auto;
padding: 4px;
border: 1px solid red;
这样就设置好了一个通过外边距居中的盒子
z-index必须配合position定位来使用
z-index 属性设置元素的重叠顺序,如果为正数,则离用户更近,为负数则表示离用户更远,有点类似图层的概念
- 网页中的元素都含有两个堆叠层级
- 未设置绝对定位时所处的环境,z-index是0
- 设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定
- 改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可
超链接伪类中hover的应用
作用:修改鼠标悬浮其上的超链接样式。
语法:标签名:伪类名声明;
eg:
a:hover
color:#B46210;
text-decoration:underline;
出了hover之外还有三种超链接伪类:
伪类名称 | 含义 | 示例 |
---|---|---|
a:link | 未单击访问时超链接样式 | a:linkcolor:#9ef5f9; |
a:visited | 单击访问后超链接样式 | a:visited color:#333; |
a:hover | 鼠标悬浮其上的超链接样式 | a:hovercolor:#ff7300; |
a:active | 鼠标单击未释放的超链接样式 | a:active color:#999; |
设置伪类的顺序:a:link->a:visited->a:hover->a:active
通过inline-block达成水平布局
- 和块级元素一样,能设置元素的宽,高,垂直方向的间距。宽度如果不指定,则为内部元素的框定。
- 外部排列方式和行内元素一样,是水平排列的。
1.多个元素水平居中对齐
<style type="text/css">
.ly
display: table;
width: 100%;
font-size: 0 !important;
text-align: center;
.ly__item
display: inline-block;
vertical-align: top;
font-size: medium;
</style>
2.多个元素水平两端对齐
<style type="text/css">
.ly
display: table;
width: 100%;
font-size: 0 !important;
text-align: justify;
.ly:after
content: '';
width: 100%;
display: inline-block;
.ly__item
display: inline-block;
vertical-align: top;
font-size: medium;
</style>
注意:如果元素之间如果没有空格,回车之类的,两端对齐会失效。
3.多个元素水平居右对齐
<style type="text/css">
.ly
display: table;
width: 100%;
font-size: 0 !important;
text-align: right;
.ly__item
display: inline-block;
vertical-align: top;
font-size: medium;
</style>
完整的一次示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>display:inline-block</title>
<style type="text/css">
.ly
display: table;
width: 100%;
font-size: 0 !important;
text-align: justify;
.ly:after
content: '';
width: 100%;
display: inline-block;
.ly__item
display: inline-block;
vertical-align: top;
font-size: medium;
</style>
</head>
<body>
<div class="ly">
<div class="ly__item">xxx </div>
<div class="ly__item">xxx </div>
<div class="ly__item">xxx </div>
<div class="ly__item">xxx </div>
</div>
</body>
</html>
参考博客:https://www.jianshu.com/p/707d9aab1d87
三、javascript
Js中的三种弹框命令:alert(),prompt(),confirm(),及其区别
alert()
该弹窗直接将括号里面的文本信息显示在对话框中
alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。
eg:alert("Hello")
prompt()
该弹窗能显示信息并且让我们能填入信息,并返回给调参者
prompt是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
eg:name=prompt( "请问你叫什么名字?" );
confirm()
该弹窗能显示信息并且能让我们做出一个选择:确定或者取消,然后返回一个bool值给调参者
confirm是确认框,两个按钮,确定或者取消,返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
eg:con=confirm( "你喜欢玫瑰花么?" );
Math.radom()的使用方式
Math.random()方法返回大于等于 0 小于 1 的一个随机数,我们可以对它乘以一个倍数来获得我们想要范围的随机值
值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)
数组中sort()方法的应用
直接使用arr.sort()
的话,数组中的元素会默认变成字典序从小到大排序,所以我们需要写一个自定义排序的方法,举个栗子:
var arr = [9,7,2];
arr.sort(function(a,b)
if(a>b) // 如果 a 大于 b,位置互换
return 1;
else //否则,位置不变
return -1;
);
// 排序结果: 2,7,9
我们这个function就是一个排序函数,当然我们也可也直接将排序函数写在外面,然后直接将函数作为参数调参即可
var arr = [9,7,2];
function mysort(a,b)
if(a>b) // 如果 a 大于 b,位置互换
return -1;
else //否则,位置不变
return 1;
arr.sort(mysort);
// 排序结果: 9,7,2
alert(arr);
Document对象直接定位元素的四种方法getElement[s]By[Id,Name,ClassName,TagName]
- 一、document.getElementById(“id的值”):该方法返回单个元素,因为html中id只能是唯一的
- 二、document.getElementsByName(“name属性值”):该方法返回一个元素对象集合
- 三、document.getElementsByClassName(“ClassName标签名”):返回文档中所有指定类名的元素集合,作为 NodeList 对象。
- 四、document.getElementsByTagName(“标签名称”):该方法返回一个元素对象集合
bom对象刷新本页面的方法:reload
通过location.reload();
即可刷新当前页面
四、jQuery
jquery的三大特征:
一、$等同于jquery
二、链式操作
三、隐式迭代
onload事件与ready事件的区别
onload
事件是原生js的函数,ready
事件是jQuery的函数
区别主要有:
一:
-
原生js会等待页面dom元素加载完毕,并且页面图片也加载完毕才会执行
-
jquery会等到dom元素都加载完毕,但不会等到图片也加载完毕就执行
二:
-
通过原生js可以获取到dom元素的属性值
-
通过jquery不可以获取到dom元素的属性值
三:
- 原生js如果编写了多个入口函数,后面编写的会覆盖前面编写的
- jquery如果编写了多个入口函数,后面的不会覆盖前面的
修改元素内容:.html()或.text()
.html():
用来读取或者设置某个元素中的HTML内容
eg:$("p").html("hello world");
.text():
可以用来读取或者没置某个元素中的文本内容
eg:$("p").text("Hello world");
失焦事件blur()的作用
当元素失去焦点 (blur) 时改变其颜色。
遍历父级元素:
parent()
:获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素,并用匹配元素构造一个新的 jQuery 对象。
遍历所有祖先元素:
parents()
获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。
五、Ajax
ajax常用属性
url,data,type,dataType,success,error
ajax常见的返回类型
text,html,xml,json等
json字符串格式
对象“属性1”:”值1”,”属性2”,”值2”……”属性n”:”值n”,
数组 [ o b j 1 , o b j 2 , … … o b j n ] [obj_1,obj_2,……obj_n] [obj1,obj2,……objn]
六、实验
实验2排序和实验4ajax
实验二的排序JS部分
let flag = 1;
function init()
let parent = document.getElementById("pricesList");
let domArr = [];
for(let i = 0;i < parent.childNodes.length;++i)
let obj=;
if(parent.childNodes[i].nodeType == 1)
obj.dom = parent.childNodes[i];
obj.price = obj.dom.lastElementChild.innerHTML.trim().substring(3);
domArr.push(obj);
domArr.sort(function(a,b)
return a.price - b.price;
);
return domArr;
let domArr;
window.onload = function()
domArr = init();
function sort()
let span = document.getElementsByTagName("span")[0];
if(flag)
flag = 0;
span.className = "up";
for(let i = 0;i < domArr.length; ++i)
domArr[0].dom.parentNode.appendChild(domArr[i].dom);
else
flag = 1;
span.className = "down";
for(let i = domArr.length - 1; i >= 0; --i)
domArr[0].dom.parentNode.appendChild(domArr[i].dom);
实验四的Ajax的JS关键部分
$.ajax(
url:"list.json",
dataType:"json",
success:function(list)
let $item = $('<div><div class ="icon"><img/></div><div></div></div>');
list.forEach(json =>
$item.clone().find("img").attr("src",json.icon).
end().children("div:last-child").html(json.nickname).end().appendTo($("aside"));
);
);
以上是关于web开发技术复习笔记的主要内容,如果未能解决你的问题,请参考以下文章