web开发技术复习笔记

Posted MangataTS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web开发技术复习笔记相关的知识,希望对你有一定的参考价值。

一、html

超链接各属性作用

href

用于链接到另一个网页,使用形式:href="https://www.baidu.com/"

target

可以让链接在新窗口打开

id

相当于一种标记的作用

表单form中各属性的作用

Action

用来定义表单处理程序的位置

method

定义表单结果从浏览器传送到服务器的方法,一般有getpost

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>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
      </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] [obj1obj2objn]

六、实验

实验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开发技术复习笔记的主要内容,如果未能解决你的问题,请参考以下文章

Spring MVC 复习笔记02

杂记复习笔记

jQuery5~7章笔记 和 1~3章的复习笔记

JS复习笔记06 方法

《微型计算机原理与接口技术》期末总复习 —— 一篇匆匆忙忙的复习笔记

复习笔记软件工程概论复习