ASP.Net服务器控件

给后端工程师的前端开发课程

HTML和CSS工作模式

前端工作模式：BS

HTML5基础标签学习

p:定义一个段落(paragraph)

a:超链接
img:图片

div:块元素

我们每定义的一个div实际上是没有效果的，只不过是是我们当前定义了一个容器。他里面可以放置任何元素。

块级元素，默认情况下宽度占100%，高度根据div内部的元素的设计而进行自动的扩展。

span:行内元素

行内元素，与div正好相反。

默认情况下定义的就是一个流式的布局。宽度根据div内部的元素的设计而进行自动的扩展，高度按照内部元素设计进行的一个自适应。(宽和高都是自适应)

form:表单

输入选项下拉框登录按钮等。。。

table:表格

b:粗体显示
h1/h2/h3/h4/h5/h6:标题元素

input:表单元素
ul:列表元素（ol）

Block块元素vs lnline行内元素

Box model盒子模型

Block块元素，宽度默认100%
Inline行内元素，宽度按实际元素宽度(类似于一种追加的形式在后面显示)

Tag Attribute标签属性

<a href="/index.html" target="_blank" style="color: red;">Home</a>

·不同的标签拥有不同的属性
·有很多属性是所有标签共有的，比如: id / class / style /title等等

单标签和双标签

<!-―双标签,开始和结束标签-->
<a href=" /index.html" target="_blank" style="color: red;">Home</a>
<!--单标签-->
<img src=" logo.png" alt=" logo"/>

Demo

标签定义 HTML 表格

一个 HTML 表格包括

元素，一个或多个、元素。

以及

元素定义**表格行(row)**，元素定义**表头(head)**，元素定义表格单元,里面放真正的数据。

更复杂的 HTML 表格也可能包括、、、、以及元素。

ul

<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>

标签定义无序列表。

将

标签与
标签一起使用，创建无序列表。

**提示：**使用 CSS 为列表定义样式。

**提示：**使用标签创建有序列表。

form

<form action="/users" method="get">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交">
</form>

<form> 标签用于创建供用户输入的 HTML 表单。
<form> 元素包含一个或多个如下的表单元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

form 标签是表单标签

action 属性设置提交的**服务器地址**

method 属性设置提交的方式 GET(默认值)或 POST

表单提交的时候，数据没有发送给服务器的三种情况：

1、表单项没有 name 属性值

2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器

3、表单项不在提交的 form 标签中

**GET 请求**的特点是：

1、浏览器地址栏中的地址是：action 属性[+?+请求参数]

请求参数的格式是：name=value&name=value

2、不安全

3、它有数据长度的限制

**POST 请求**的特点是：

1、浏览器地址栏中只有 action 属性值

2、相对于 GET 请求要安全

3、理论上没有数据长度的限制(其提交的数据不通过url参数走)

input

<form action="/users">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交">
</form>

标签规定了用户可以在其中输入数据的输入字段。

元素在元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

注意: 元素是空的,它只包含标签属性。
【提示: 你可以使用元素来定义元素的标注。】

关于DOCTYPE

当前文档所遵循的HTML标准和版本

调试

Firebug & Chrome Dev Tools

调试HTML Document
调试CSS和即时编辑

网络资源调试
HTTP Request/Response

性能分析
etc

HTML DOM和CSS3基础学习

HTML DOM

我们知道的HTML代码是一个树形结构。

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM **以树结构**表达 HTML 文档。

Javascript DOM操作

Javascript对HTML DOM的操作（实操）

Javascript对XML的操作

document.getElementByTags('a')
document.getElementsByClassName('row')
etc.

HTML DOM加载机制和事件

①DOMContentLoaded
②load

DOMContentLoaded 和 window.onload 的区别

当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页面包含很多样式文件、图片文件、子框架页面(iframe)的话，onload 事件也会被相应延迟到这些文件加载完成才执行，有时候并不是我们所需要的，例如我们想知道页面从接受完毕到 dom 树解析完成所需要的时间，那么 onload 事件则不适合了。

