4

前戏 到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。 也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 window对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 *如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 *没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。 一些常用的Window方法： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window的子对象 navigator对象（了解即可） 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。 navigator.appName　// Web浏览器全称 navigator.appVersion　// Web浏览器厂商和版本的详细字符串 navigator.userAgent　// 客户端绝大部分信息 navigator.platform　// 浏览器运行所在的操作系统 screen对象（了解即可） 屏幕对象，不常用。 ...

JavaScript引入方式 Script标签内写代码 <script> // 在这里写你的JS代码 </script> 引入额外的JS文件 <script src="myscript.js"></script> JavaScript语言规范 注释（注释是代码之母） // 这是单行注释 /* 这是 多行注释 */ 结束符 JavaScript中的语句要以分号（;）为结束符。 JavaScript语言基础 变量声明 JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。 声明变量使用 var 变量名; 的格式来进行声明 var name = "Alex"; var age = 18; 注意： 变量名是区分大小写的。 推荐使用驼峰式命名规则。 保留字不能用做变量名。 补充： ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。 for (let i=0;i<arr.length;i++){...} ES6新增const用来声明常量。一旦声明，其值就不能改变。 const PI = 3.1415; PI // 3.1415 PI = 3 // TypeError: "PI" is read-only JavaScript数据类型 JavaScript拥有动态类型 var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "Alex" // 此时x是字符串 数值(Number) JavaScript不区分整型和浮点型，就只有一种数字类型。 ...

jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。 jQuery内容： 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接：jQuery官网 中文文档：jQuery AP中文文档 jQuery版本 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。 jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。 一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$： var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象 拿上面那个例子举例，jQuery对象和DOM对象的使用： $("#i1").html();//jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM对象使用DOM的方法 jQuery基础语法 $(selector).action() 查找标签 基本选择器 id选择器： ...

1. CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2. CSS语法 2.1 CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2.2 CSS注释 /*这是注释*/ 3. CSS的几种引入方式 3.1 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3.2内部样式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style></head> 3.3 外部样式 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4. CSS选择器 4.1 基本选择器 元素选择器 /*元素选择器*/ p {color: "red";} /*ID选择器*/ #i1 { background-color: red; } /*类选择器*/ .c1 { font-size: 14px; } p.c1 { color: red; } /*注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。*/ /*通用选择器*/ * { color: white; } 4.2 组合选择器 ...

HTML思维导图 Web服务本质 1.浏览器发请求 –> HTTP协议 –> 2.服务端接收请求 –> 3.服务端返回响应 –> 服务端把HTML文件内容发给浏览器 –> 4.浏览器渲染页面 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close() HTTP协议 超文本传输协议，规定了浏览器与服务端之间消息传输的数据格式 四大特性： 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态) 4.无连接(请求一次响应一次，之后立刻断开连接) websocket相当于HTTP协议的一个补丁，它支持长连接 请求数据格式 请求首行(表示HTTP协议版本，当前请求方式) 请求头(一大堆k,v键值对) 请求体(携带的是一些敏感信息比如密码、身份证号…) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码 用一串简单的数字来表示一些复杂的状态或者提示信息 1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据 2XX:服务端成功响应 你想要的数据(请求成功200) 3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302) 4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403) 5XX:服务器内部错误(500) 请求方式 get请求(向服务端要资源） post请求(向服务端提交数据) ...