web开发技术复习笔记

一、Html 超链接各属性作用 href

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

target

可以让链接在新窗口打开

id

相当于一种标记的作用

表单form中各属性的作用 Action

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

method

定义表单结果从浏览器传送到服务器的方法，一般有get和post

name

表单的名称

常见表单元素的外观 text

可见的文本框

eg:

password

可以看作不可见的文本框，也就是密码框

eg:

radio

单选框

eg:

checkbox

多选框

eg:

file

文件选择框

eg:

submit

提交按钮

eg:

button

按钮框

eg:

单选和多选按钮如何设定默认选中的状态

对于单选和双选都是类似的，在所选的input标签中加入checked属性即可，举个栗子：

Male
Female

我们在这个例子中将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.通用选择器

通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。

举例：* { property1: value; property2: value; };

层次选择器 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.serif{font-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:link{color:#9ef5f9;}a:visited单击访问后超链接样式a:visited {color:#333;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}a:active鼠标单击未释放的超链接样式a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

通过inline-block达成水平布局

• 和块级元素一样，能设置元素的宽，高，垂直方向的间距。宽度如果不指定，则为内部元素的框定。
• 外部排列方式和行内元素一样，是水平排列的。

1.多个元素水平居中对齐

    .ly {
          display: table; 
          width: 100%;
          font-size: 0 !important;
          text-align: center;
    }
    .ly__item {
          display: inline-block;
          vertical-align: top;
          font-size: medium;
    }

2.多个元素水平两端对齐

       .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;
        }

注意：如果元素之间如果没有空格，回车之类的，两端对齐会失效。

3.多个元素水平居右对齐

    .ly {
          display: table; 
          width: 100%;
          font-size: 0 !important;
          text-align: right;
    }
    .ly__item {
          display: inline-block;
          vertical-align: top;
          font-size: medium;
    }

完整的一次示例：

DOCTYPE html>

 

    
    display:inline-block
 
    
       .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;
        }
    

 

    
        xxx 
         
        xxx 
         
        xxx 
         
        xxx 
         
      

 

参考博客：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  {
            $item.clone().find("img").attr("src",json.icon).
            end().children("div:last-child").html(json.nickname).end().appendTo($("aside"));
        });
    }
});