Javaweb基础入门(二十一)之jQuery(筛选、事件、效果、Ajax)

一、筛选

过滤

名称 解析
eq(index) 正数从头开始,获得指定索引的元素,从0开始,0表示第一个 负数从尾开始,获得指定索引的元素,从1开始,-1表示第一个
first() 第一个
last() 最后一个
hasclass(class) 判断是否有指定的class
is() 判断
map() jQuery数组 jQuery 对象
has() 子元素是否有
not() 将指定内容删除
slice(start,end) 截取,包含头不包含尾

查找

<A>
            <B>
                <C></C>
                <D></D>
                <E></E>
                <F></F>
            </B>
        </A>

B.children() 获取所有子元素 CDEF
A.find(D) 从指定的区域 查找指定元素 D
D.next() 下一个兄弟 E
D.nextall() 后面所有的兄弟 EF
C.nextUnitl(E) 获得后面所有的兄弟 直到指定条件位置 DE
F.prevUntil(D) 获得前面所有的兄弟 直到指定条件位置 DE

E.prev() 上一个兄弟 D
E.prevall() 前面所有的兄弟 DC
E.siblings() 除了E以外的所有兄弟 CDF

E.parent() 父元素 B
E.parents() 获得所有父元素 AB
E.closet(A) 向上获取指定父元素 含自己

串联

名称 解析
add() A.add(B) 将A和B组成一个对象
andSelf() 将之前的对象添加到操作集合中
end() 回到最后一个“破坏性”操作之前
contents() 获得所有的子节点(子元素和文本)

二、事件

页面载入

ready(fn)

$(docunment).ready(function(){ })
等效于
JQuery(docunment).ready(function(){ })

事件

名称 解析
blur() 失去焦点
change() 改变
click() 单击
dbclick() 双击
error() 页面异常
focus() 获得焦点 在元素本身产生 它可以在父元素上检测子元素是否获得焦点
focusin() 获得焦点 在元素包含的元素中产生 或者其内部任何一个元素获得焦点的时候 触发
focusout() 失去焦点
keydown() 键盘按下 若一直按着,会一直触发
keypress() 键盘按下,并产生一个字符时,一直按着就会不断出发
keyup() 键盘弹起
mousedown() 鼠标按下
mouseup() 鼠标弹起
mouseenter() 鼠标移入 当鼠标在父元素 和 子元素之间穿越时 不会触发事件
mouseover() 鼠标移入 当鼠标在父元素 和 子元素之间穿越时 也会触发事件
mousemove() 鼠标移动
mouseleave() 鼠标移出
mouseout() 鼠标移出
resize() 改变大小
scroll() 滚动
select() 选择
submit() 提交
unload() 页面卸载

事件处理

on()提供绑定事件处理所需要的功能完成三个方法 bind delegate live
off()解绑
bind()给当前对象绑定一个事件 例如 A.bind(“click”,fn)
one() 给当前对象绑定一次事件
unbind() 解除bind 绑定
trigger() 在每一个匹配的元素上触发某些事件 A.trigger(“submit”)
triggerHandler() 在每一个匹配的元素上触发某些事件 不会执行浏览器默认操作 不会产生事件冒泡

事件委派

live() 绑定事件 之后 动态添加同样的成员 也具有同样的事件
die() 解除事件
delegate()
undelegate()

事件切换

hover() 鼠标移入和移出 A.hover(fn,fn2)
toggle() 执行click事件 每次点击 都会执行一个fn

效果

基本

show()显示 一毫秒为单位 固定字符 slow / normal / fast
hide()隐藏
toggle() 切换

滑动

slideDown() 显示
slideUp() 隐藏
slideToggle() 切换

淡入淡出

fadeIn() 显示
fadeOut() 隐藏
fadeTo() 透明度
fadeToggle() 切换

自定义

animate() 动画
stop() 停止
delay() 设置一个延时来推迟执行队列中之后的项目

设置

JQuery.fx.off 关闭页面上所有的动画。
JQuery.fx.interval 设置动画的显示帧速

Ajax

简介

Ajax 异步请求 浏览器地址不变 进行局部刷新的技术

Ajax请求

$.ajax(url,[settings]) 最底层ajax请求 编写复杂 但是完成功能是最全的

参数:

名称 解析
url: 发送请求的地址
data: 发送到服务器的数据 请求参数
.type: 请求类型 get/post
success: 成功的回调函数 success(data,textStatus)
error: 请求失败调用此函数
dataType: 预期服务器返回的数据类型  “xml” 返回xml文档 可用jquery处理   “html” 返回纯文本的html信息   “script”返回纯文本的javascript   “json” 返回json格式的数据  “jsonp” 返回jsonp格式  “text” 返回纯文本字符串

load() 加载

$.get(url,[data],[fn],[type])
$.post(url,[data],[fn],[type])
$.getJSON(url,[data],[fn]) 可以完成js跨域请求
域:域名+端口+项目 js默认是不能跨域请求
$.getScript(url,[callback]) 动态加载js <scrpit src="xx.js"></script> 在页面加载时 一并加载js

Ajax事件

名称 解析
ajaxComplete() 当Ajax请求完成时 除草要调用的处理程序
ajaxError() 当Ajax请求完成且出现错误的时候调用
ajaxSend() 在Ajax请求发送之前显示一条消息
ajaxStart() 在首个Ajax请求完成开始时可调用
ajaxStop() 当所有Ajax请求完成时调用
ajaxSuccess() 当Ajax请求成功完成时显示一条消息

其他

$.ajaxSetup([options]) 设置全局 AJAX 默认选项。

serialize() 将表单中的所有项拼接成一个字符串 类似于get请求参数的格式

username=java&password=123

serializearray() 将表单中的所有项拼接成一个json数组

[
{name:'username',value:'java'},
{name:'password',value:'123'}
]

猜你喜欢

转载自blog.csdn.net/xueer_z/article/details/82592800