这个时候 DOMContentLoaded 就出场了，它定义为：当页面文档加载并解析完毕之后会马上出发 DOMContentLoaded 事件，而不会等待样式文件、图片文件和子框架页面的加载。

CSS3基础

cSS选择器定义

by class,比如: **.**row. [公共类]

by id,比如: **#**wrapper [唯一]

by tag name,比如: a
style属性,比如: style=“color: red;”
高级选择器冒号":",比如: a:hover, li:last-child

层级选择:比如 div#wrapper a { …}

通用属性:比如 div, p { …}

demo

ul li :last-child 父子结构加上特定属性限定

样式是可以继承的

Block块元素vs lnline行内元素

Box model盒子模型

Block块元素，宽度默认100%
Inline行内元素，宽度按实际元素宽度(类似于一种追加的形式在后面显示)

块元素

divp

table

ul
form
h1/h2/h3/h4/h5/h6

etc

行内元素

a
. img

span
. b/i/u/strong/em

button
input
etc

cSS3页面布局

流式布局: float

位置定位: position

float属性
left
right

demo

clear属性

清除浮动，另起一行

left
right

both

.new_row{clear: both;
}

position属性

static(静态定位)：块级元素垂直堆叠

relative (相对定位)：真正的用途：可以为 “后代元素” 创造 “定位上下文” ；相对其 “原始位置” 控制该元素的 “偏移量”，同时不影响周围其他的元素。

absolute(绝对定位)：相对其最近的 “定位上下文” || “非static定位的‘祖先元素’” || “html元素”，进行定位。会脱离文档流

fixed(固定定位)：其“定位上下文”被自动设置为浏览器视口， 脱离文档流。

应用场景：

“绝对定位”–>非常适合 “创建弹出层”，“提示”，“对话框”，这类覆盖于其他内容之上的组件。

场景：利用偏移实现自动大小,relative + absolute 实现，前者生成 “定位上下文”, 后者加上 top bottom left right 这些偏移量的控制，设置其中3个自动控制剩余的1个。

.photo-header {position: relative;}.photo-header-plate {position: absolute;right: 4em;bottom: 4em;left: 4em;}
//如果absolute的父节点是relative定位的话，那么其定位参考点就是其父节点的位置；如果父节点不是relative的话，那么其定位参考点就是当前整个浏览器窗口的定位
<header class="photo-header"><div class="photo-header-plate"></div>
</header>

display属性

block
inline
inline-block

none
etc.

可以实现块级元素和行级元素的互转

其他属性

color

font-size

font-weight

border

background

border-radius

box-shadow

transform 实现动画效果

visibility
· etc.

display vs visibility

都可以使元素不可见

. display: 为none时会从文本流中去除(并不参与页面布局的计算)
. visibility: 为hidden时仍旧参与文本流布局，只是视觉不可见

JavaScript入门

运行环境

①浏览器

浏览器: Chrome Dev Tools & Firebug

②服务器端: v8, spidermonkey etc.

采用node.js

版本

ECMAScript规范

. JavaScript 5
ECMAScript 2015: JavaScript 6

JavaScript是OOP吗?

是

数据类型学习

js中是没有hash和字典的概念的

什么是false

null
undefined

false

变量声明

var
局部变量和外部作用域变量

变量命名

驼峰式命名
var helloWorld = “hello world”;

function showAlert() { …}

条件控制

