一、 认识jQuery
1、 概述
之前，我们为了方便使用，封装了ajax.js,能够查找指定ID的DOM对象，使用ajax变得非常简单；
而我们做的这些，也早有编程大神做过，并且开放出来提供免费下载使用；
jQuery 就是一款免费且开放源代码的JavaScript代码库；
提供了HTML文档操作，节点查找，事件处理，动画设计，Ajax交互等丰富的功能；
并且兼容各种主流浏览器；
jQuery设计的宗旨就是：写更少的代码，做更多的事情；
2、 入门使用
下载代码库：
官方下载地址：http://jquery.com/download/
注意：
jq自2.0版本开始，不在支持IE9一下浏览器；
自3.0版本开始，针对移动端做了优化处理；
引入并使用：
fds
二、 jQuery中的选择器
什么是选择器？
我们在JS中，我们可以根据不同条件获取DOM：
//根据ID属性值获取
document.getElementById();
//根据clss属性值获取
document.getElementsByClassName()
//根据name属性值获取
document.getElementsByName()
//根据标签名称获取
document.getElementsByTagName()
而在上节课，jq代码中获取指定ID的元素，我们使用的是：
$('#re')
jq给我们提供了各种各样获取元素的方式，而获取元素的各种方式，
我们统称为 选择器
因为选择器众多，我们把各种选择器分为了九个大类：
基本
层级
简单
内容
可见性
属性
表单
表单对象属性
具体用法，见手册 选择器部分；
每类选择器至少演示两个以上的用法；
预留练习记忆时间，重点是能让同学们尽可能的记忆最多的选择器；
三、DOM对象与jQ对象
jQuery对象与DOM对象的关系
- 导航1
- 导航2
- 导航3
- 导航4
test
JQ 对象与JS对象转换的应用：
$('li').click(function(){
// this 指向原生js
// 想要在事件里使用JQ对象，那么必须将this转为jq对象才能使用
$(this).css('background', 'red');
// alert(this.innerHTML);
});
四、 jQuery中的属性与CSS
1、 基本属性 attr
知识点：
attr(name) ：根据属性的名称获取元素的属性值
attr(key,value) ：设置元素的属性，key属性，value属性值
attr(properties) ：一次为元素设置多个属性，要求参数是一个json对象
attr(key,fn) ：通过函数的返回值设置元素的属性
removeAttr(name) ：移除元素的属性
2、 class属性
编号 姓名
性别 年龄
1 刘能
男 45
知识点：
addClass(class) ：为元素添加class属性
removeClass(class) ：移除元素的class属性
toggleClass(class) ：切换元素的class属性，如果有就移除，没有就添加
hasClass(class) ：判断元素是否具有某个class属性
3、 css样式设置
hello, beijing
知识点
css(name) ：根据name获取元素的css属性值
css(name,value) ：设置元素的属性值
css(properties) ：一次为元素设置多个属性值，要求参数是一个json对象
4、 offset位置
hello, beijing
知识点
offset() ：获取元素的横纵坐标，返回一个json对象，拥有left与top属性
offset(coordinates) ：设置元素位置要求是一个json对象，必须包含left与top属性
5、 宽高设置
hello, beijing
知识点
width() ：获取元素的宽度
width(value) ：设置元素的宽度
height() ：获取元素的高度
height(value) ：设置元素的高度
6、 文本 & 表单值
icast
知识点
val() ：获取表单元素的value值
val(val) ：设置表单元素的value值
html() ：获取元素的内容
html(val) ：设置元素的内容
text() ：获取元素的文本内容
text(val) ：设置元素的文本内容
五、 事件编程
1、 页面载入事件
05.PHP：
header('Content-type:image/png');
sleep(3);
$img = imagecreatetruecolor(100, 100);
imagepng($img);
05-1.html
ready事件
2、 jq中的事件绑定
原生js事件绑定语法：
DOM对象.on事件名称 = 事件的处理程序
jq事件绑定语法：
jq对象.事件名称(事件的处理程序);
在JS中，事件绑定一共有三种形式：
行内绑定、动态绑定、事件监听。
问题：jQuery中的事件绑定是哪一种呢？
两次事件被先后触发，第一次绑定并没有被替换，因此可知，
jq的事件绑定是事件监听
3、jq中常用事件
所有事件都是方法
blur(fn) ：当失去焦点时触发
change(fn) ：当状态改变时触发
click(fn) ：当单击时触发
dblclick(fn) ：当双击时触发
focus(fn) ：当获得焦点时触发
keydown(fn) ：当键盘按下时触发
keyup(fn) ：当键盘弹起时触发
keypress(fn) ：当键盘按下时触发
load(fn) ：和ready一样都是页面载入事件
unload(fn) ：当页面关闭时触发
mousedown(fn) ：鼠标按下时触发
mouseup(fn) ：鼠标弹起时触发
mousemove(fn) ：鼠标移动时触发
mouseover(fn) ：鼠标悬浮时触发
mouseout(fn) ：鼠标离开时触发
resize(fn) ：当窗口大小改变时触发
scroll(fn) ：当滚动条滚动式触发
select(fn) ：当文本框中的文本选中时触发
submit(fn) ：当表单提交时触发
4、 事件切换
（1）
问题及效果：
京东天猫等网站首页轮播图，鼠标悬浮之上时，轮播图停止轮播效果，鼠标离开后，轮播效果继续；
知识点：
hover(fn1,fn2)：
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。
当鼠标移出这个元素时，会触发指定的第二个函数。
案例代码：
（2）
问题及效果：
点击折叠再点击展开效果，类似‘我的电脑’侧边目录；
知识点：
toggle(fn1,fn2,fn3...，fnN)：
点击切换事件，第一次点击执行fn1,第二次点击执行fn2,第三次点击执行fn3，
当所有函数执行完后再点击，则再次从第一个开始执行；
案例代码：
折叠效果
管理员管理
5、 事件处理
问题及效果：
某不可描述之网站有不可描述的资源；
但点击下载时，弹出广告页面，再回去点击下载后，下载生效；
知识点：
one('事件1 事件2 事件N',fun) ：
为选中元素绑定 一次性 事件(多个事件用空格隔开)；
bind('事件1 事件2 事件N',fun) :
为选中元素绑定一个或多个事件(多个事件用空格隔开)；
注：jQuery 3.0中已弃用此方法，请用 on()代替。
unbind('事件1 事件2 事件N') :
bind 的反向操作，为选中元素 删除 一个或多个事件(多个事件用空格隔开)；
jQuery 3.0中已弃用此方法，请用 off()代替。
案例代码：
6、事件对象
（1） 阻止事件冒泡
问题及效果：
什么是事件冒泡？？
本意是：
div被点击时才会触发事件，但是，因为事件冒泡特性，未被点击的div也触发了事件的执行；
因此，我们需要阻止事件的冒泡行为；
事件冒泡问题代码展示：
修改以上代码中 JS 部分，阻止事件冒泡；
知识点：
event.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
（2） 阻止默认行为
问题及效果：
什么是默认行为？
如：a 标签的点击跳转、submit按钮的点击提交、选中文本的拖拽搜索等等……
有时我只是需要a标签的样式并不希望有点击跳转的效果；
用户填写完表单时，表单内容也会在前台JS中进行验证，内容不合法，数据也不能提交；
因此，在某些时候，我们需要阻止标签元素的默认行为；
案例代码：
腾讯链接
修改上述代码的JS部分，阻止元素默认行为
知识点：
event.preventDefault()
阻止默认事件行为的触发。
六、 jQuery 中的效果
1、 基本效果
问题及效果：
05-6-2toggle 案例中的折叠效果并不理想，修改使其在展开或者折叠中都有过程，成动画播放效果；
案例代码：
直接修改修改 05-6-2toggle 代码，添加动画效果；
折叠效果
管理员管理
知识点：
hide([speed,[fn]]) 隐藏显示的元素
speed : 三种预定速度之一的字符串("slow","normal", or "fast")或
表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。
show([speed,[fn]]) 显示隐藏的匹配元素
speed : 三种预定速度之一的字符串("slow","normal", or "fast")或
表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。
2、 滑动效果
问题及效果：
图片的滑动收起与隐藏
案例代码：
知识点：
slideDown([speed],[fn]) 显示
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[fn]]) 隐藏
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle([speed],[fn]) 切换
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
3、 淡入淡出效果
问题及效果：
图片淡入淡出效果
案例代码：
知识点：
fadeIn([speed],[fn]) 淡入
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut([speed],[fn]) 淡出
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
4、 自定义动画
问题及效果：
JQ中的动画效果很多，但是总有些我想要但是没有的动画；
知识点：
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
案例代码：
七、 jQuery 中的文档处理
1、 插入操作
（1） 内部插入
知识点：
append(content)
向匹配的元素内部追加内容。
appendTo(content)
把匹配的元素追加到另一个指定的元素集合中
prepend(content)
内容前置到匹配的元素内部；
prependTo(content)
把匹配的元素前置到另一个、指定的 元素 集合中。
案例代码：
我是DIV
P标签
（2） 外部插入
知识点：
after(content)
在匹配的元素之后插入内容。
before(content)
在匹配的元素之前插入内容。
insertAfter(content)
把匹配的元素插入到另一个、指定的元素集合的后面。
insertBefore(content)
把匹配的元素插入到另一个、指定的元素集合的前面。
案例代码：
上节代码修改JS部分
注意：
内部插入与外部插入的区别
2、删除
知识点：
empty()
删除匹配的元素集合中所有的子节点。
remove([expr])
从DOM中删除所有匹配的元素。
案例代码:
- 辣子鸡
- 香酥鸭
- 糖醋鱼
- 红烧肉
3、 复制(克隆)
知识点：
clone([Even])
克隆匹配的DOM元素
Even：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
案例代码：
修改上节代码
- 辣子鸡
- 香酥鸭
- 糖醋鱼
- 红烧肉
4、 替换
知识点：
replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。
html([val])
val 有值，则用于设定HTML内容的值，没有则获取内容值；
案例代码：
- 辣子鸡
- 香酥鸭
- 糖醋鱼
- 红烧肉
5、包裹
知识点：
wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()
移出选中元素的父元素
wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
案例代码：
海贼王
火影忍者
龙猫
千与千寻
6、查找
问题及效果：
将选择器以 jq方法调用 形式实现；
知识点：
eq(index) ：根据元素的index索引来查找元素
filter(expr) ：筛选操作，$(‘div’).filter(‘.cls1’);
not(expr) ：匹配除指定选择器以外的其他元素
children([expr]) ：获取当前元素下的所有子元素
find(expr) ：获取当前元素下的所有后代元素
next([expr]) ：获取当前元素下紧邻的下一个元素
prev([expr]) ：获取当前元素上紧邻的上一个元素
parent([expr]) ：获取当前元素的父元素
siblings([expre]) ：获取当前元素的所有同级兄弟元素
案例代码：
div111
7、 综合案例-任务清单
问题及效果：
类似奇妙清单、todolist等任务应用；
案例代码：
显示已完成任务
八、 插件
问题及效果:
想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；
类似这种jq中没有的功能，我们都可以通过插件的形式自己实现，并在jq中使用；
1、 为元素扩展新方法
基本语法:
$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)
ob： JS对象，例：
$.fn.extend({
ex1.function(){},
ex2.function(){},
});
案例代码：
JQ插件
2、扩展jq对象本身
知识点：
jQuery.extend(ob) 或者 $.extend(ob)
ob： JS对象，
例：
$.extend({
ex1.function(){},
ex2.function(){},
});
案例代码：
3、 综合案例
HTML
Javascript
PHP
Python
Java
C/C++
4、 each 方法
问题及效果:
在上一节插件中有个反选的功能，本质上就是对选中的每个对象进行遍历操作；
jq原生有没有类似的功能呢？
知识点：
each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
案例代码：
拿到上节课代码进行修改
九、 jQ中的Ajax
1、 认识jQ中ajax的封装
jQ 对于ajax的封装有两层实现；
$.ajax 为底层封装实现；
基于 $.ajax ，分别实现了$.get 与$.post 的高层封装实现；
2、 ajax 的底层实现
基本语法：
$.ajax(obj)
对象的参数设置及含义：
async： 布尔类型，代表是否异步，true代表异步，false同步，默认为true
cache： 是否缓存，布尔类型，true代表缓存，false代表不缓存，默认为true
complete： 当Ajax状态码（readyState）为4的时候所触发的回调函数
contentType： 发送信息至服务器时内容编码类型；(默认: "application/x-www-form-urlencoded")
data： 要求是一个字符串格式，Ajax发送时所传递的数据
dataType： 期待的返回值类型，可以是text，xml，json，默认为text类型
success： 当Ajax状态码为4且响应状态码为200时所触发的回调函数
type： Ajax发送网络请求的方式，(默认: "GET")；
url： 请求的url地址
案例代码：
GET 请求
POST 请求
//POST请求及同步异步
$.ajax({
url:'9-2.php',
type:'post',
data:'id=1111',
success:function(data){
alert(data);
},
// async:false,
});
// alert(22); //检验同步异步
设置返回值类型
//设置返回值类型
$.ajax({
url:'9-2.php?id=11',
success:function(data){
alert(data.a);
},
//jq接到后台的json字符串，转成对象后呈现给用户
dataType:'json',
});
PHP后台代码
// sleep(3);
if($_GET['id'] == 11)
{ //get
//if($_POST['id'] == 11)
//{ post
// echo 'jq_ajax';
echo json_encode(['a' => '2222']); //json 返回
}else
{
echo 'hhh';
}
3、 ajax 的高层实现
（1） GET 应用
基本语法：
$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
案例代码：
但是注意：IE浏览器存在缓存问题；
解决缓存问题 修改：
（2） POST 应用
$.post(url, [data], [callback], [type])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
案例代码：
十、 jQ中的跨域问题
Ajax技术受到浏览器同源策略的限制，禁止从一个域上向另外一个域发送请求。
也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。
后台不同域下的PHP代码
$arr = ['a' => 1, 'b' => 'san', 'c' => 'wu', 'd' => 4];
$str = json_encode($arr);
echo $_GET['fn'] . "($str)";
前端jq跨域的三种用法
十一、 第三方插件
1、 分页插件
找到适合自己的插件下载，解压后将无关文件删除；
本质上来说，只要引入js文件就可以使用了，但有时也需要样式表等文件，具体看需求；
http://www.jq22.com/jquery-info13734
打开示例代码，查看插件的使用方式；
var options = {
"id": "page", //显示页码的元素
"data": datas, //显示数据
"maxshowpageitem": 2, //最多显示的页码个数
"pagelistcount": 2, //每页显示数据的个数
"callBack": function(result){
var cHtml = "";
for(var i = 0; i < result.length; i++){
cHtml += "" + result[i].name + " "; //处理数据
}
$("#demoContent").html(cHtml);//将数据增加到页面中
}
};
page.init(datas.length. 1. options);
根据示例代码实现分页:
page.php
mysql_connect('localhost', 'root', '123456');
mysql_query('use test');
mysql_query('set names utf8');
//SQL 语句
$sql = "select * from test ";
$res = mysql_query($sql);
$data = [];
while($row = mysql_fetch_assoc($res))
{
$data[] = $row;
}
echo json_encode($data);
page.html
Title