jQuery 和 Ajax
1. 元素选择器
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
- $()
2 元素操作
内容属性操作
- 获得内容 -
text()
、html()
以及val()
; - 获取属性 -
attr('class')
; - 设置内容 -
text('文本')
、html('<div></div>')
以及val('value')
; - 设置属性 -
attr('class', 'new-class')
; - attr() 方法也允许您同时设置多个属性,以对象形式;
元素操作
- 添加元素
-
append()
- 在被选元素的结尾插入内容 -
prepend()
- 在被选元素的开头插入内容 -
after()
- 在被选元素之后插入内容 -
before()
- 在被选元素之前插入内容
- 删除元素
-
remove()
- 删除被选元素(及其子元素) -
empty()
- 从被选元素中删除子元素
CSS类
-
addClass()
- 向被选元素添加一个或多个类; -
removeClass()
- 从被选元素删除一个或多个类; -
toggleClass()
- 对被选元素进行添加/删除类的切换操作; -
css()
- 设置或返回样式属性,类似 attr 支持多个属性操作;
尺寸方法
-
width()
设置或返回元素的宽度(不包括内边距、边框或外边距); -
height()
设置或返回元素的高度(不包括内边距、边框或外边距); -
innerWidth()
返回元素的宽度(包括内边距); -
innerHeight()
返回元素的高度(包括内边距); -
outerWidth()
返回元素的宽度(包括内边距和边框); -
outerHeight()
返回元素的高度(包括内边距和边框);
3 内置函数
元素遍历
水平
-
siblings()
返回被选元素的所有同胞元素; -
next()
返回被选元素的下一个同胞元素; -
nextAll()
返回被选元素的所有跟随的同胞元素; -
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素; -
prev()
返回被选元素的上一个同胞元素; prevAll()prevUntil
垂直
-
parent()
返回被选元素的直接父元素; -
parents()
被选元素的所有祖先元素; -
children()
返回被选元素的所有直接子元素; -
find()
返回被选元素的后代元素;
过滤
-
first()
返回被选元素的首个元素; -
last()
返回被选元素的最后一个元素; -
eq()
返回被选元素中带有指定索引号的元素; -
filter()
允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回; -
not()
返回不匹配标准的所有元素;
更多
-
show()
显示,hide()
隐藏,toggle()
切换,支持回调函数:$().show(speed:'slow、fast 或毫秒', callback);
-
each()
遍历; -
index()
获取元素索引;
4. 事件绑定
常见DOM事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover | ready |
事件绑定方法
-
on()
绑定off()
解绑; -
bind()
绑定unbind()
解绑; -
one()
绑定一次; - 直接使用事件进行绑定,如:
$().click(function(){});
5. AJAX
$.ajax(option)
使用ajax方法向后端发送请求;常用配置项如下:
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
data | 规定要发送到服务器的数据。 |
success(result,status,xhr) | 当请求成功时运行的函数 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
url | 规定发送请求的 URL。默认是当前页面。 |
type | 规定请求的类型(GET 或 POST)。 |
AJAX方法
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
serialize() | 编码表单元素集为字符串以便提交 |
serializeArray() | 编码表单元素集为 names 和 values 的数gd组 |
…… |
HTTP协议
1. 概述
超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。
HTTP是一个客户端终端(用户)和服务器端(网站)请求和应答的标准(TCP)。
通过使用网页浏览器、网络爬虫或者其它的工具,客户端发起一个HTTP请求到服务器上指定端口(默认端口为80)。
2. 工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。
客户端向服务器发送一个请求报文,请求报文包含请求的方法、URL协议版本、请求头部和请求数据。服务器以一个状态行作为响应,响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。
3. 请求方法
HTTP/1.1协议中共定义了八种方法(也叫“动作”)来以不同方式操作指定的资源:
-
GET
向指定的资源发出‘显示’请求; -
HEAD
与GET
方法一样,都是向服务器发出指定资源的请求,只不过服务器将不传回资源的本文部分; -
POST
向指定资源提交数据,请求服务器进行处理(例如提交表单或者上传文件); -
PUT
向指定资源位置上传其最新内容; -
DELETE
请求服务器删除Request-URI
所标识的资源; -
TRACE
回显服务器收到的请求,主要用于测试或诊断; -
OPTIONS
使服务器传回该资源所支持的所有HTTP请求方法,可以测试服务器功能是否正常运作; -
CONNECT
预留给能够将连接改为管道方式的代理服务器,通常用于SSL加密服务器的链接;
4. 状态码
所有HTTP响应的第一行都是状态行,依次是当前HTTP版本号,3位数字组成的状态代码,以及描述状态的短语,彼此由空格分隔,状态代码的第一个数字代表当前响应的类型。
5. URI和URL
URL 统一资源定位符
超文本传输协议(HTTP)的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中:
- 传送协议。
- 层级URL标记符号(为[//],固定不变)
- 访问资源需要的凭证信息(可省略)
- 服务器。(通常为域名,有时为IP地址)
- 端口号。(以数字方式表示,若为HTTP的默认值“:80”可省略)
- 路径。(以“/”字符区别路径中的每一个目录名称)
- 查询。(GET模式的窗体参数,以“?”字符为起点,每个参数以“&”隔开,再以“=”分开参数名称与数据,通常以UTF8的URL编码,避开字符冲突的问题)
- 片段。以“#”字符为起点
例如:http://www.luffycity.com:80/news/index.html?id=14&page=1#content
6. 请求和响应
请求
响应
版本管理
1. SVN
简介
Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据。 这些数据放置在一个中央资料档案库(repository) 中。 这个档案库很像一个普通的文件服务器, 不过它会记住每一次文件的变动。 这样你就可以把档案恢复到旧的版本, 或是浏览文件的变动历史。
概念
- repository(源代码库):源代码统一存放的地方;
- Checkout(提取) :当你手上没有源代码的时候,你需要从 repository checkout 一份;
- Commit(提交) :当你已经修改了代码,你就需要 Commit 到 repository;
- Update (更新) :当你已经 Checkout 了一份源代码, Update 一下你就可以和Repository 上的源代码同步,你手上的代码就会有最新的变更;
TortoiseSVN工具
- 安装客户端;
- 检出;
- 更新;
- 提交;
- 解决冲突;
2. GIT
安装配置
-
网上下载Git安装包进行安装;
-
配置
配置个人的用户名称和电子邮件地址
$ git config --global user.name "runoob“ $ git config --global user.email test@runoob.com
差异分析工具
$ git config --global merge.tool kdiff3
查看配置信息
git config --list
三大分区
- 工作区,也叫Working Directory
- 暂存区,也叫stage,index
- 版本库,也叫本地仓库,commit History
指令
-
git init
在目录中创建新的 Git 仓库 -
git clone
拷贝一个 Git 仓库到本地 -
git status
查看在你上次提交之后是否有修改 -
git diff
查看执行git status
的结果的详细信息 -
git add
数据从工作区转移至暂存区 -
git commit
数据从暂存区转移至版本库,也就是本地仓库 -
git push
数据从版本库中发送到远程仓库 -
git branch (branchname)
创建分支(没有参数时会列出你本地的分支) -
git checkout (branchname)
切换分支 -
git merge
合并分支
工作流程
网友评论