if(true) { · . · else { .· }

Boolean表达式

&&
ll
!

循环和遍历

for (var x= 0;x++;x <10 ){
}

条件控制

switch ( a) {
case 1:break;
default:
}

function返回值

function counter(x){
return x**x;
}
counter ( 2 );

object

var user = {
name : "hello",
age: 18
}
console.log ( user.name ) ;
console.log ( user['age'] );

Function其他

var showAlert = function ( name ) {
console.log ( name ) ;
}
showAlert( ' 343');

Closure闭包

var showAlert = function ( name ) {
name = name + ""+"world" ;
return function (index) {
console.log (index +"" + name ) ;}
}
var error = showAlert ('hello'); //返回一个函数  内部保留了其上下文的作用域（即为可以读到showAlert函数中name的值的）
error(1);
//结果：1helloworld

Closure闭包

( function( ){
var a = 1 ;
console.log (a) ;
})();
//如果我们在当前页面中定义一些独立只属于它自己的操作的话，我们就可以采用这种方式（作用域和继承的问题）

JavaScript DOM操作

DOM操作

DOM节点(网页中的一个标签)查询
DOM节点标签属性增加、删除、修改

DOM节点增加、删除、修改
浏览器事件的操作
etc.

//查询
document.getElementByTags ('a');
document.getElementsByClassName ('row') ;

Event事件

click
mouseover

mousemove

focus 聚焦
blur

touch

etc

jQuery和AJAX学习

jQuery入门

jQuery介绍

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(document).ready(function(){$("p").click(function(){$(this).hide();});
});</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

DOM节点选择

$ ( 'p' );
$ ( '.row ' ) ;
$ ( '#wrapper ' ) ;
$ ( '.row : last' ) ;
$ ( 'input [ name="username" ]' );

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有

元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素
$(“#test”).hide() - 隐藏 id=“test” 的元素

jQuery 入口函数:

$(document).ready(function(){// 执行代码
});
或者
$(function(){// 执行代码
});

JavaScript 入口函数:

window.onload = function () {// 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是**在 html 所有标签(DOM)都加载之后**，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

DOM节点维护

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$(“#test”).hide() - 隐藏 id=“test” 的元素

jQuery对象!=DOM对象

var wrapper = $('#wrapper') ;
var wrapper2 = document.getElementById('wrapper');
wrapper ==wrapper2 //false
wrapper.get(0)== wrapper2 //true

jQuery是基于DOM实现的

DOM属性操作

$ ('#wrapper').adddClass ('theme') ;  //对元素进行的修改是会实时的反馈到页面上的
$('#wrapper').removeClass ('theme') ;
$ ('#wrapper').attr('class') ; //放回属性的值
$ ('#wrapper').attr('custom-attr' , 'attr_value') ; //设置属性的值
$ ('a').attr ('href') ;

Event

$ ( '#wrapper ' ).click ( function( ) {
console.log ( 'wrapper clicked ' );})// same as
$ ( '#wrapper ' ).on ( 'click' , function ( ) {
console.log ( 'wrapper clicked ' ) ;
})

自定义事件

$ ('#wrapper').on ('custom-event-name', function(e){
console.log ('custom event triggered') ;
});$ ('#wrapper').trigger ('custom-event-name') ;  //触发（需要手动去触发）

自定义事件-动态元素

$ ( document ).on ( 'click', '#wrapper', function( e){
console.log ( 'custom event triggered ' );
});

因为有些时候我们的一部分js代码是在打开页面的时候没有出来的，他需要用户执行相关的操作之后才会出现。那么这个时候如果我们想要的是在用户执行特定的操作之后我们才会去触发的事件的话，就采用动态元素。

Animate动画

$('#wrapper').animate ( {
height: 300,
opacity: 0.2})

AJAX介绍

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新(不会堵塞原页面)。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

有很多使用 AJAX 的应用程序案例：Google Maps、Gmail、Youtube 和 Facebook。

页面交互

同步:a链接请求

异步:AJAX
页面体验和性能

《给后端工程师的前端开发课程》笔记相关推荐

《信贷的逻辑与常识》笔记
序银行信贷风险管理的反思现状与趋势银行贷款的质量变化与经济周期.宏观调控政策等存在很高的相关性现在银行不良贷款的增加主要是前几年经济快速增长时企业过度投资.银行过度放贷所带来的结果. 从历史情 ...
AI公开课：19.02.27周逵(投资人)《AI时代的投资逻辑》课堂笔记以及个人感悟
AI公开课:19.02.27周逵(投资人)<AI时代的投资逻辑>课堂笔记以及个人感悟目录课堂PPT图片精彩语录个人感悟课堂PPT图片精彩语录更新中-- 文件图片已经丢失-- ...
人工智能入门算法逻辑回归学习笔记
逻辑回归是一个非常经典的算法,其中也包含了非常多的细节,曾看到一句话:如果面试官问你熟悉哪个机器学习模型,可以说 SVM,但千万别说 LR,因为细节真的太多了. 秉持着精益求精的工匠精神不断对笔记进行 ...
【逻辑回归学习笔记】
算法描述 1.逻辑回归要做的事就是寻找分界面实现二分类. 2.问题假设:对一堆三角形和正方形分类. 3.数据输入:已知正方形和三角形的坐标和标签. 4.算法过程: 知识储备 1.分类和回归 ①分类的目 ...
逻辑回归函数学习笔记
继续逻辑回归学习,今日笔记记录. 1.逻辑回归和线性回归的关系:对逻辑回归的概率比取自然对数,则得到的是一个线性函数,推导过程如下. 首先,看逻辑回归的定义其次,计算两个极端y/(1-y),其值为( ...
2.2 逻辑回归-机器学习笔记-斯坦福吴恩达教授
逻辑回归上一节我们知道,使用线性回归来处理 0/1 分类问题总是困难重重的,因此,人们定义了逻辑回归来完成 0/1 分类问题,逻辑一词也代表了是(1) 和非(0). Sigmoid预测函数在逻辑 ...
LVM逻辑卷分区笔记
磁盘的静态分区有其缺点:分区大小难评估,估计不准确,当分区空间不够用的时候,系统管理员可能需要先备份整个系统,清除磁盘空间,然后重新对磁盘进行分区,然后恢复磁盘数据到新分区,且需要停机一段时间进行恢复 ...
适合理工直男的钟平老师逻辑英语学习笔记
一切的一切都只是套路! --鲁迅核心公式: En: (状语1) 主(定语1) 谓(状语2) (宾)(定语2) (状语1) Ch: (状语1) (定语1)主 (状语2)谓 (定 ...
【数字逻辑】学习笔记第四章 Part2 常用组合逻辑电路与竞争、险象
文章目录一.常用组合逻辑电路 1. 译码器 (1) 二进制译码器 74LS138(3/8译码器) a. 一般符号和图形符号 b. 74LS138功能表 c. 两片 `74LS138` 构成 `4-1 ...
线性回归、逻辑回归学习笔记
学习源代码 import numpy as np import matplotlib.pyplot as plt def true_fun(X): # 这是我们设定的真实函数,即ground trut ...

《给后端工程师的前端开发课程》笔记

ASP.Net服务器控件

给后端工程师的前端开发课程

HTML和CSS工作模式

HTML5基础标签学习

Block块元素vs lnline行内元素

Tag Attribute标签属性

单标签和双标签

Demo

ul

form

input

关于DOCTYPE

调试

Firebug & Chrome Dev Tools

HTML DOM和CSS3基础学习

HTML DOM

Javascript DOM操作

HTML DOM加载机制和事件

CSS3基础

cSS选择器定义

demo

Block块元素vs lnline行内元素

块元素

行内元素

cSS3页面布局

demo

clear属性

position属性

display属性

其他属性

display vs visibility

JavaScript入门

运行环境

版本

JavaScript是OOP吗?

数据类型学习

什么是false

变量声明

变量命名

条件控制

Boolean表达式

循环和遍历

条件控制

function返回值

object

Function其他

Closure闭包

Closure闭包

JavaScript DOM操作

DOM操作

Event事件

jQuery和AJAX学习

jQuery入门

jQuery介绍

DOM节点选择

jQuery 语法

DOM节点维护

jQuery对象!=DOM对象

jQuery是基于DOM实现的

DOM属性操作

Event

自定义事件

自定义事件-动态元素

Animate动画

AJAX介绍

页面交互

《给后端工程师的前端开发课程》笔记相关推荐

最新文章

热门文章