1 筛选
选择器可以完成功能,筛选提供相同函数。
选择器 :first
筛选 first()对比:
(“div:first”)直接获得第一个div(永远只能操作第一个) ( “ d i v : f i r s t ” ) 直 接 获 得 第 一 个 d i v ( 永 远 只 能 操 作 第 一 个 ) (“div”).first() 先获得所有的div,从所有的中筛选出第一个。 (可以操作第一个,也可以操作所有)
1.1 过滤
eq(index | -index) 类型 :eq()
index:正数,从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
-index:负数,从尾开始获得指定索引的元素。1算起。 -1表示最后一个
first() 第一个 :first
last() 最后一个 :last
is() 判断
hasClass() 判断是否是指定class 。<xxx class="my">
这其实就是 is("." + class)。
filter() 筛选出与指定表达式匹配的元素集合
not() 将指定内容删除
--------------------------------
has() 子元素是否有
slice(start , end) 截取元素 ,[2,4) --> 2,3
map() jQuery对象 拆分成 jQuery对象数组
1.2 查找
“`JQuery
B.children([…]) 获得所有的子元素。CDEF
A.find(D) 从指定的区域查询指定元素。D
D.next() 下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev() 上一个兄弟。D (previous)
E.prevAll() 前面的所有兄弟。CD
E.siblings() 所有兄弟。CDF
E.parent() 父元素。B
E.closest(A) 向上获得指定的父元素(含自己),如果获得返回一个对象,如果没有没有对象。
C.nextUntil(E) 获得后面所有兄弟,直到指定条件位置。DE
F.prevUntil(D) 获得前面所有兄弟,直到指定条件位置。DE
E.parents() 获得所有的父元素。AB
> - closest和parents的主要区别是:
1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
## 1.3 串联
- 将多条语句,改成一条。(得瑟代码)
![](https://upload-images.jianshu.io/upload_images/3034232-d8fced3da09b1817.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```JQuery
A.add(B) 将A和B组合一个对象 。类型 $("A,B")
andSelf() : 将之前对象添加到操作集合中
A.children().andSelf()
A 孩子 孩子和A
end() :回到最近的一个"破坏性"操作之前
A.children().children().end() .end()
<div class="se-preview-section-delimiter"></div>
A 孩子 孙子 孩子 A
--------------------
contents() 获得所有的子节点(子元素 和 文本)
<div class="se-preview-section-delimiter"></div>
2 事件
2.1 常见事件总结
- jQuery 提供额外的事件,用于完善javascript缺失的
focusin 和 focusout
focusin 获得焦点。js focus。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout 失去焦点。js blur。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。mouseenter 和 mouseleave
mouseenter 鼠标移入。js mouseover
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。mouseleave 鼠标移出。js mouseout
与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
2.2 页面加载
- 方式1:标准api
$(document).ready(function(){
});
<div class="se-preview-section-delimiter"></div>
等效
jQuery(document).ready( fn );
<div class="se-preview-section-delimiter"></div>
- 方式2:简化版
$(function(){
});
登录
jQuery(function(){
});
<div class="se-preview-section-delimiter"></div>
- 源码分析(了解)
步骤一:回顾js 函数创建
方式1:function abc(){}; abc();
方式2:var abc = function(){} ; abc();
$( fn ) == jQuery( fn ) == new jQuery.fn.init( fn )
步骤二: init( fn ) –> rootjQuery.ready( fn )
步骤三:
总结:
$( fn ) --> init( fn ) --> jQuery(document).ready( fn )
<div class="se-preview-section-delimiter"></div>
2.3 事件绑定
2.3.1 处理
bind(type ,fn) 给当前对象绑定一个事件。例如:A.bind("click", fn ); 类型:A.click( fn );
unbind(type ) 解绑bind绑定事件
<div class="se-preview-section-delimiter"></div>
one(type ,fn ) 给当前对象绑定一次事件。
-----------------------------------------
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑
trigger(type) 在每一个匹配的元素上触发某类事件。例如:A.trigger("submit") ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作,也不会产生事件冒泡。
<div class="se-preview-section-delimiter"></div>
2.3.2 委派
“`JQuery
live(type , fn) 绑定事件,之后动态添加同样的成员,也具有相同的事件。
die(type) 解绑事件
<div class="se-preview-section-delimiter"></div>
### 2.3.3 切换
![](https://upload-images.jianshu.io/upload_images/3034232-259e46b8397ad98b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<div class="se-preview-section-delimiter"></div>
```JQuery
hover(over , out)
简化版,鼠标移入和移出 ,A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
toggle( fn , fn , fn ,...) 执行click事件,每点击一次执行一个fn
3 效果|动画
3.1 基本
- 通过改变元素 高度和宽度 进行显示或隐藏
show(speed,fn) 显示
参数1:speed速度。显示的时间,单位:毫秒。固定字符串:("slow","normal", or "fast")
参数2:fn 回调函数。动画效果完成之后回调函数。
hide() 隐藏
toggle() 切换
3.2 滑动
- 通过改变元素 高度 进行显示或隐藏
slideDown() 显示
slideUp() 隐藏
slideToggle() 切换
3.3 淡入淡出
通过改变元素 透明度 进行显示或隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
fadeTo(speed,opacity,fn) 指定透明度
参数2:opacity 透明度,一个0至1之间表示透明度的数字
4 Ajax【掌握】
- ajax :异步请求,浏览器地址栏不改变,进行局部刷新。
- ajax 流程分析
- jQuery 的ajax
第一层:$.ajax(...) 最底层ajax请求,编写最复杂,完成功能最全的。
第二层:load() 、$.get() 、$.post() 开发中常用3个
第三层:$.getJSON() 、$.getScript() 高级开发
$.getJSON() 可以完成js“跨域”请求
域名:域名+端口+项目,js默认不能跨域请求。
$.getScript() 动态加载js文件。之前使用<script src="">加载页面时,一并加载js文件
回调函数参数
工具类,解析json
4.1 load() 【3】
//0.2 请求参数,采用json
var params = {"username":"杰克", "password":"1234"};
/* 1 load()函数 ,必须使用jquery对象
* * 格式:load(url, [data], [callback])
* 参数1:url ,请求路径
* 参数2:data,请求参数
* 参数3:callback,回调函数
* * 如果没有请求参数,发送的GET请求
* * 如果有请求参数,发送的POST请求。请求没有中文乱码
* * 回调函数的参数
* 参数1:data,响应数据。load()永远获得字符串,如果需要使用,必须手动转换json对象。
*/
$(this).load(url,params,function(data){
//转换json对象
var jsonData = eval("("+data+")");
alert(jsonData.message);
});
4.2 $.get() 【2】
/* 2 $.get() 全局函数,发送get请求
* * 格式:jQuery.get(url, [data], [callback], [type])
* * 参数4:type ,返回内容格式,xml, html, script, json, text, _default。
* * GET请求不适合发送中文数据,存放请求的中文乱码。
* 必须手动解码 new String(username.getBytes("ISO-8859-1") ,"UTF-8")
* * 响应数据,如果使用 application/json;charset=UTF-8 ,jQuery自动将数据转换json对象。
* * 响应数据,如果使用 text/html;charset=UTF-8 ,回调函数获得字符串数据,需要手动转换。
* 使用“参数4”,设置"json",jQuery将字符串 转换成 json对象
*/
$.get(url,params,function(data){
alert(data);
},"json");
4.3 $.post() 【1】
[图片上传中...(2.png-c1dc53-1524144852517-1)]
[图片上传中...(3.png-af55b-1524144852517-2)]
/* 3 $.post() 全局函数,发送post请求
* * 格式:jQuery.post(url, [data], [callback], [type])
$.post(url,params,function(data){
alert(data);
},"json")
*/
4.4 $.ajax() 【4】
/* 4 $.ajax() 底层功能最强大的
* * 格式:jQuery.ajax([settings])
* 参数settings:设置所有的参数
* url:发送请求的地址
* data:发送到服务器的数据,请求参数
* type:请求方式 ("POST" 或 "GET"),
* success:成功的回调函数,success(data, textStatus, jqXHR)
* error:请求失败时调用此函数
* dataType:预期服务器返回的数据类型
* "xml": 返回 XML 文档,可用 jQuery 处理。
* "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
* "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
* "json": 返回 JSON 数据 。
* "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
* "text": 返回纯文本字符串
*/
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data){
alert(data);
},
"error":function(){
alert("服务器繁忙,请稍后重试");
},
"dataType":"json"
});
5 其他
5.1 表单序列化
serialize() 将表单中所有选中项拼凑成一个字符串。类似get请求参数
例如:username=jack&password=1234&gender=man&….
serializeArray()将表单中所有选中项拼凑一个json数组
5.2 事件冒泡
event.stopPropagation()
5.3 浏览器默认动作
event.preventDefault() ;