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.x2、使用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 NotationJSON是一种轻量级的数据交换格式声明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 virtualenv3、创建 和 使用 虚拟环境 ???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 ?--- ?VjQuery详解
原文地址：https://www.cnblogs.com/-hjj/p/9942888.html