目录
jQuery
JS中创建对象
jQuery选择器
jQuery 操作 DOM
jQuery 事件
jQuery 动画
JSON :
Python工具 - pip
Python工具 - VirtualEnv
WEB 与 服务器
框架
设计模式 与 框架模式
jQuery
1、jQuery的简介
是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式。
封装了 DOM,JS ,CSS
核心理念:Write Less Do More
官网:https:
JS中创建对象
1、使用Object 直接创建对象
var newObj = new Object();
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(){
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种:单例模式,抽象工厂模式,观察者模式