jQuery
1、jQuery的简介
是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式。
封装了 DOM，JS ，CSS
核心理念：Write Less Do More
官网：https://jquery.com/
jQuery版本：
jQuery 3.3.1
jQuery 2.x ：不再支持IE6,7,8
jQuery 1.11.x
2、使用jQuery
1、引入jQuery文件
<script src="jquery-1.11.3.js"></script>
注意：引入的操作必须要放在其他jQuery操作之前
2、使用jQuery
... ...
3、jQuery对象
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象，其他对象不能用(如:DOM对象)
2、工厂函数 - $()
想要获取jQuery对象 或 转换为jQuery对象的话，就必须要使用工厂函数
3、DOM对象 和 jQuery对象之间的转换
DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象,DOM对象只能使用DOM中所提供的方法和属性，是不能
访问jQuery提供的属性和方法
jQuery对象：由jQuery封装而得到的对象。jQuery对象只能访问jQuery提供的属性和方法，是不能访问DOM提供的属性和
方法
1、将DOM对象转换为jQuery对象
语法：var $obj=$(DOM对象);
注意：在为jQuery对象起名的时候，最好在变量名称前 + $
2、将jQuery对象转换为DOM对象
1、var dom对象 = jQuery对象.get(0);
2、var dom对象 = jQuery对象[0];
JS中创建对象
1、使用Object 直接创建对象
var newObj = new Object();
//添加属性
newObj.property1 = value1;
newObj.property2 = value2;
... ...
//添加方法
newObj.method1 = function(){
... ...
}
newObj.method2 = function(arg){
arg 就是参数
}
2、使用构造器创建对象
function 对象名(参数1,参数2,...){
//只能使用this来访问或创建当前对象的成员
//使用参数为属性赋值
this.属性1 = 参数1;
this.属性2 = 参数2;
//创建方法
this.funName = function(){
}
}
使用对象
var obj1 = new 对象名(参数1,参数2);
3、使用JSON创建对象
1、什么是JSON
JSON：JavaScript Object Notation - JS对象表现形式
JSON通常会作为轻量级的数据交换格式
JSON一般表示只有属性没有方法的对象
2、声明JSON对象
0、JSON对象使用{}来表示
1、使用键值对的方式来声明数据的
2、所有的属性，必须用""引起来，如果值是字符串的话，也必须用""引起来
3、属性 和 值 之间用 : 隔开
4、多对属性之间，使用 , 隔开
jQuery选择器
1、作用
获取页面上的元素们，返回jQuery对象所组成的数组
语法：$("选择器");
2、选择器的分类
1、基础选择器
1、ID选择器
用法:$("#ID值");
说明：返回HTML中指定ID值的元素
2、类选择器
用法;$(".className");
说明：返回HTML中所有class为className的元素
3、元素选择器
用法:$("元素名称");
说明:返回HTML中所有指定标记的元素
4、通用选择器
用法:$("*");
说明:返回HTML中所有的元素
5、群组选择器
用法:$("selector1,selector2,... ...")
说明:返回满足工厂函数内所有选择器的元素
2、层级选择器
1、$("selector1 selector2")
后代选择器
2、$("selector1>selector2")
子代选择器
3、$("selector1+selector2")
名称：相邻兄弟选择器
作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
4、$("selector1~selector2")
名称：通用兄弟选择器
作用：匹配selector1后面且满足selector2选 择器的所有元素
3、过滤选择器
1、基本过滤选择器
1、:first
只匹配到一组元素中的第一个
2、:last
只匹配到一组元素中的最后一个
3、:not(selector)
在一组元素中，将满足selector的元素排除出去
4、:odd
匹配 偶数行 元素(奇数索引)
5、:even
匹配 奇数行 元素(偶数索引)
6、:eq(index)
匹配下标等于 index 的元素
$("p:eq(0)").css();
7、:gt(index)
匹配下标大于 index 的元素
8、:lt(index)
匹配下标小于 index 的元素
2、内容过滤选择器
1、:contains("text")
匹配包含指定文本的元素
$("p:contains('佳能')")
2、:empty
匹配空元素(不包含任何子元素以及文本)
3、:has(selector)
匹配含有指定选择器的元素
4、:parent
匹配本身是父元素的元素
3、可见性过滤选择器
1、:visible
匹配所有的可见元素
2、:hidden
匹配所有不可见元素
4、状态过滤选择器
主要用在表单控件上
1、:enabled
匹配所有的可用元素
2、:disabled
匹配所有禁用元素
3、:checked
匹配所有被选中的元素(radio 和 checkbox)
4、:selected
匹配所有被选中的元素(select)
5、子元素过滤选择器
1、:first-child
匹配属于其父元素中的第一个子元素
2、:last-child
匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配属于其父元素中的第n个子元素
4、属性选择器
使用元素的属性来匹配页面的元素
1、[attr]
匹配具有attr属性的元素
ex:
1、匹配页面中所有有id属性的元素
$("[id]")
2、匹配页面中所有有class属性的元素
$("[class]")
2、[attr=value]
匹配attr属性值为value的元素
ex:匹配页面中所有的文本框
$(":text");
$("input[type='text']")
3、[attr!=value]
4、[attr^=value]
匹配attr属性值是以value字符开始的元素们
5、[attr$=value]
匹配attr属性值是以value字符结尾的元素们
6、[attr*=value]
匹配attr属性值中包含value字符的元素们
jQuery 操作 DOM
1、基本操作
1、html()
等同于dom中的 innerHTML
作用：读取或设置jQuery对象中的HTML内容
2、text()
等同于dom中的 innerText
作用：读取或设置jQuery对象中的普通文本内容
3、val()
等同于dom中的 value
作用：读取或设置jQuery对象的value值(表单)
4、属性操作
1、attr()
作用：读取或设置jquery对象的属性值
ex:
$("#main").attr("id");
$("#main").attr("class","redBack");
2、removeAttr(attrName)
作用：删除jQuery对象的指定属性
2、样式操作
1、attr("class","className")
为元素动态绑定class属性值
2、$obj.addClass("className")
$obj.addClass("c1").addClass('c2').addClass('c3').html("测试的文本");
3、removeClass("className")
删除指定的类选择器
4、removeClass()
删除所有的类选择器
5、toggleClass("className")
切换样式
元素如果具备className选择器，则删除
元素如果没有className选择器，则添加
6、hasClass("className")
判断元素是否包含className选择器
7、css("属性","值")
为元素动态的设置某css属性极其值
$obj.css("background-color","red");
8、css(JSON对象)
$obj.css({
"color":"red",
"font-size":"32px",
"text-decoration":"underline"
});
3、遍历节点
1、children() / children(selector)
获取jQuery对象的所有子元素或带有指定选择器的子元素
注意：只考虑子元素不考虑后代元素
2、next() / next(selector)
获取jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
3、prev() / prev(selector)
获取jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
4、siblings() / siblings(selector)
获取jQuery对象的所有兄弟 / 满足selector的所有兄弟
5、find(selector)
查找满足selector选择器的后代元素
6、parent()
查找jQuery对象的父元素
4、创建 & 插入节点
1、创建对象
语法：$("创建内容");
ex:
1、创建一个div
var $div=$("<div></div>");
2、创建一个button，文本为 测试按钮
var $btn=$("<button>测试按钮</button>");
2、插入节点
1、内部插入
1、$obj.append($new);
将$new作为$obj的最后一个子元素插入进来
2、$obj.prepend($new);
将$new作为$obj的第一个子元素插入进来
2、外部插入
1、$obj.after($new)
将$new作为$obj的下一个兄弟插入进来
2、$obj.before($new)
将$new作为$obj的上一个兄弟插入进来
5、删除节点
1、remove()
语法：$obj.remove();
作用：删除$obj元素
2、remove("selector")
语法：$obj.remove("selector")
作用：按选择器删除元素
3、empty()
语法：$obj.emptu()
作用：清空$obj中所有的内容
6、替换 和 复制
1、替换
1、replaceWith
语法:$old.replaceWith($new);
使用$new元素替换$old元素
2、replaceAll
语法：$new.replaceAll($old);
2、复制
1、clone()
$new = $old.clone();
jQuery 事件
1、页面加载后执行
HTML页面加载流程：
1、向服务器发送请求
2、接收服务器的响应
3、在内存中生成DOM树
4、渲染 - 显示内容到网页上
5、执行window.onload
jQuery 处理的时候
1、向服务器发送请求
2、接收服务器的响应
3、在内存中生成DOM树
4、执行 加载后的 操作
5、渲染 - 显示内容到网页上
如何实现页面加载后执行：
1、
$(document).ready( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
2、
$().ready( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
3、
$( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
2、jQuery实现事件的绑定
1、方式1
$obj.bind("事件名称",function(){
//事件的操作
//允许使用this来表示当前元素
});
$obj.bind("事件名称",function(event){
//事件的操作
//允许使用this来表示当前元素
//允许传递event对象，作为事件对象
});
2、方式2
$obj.事件名称(function(){
//事件的操作
//允许使用this来表示当前元素
});
$obj.事件名称(function(event){
//事件的操作
//允许使用this来表示当前元素
//允许传递event来表示事件对象
})
jQuery 动画
1、基本显示 / 隐藏
语法：
显示：$obj.show(); / $obj.show(duration);
隐藏：$obj.hide(); / $obj.hide(duration);
2、滑动式 显示/隐藏
语法：
显示：$obj.slideDown() / $obj.slideDown(duration);
隐藏：$obj.slideUp() / $obj.slideUp(duration);
3、淡入淡出式 显示/隐藏
语法：
显示：$obj.fadeIn() / $obj.fadeIn(duration)
隐藏：$obj.fadeOut() / $obj.fadeOut(duration)
JSON ：
JavaScript Object Notation
JSON是一种轻量级的数据交换格式
声明JSON格式的对象：
1、JSON格式的对象使用 {}
2、使用键值对的方式来声明数据
键 - 表示该对象的属性
值 - 表示该对象的值
3、属性的属性(键)，必须用""引起来，值也是字符串的话也需要使用""引起来
4、属性 和 值之间使用 : 隔开
5、多对属性之间，使用 , 隔开
var obj = {
"name":"sanfeng.zhang",
"age":"30",
"gender":"男"
};
Python工具 - pip
1、作用
Python的软件包管理器，有一些python包被集成到了pip中。只要被集成到pip中的包，都允许通过pip直接安装
2、安装 pip
sudo apt install python-pip (python2)
sudo apt install python3-pip (python3)
3、使用 pip / pip3
1、安装/更新/删除 python包
1、安装python包
sudo pip3 install SomePackage
ex:
sudo pip3 install pymysql==0.7.11
2、下载 python 包
sudo pip3 download SomePackage
3、删除 python 包
sudo pip3 uninstall SomePackage
4、更新(升级)python包
sudo pip3 upgrade SomePackage
2、查看当前环境中所安装的包
pip3 list
3、搜索
pip3 search SomePackage
4、展示
pip3 show SomePackage
5、记录现有环境的python包
1、pip3 freeze > requirements.txt
将当前python环境中所安装的内容打包成一个列表
2、pip3 install -r requirements.txt
允许在当前系统下，逐一安装requirements.txt中所列出的内容
Python工具 - VirtualEnv
1、什么是VirtualEnv - 虚拟环境
VirtualEnv,是Python中的虚拟环境，在做Python应用开发时，如果不想在大的Python环境中安装各种各样的包的话，则可以虚拟
出一个Python环境，可以让虚拟环境专门为某一个应用而存在。允许在虚拟环境中安装各种包且不影响大的python环境
2、安装 VirtualEnv
sudo pip3 install virtualenv
3、创建 和 使用 虚拟环境
1、准备工作
mkdir my_env
cd my_env
2、创建虚拟环境
virtualenv 虚拟环境名称
ex:virtualenv default
创建指定版本的虚拟环境
virtualenv -p /usr/bin/python2.7 名称
virtualenv -p /usr/bin/python3.5 名称
3、启动虚拟环境
注意：不能在 bin 目录中启动虚拟环境
source bin/activate
4、退出虚拟环境
deactivate
5、删除虚拟环境
rm 虚拟环境目录 -rf
注意：
在虚拟环境中使用pip安装和卸载内容时，不要使用 sudo 进行授权
4、虚拟环境管理工具 - VirtualenvWrapper
1、作用
第三方的管理工具，能够快速，高效而且方便的管理虚拟环境
2、安装虚拟环境管理工具
sudo pip3 install virtualenvwrapper
3、配置 virtualenvwrapper
在~目录下，有一个终端管理文件 .bashrc (在~目录下，输入 ll)
配置 .bashrc ，以便在启动终端时，就自动启动虚拟环境管理工具
修改.bashrc : sudo vi .bashrc
在 .bashrc 最底部增加以下内容：
1、export WORKON_HOME=~/my_env
将 ~/my_env 作为虚拟环境的管理目录，所有使用virtualenvwrapper创建的虚拟环境都默认保存于此
2、如果系统中包含多个python执行环境的话，则添加以下内容
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
3、source /usr/local/bin/virtualenvwrapper.sh
4、在 ~ 目录下，执行一遍 .bashrc
source .bashrc
4、使用虚拟环境管理工具
1、创建并进入虚拟环境
1、mkvirtualenv 虚拟环境名称
ex: mkvirtualenv default
2、
mkvirtualenv --python=/usr/bin/python2.7 虚拟环境名称
2、查看当前所维护的所有虚拟环境
workon
3、切换虚拟环境
workon 虚拟环境名称
4、退出虚拟环境
deactivate
5、删除虚拟环境
rmvirtualenv 虚拟环境名称
WEB 与 服务器
1、WEB ：表示用户可以浏览的网页(HTML,CSS,JS)
2、服务器
1、硬件 与 软件
硬件范畴：一台主机
软件范畴：一个能够接受用户请求并给出响应的程序
2、作用
1、存储WEB上的信息(网页，图片，音视频，css)
2、能够处理用户的请求(request)并给出响应(response)
3、能够执行服务器端程序：如查询数据库
3、WEB与服务器的关系
参考图 - WEB与服务器的关系
运行在服务器端的程序，可以由不同的语言来编写：
Java语言 -> JSP
C#语言 -> ASP.NET
php语言 -> php
Python语言 -> Django
4、网站请求的全过程
1、用户：输入域名，通过域名解析(DNS)器得到IP地址
2、向服务器发送http/https请求
3、传输层TCP协议，经过网络传输和路由解析
4、WEB服务器接收HTTP请求
5、服务器处理请求内容，并进行必要的数据交换
6、将响应的内容发回给浏览器(响应)
7、浏览器解析HTML
8、显示解析好的内容
框架
1、什么是框架
框架是一个为了解决某些开放性问题而存在的一种结构。框架提供了最基本的功能，我们只需要在这些基本功能的基础上构建
自己的操作就可以了。
2、框架的优点
1、快速开发 - 基本功能已经提供好了
2、可以解决大部分问题
3、bug少，稳定性较高
3、框架的分类
1、前端框架
处理前端内容(HTML,CSS,JS)
2、后端框架
处理服务器程序的
Spring - Java
3、全栈框架
包含WEB整体的解决方案，包含开发框架，运行环境
Rails (Ruby)
Django(Python)
4、Python的WEB框架
1、Django ：重量级的Python Web 框架
2、Tornado ：异步框架
3、Flask ：轻量级框架
4、Webpy ：轻量级框架
5、Web2py ：全栈框架，webpy的加强版
设计模式 与 框架模式
1、设计模式
设计模式，是一套被反复使用，多数人知晓并经过分类的代码设计经验的总结，是为了解决一些通用性问题的
目的：重用代码并保证代码的可靠性
官方认证的设计模式有23种：单例模式，抽象工厂模式，观察者模式 -- 《大话设计模式》
2、框架模式
代码的重用，框架模式是解决如何设计程序框架的代码，在框架模式中会包含多种的设计模式
如：MVC，MTV，MVVM，ORM，... ...
1、MVC
M ：Models，模型层
在程序中主要处理数据，负责在数据库中对数据进行存取操作(CRUD)
V ：Views , 视图层
应用程序中处理显示的部分内容(html,jsp)
C ：Controllers , 控制器层
处理用户交互的部分，通常负责从模型中取出数据，再进行业务的处理，最后将数据给视图，并将视图给客户端
2、MTV
M ：Models 模型层，功能同上
T ：Templates 模板层
用于处理用户显示的部分内容，如：html
V ：Views 视图层
处理用户交互部分，从模型中获取数据，再将数据给模板，再显示给用户
M --- M
V --- T
C --- V