Run
Hello!
« »变形

三、JQuery筛选查找

3.1 过滤

  
第一段
第二段
第三段
第四段
eq(1)firstlastfilternot

3.2 查找

查找祖先

• parent() 直接父级
• parents() 查找所有祖先,包括到html根标签
• parentsUntil(元素) 返回所有父级,直到指定元素停止

找直接祖先找所有祖先找所有祖先,直到body停
box-1
box-2
box-3
box-4
box-5

查找后代

• children() 返回直接后代(子)
• find(选择器) 返回所有后代,再跟进指定选择器过滤

找直接后代找所有后代再过滤
box-1
box-2
box-3
box-4
box-5

查找兄弟

• siblings() 所有兄弟
• next() 下一个兄弟
• prev() 上一个兄弟

找直接祖先找所有祖先找所有祖先,直到body停
找直接后代找所有后代再过滤
找box-4所有兄弟找box-4前一个兄弟找box-4后一个兄弟
box-1
box-2
box-3
box-4
box-5

四、Ajax

ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)

• 异步,页面中可以同时进行多个事情
• 经典案例: 注册框,输入完用户名直接提示"已注册"
• 这就是异步,也就是局部刷新

---

使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据

PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax

4.1 FastMock网站

这个网站是用来模拟一个服务器地址,这个服务器可以提供一些数据,等会儿使用ajax请求这个服务器的数据

https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users

4.2 $.get

get请求一般用来从服务器获得数据,一般就是用来查询数据

// $.get() 可以向服务器发送一个get请求
// $.get(url, [data], [callback], [type])
// url是服务器路径,必填
// data,是向服务器发送的数据,可选
// callback,请求完成后的回调函数,可选
// type,返回内容类型,可选

$.get --> go
编号
姓名
分数
班号
生日
组号

4.3 $.post(暂时不讲)

post一般是向服务器发送数据的,一般是用来添加

4.4 $.ajax

$.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数

$.ajax({url:"",   // 服务器路径type:"",  // 请求方式,默认是getdata:"",  // 向服务器发送的数据success:function(ret){  // 成功的回调函数,参数就是服务器返回的数据},error:function(){ // ajax请求失败执行的回调函数}});