jQuery学习（二）

六、HTML DOM遍历和修改

   对于Dom的修改上文已经进行了总结，现在说下遍历

   1.遍历祖先： parent   ，parents，parentsUntil

   parent：会向上遍历，返回上一级父级

   parents：会向上遍历返回所有父级

   parentsUntil（‘元素’）：向上遍历，返回到传入元素中所有的父级（不包含传入元素）

                 <div class="box">
			<div class="son1">
				<div class="son2"></div>
				<p class="p2">
					<span>111</span>
				</p>
			</div>
		</div>		
		<script type="text/javascript">
			$(function(){
				var par1 = $('span').parent();//p2
				console.log(par1)
				var pars = $('span').parents();//p2,son1,box,body,html
				console.log(pars);
				var paru = $('span').parentsUntil($('.son1'));//p2
				console.log(paru);
			})
			
		</script>

    2.遍历后代： children，find

   children：遍历下一级所有的后代子元素

   find：遍历所有的后代子元素（需要传入选择器条件，不传返回空）

                        <div class="box">
			<div class="son1">
				<div class="son2"></div>
				<p class="p2">
					<span>111</span>
				</p>
			</div>
		</div>		
		<script type="text/javascript">
			$(function(){
				var chd = $('.son1').children();//son2,p2
				console.log(chd)
				var fnd = $('.son1').find("*");//son2,p2,span
				console.log(fnd);
			})
			
		</script>

   3.同级遍历： siblings()，next()，nextAll()，nextUntil()，prev()，prevAll()，prevUntil()

                  <div class="box">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="son3"></div>
			<div class="son4"></div>
			<div class="son5"></div>
			<div class="son6"></div>
		</div>		
		<script type="text/javascript">
			$(function(){
				var sib = $(".son3").siblings();
				console.log(sib);//返回所有的同级元素
				var next = $(".son3").next();
				console.log(next);//返回下一个同级元素
				var nextAll = $(".son3").nextAll();
				console.log(nextAll);//返回下面所有的同级元素
				var nextUntil = $(".son3").nextUntil(".son5");
				console.log(nextUntil);//返回下面到指定区间的同级元素
				var prev = $(".son3").prev();
				console.log(prev);//返回上一个同级元素
				var prevAll = $(".son3").prevAll();
				console.log(prevAll);//返回上面所有的同级元素
				var prevUntil = $(".son3").prevUntil(".son1");
				console.log(prevUntil);//返回上面到指定区间的同级元素
			})
			
		</script>

4.元素过滤：first，last，eq，filter

first：元素集合中过滤出第一个元素，

last：从元素集合中过滤出最后一个元素

eq：传输参数数字n，从元素集合中过滤出第n个元素

filter：传入过滤条件，按条件过滤。

                <div class="box">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="son3"></div>
			<div class="son4"></div>
			<div class="son5"></div>
			<div class="son6"></div>
		</div>		
		<script type="text/javascript">
			$(function(){
				var sib = $(".son3").siblings();
				var first = sib.first();
				console.log(first);
				var last = sib.last();
				console.log(last);
				var eq = sib.eq(1);//从0开始
				console.log(eq)
				var fil = sib.filter(".son4");
				console.log(fil);
			})
			
		</script>

七、ajax：

1.$('元素对象').load(“资源路径”，callback)：加载服务器端的资源放入指定元素里

这里可以用这个方法将html中的内容抽取出来，加入到需要的部分

                <div class="box">
			
		</div>
		<button id="btn">点我</button>		
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					$('.box').load("data.json",function(responseTxt,statusTxt,xhr){
						if(responseTxt!=null){
							//$.parseJSON(responseTxt).data数据是两个对象
							alert($.parseJSON(responseTxt).data[0].sp)							
						}
						console.log("---------------------------------");
						console.log(statusTxt);
						console.log("---------------------------------");
						console.log(JSON.stringify(xhr));
						console.log("---------------------------------");
					});
					
				});
				
			})
			
		</script>

2.$.get(),$.post

$.get(url,callback):向服务端请求数据

$.post(url,data,callback):客户端向服务端提交数据

在做测试的时候遇到一个405  method not allowed，检查了路径没有错误，甚至重新写了servlet后来我将后台的doget改成了dopost数据才请求成功

请求数据：

public class GetServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		List<People> peoliList = new ArrayList<>();
		People people = new People("array", "hehe", 18, 17899.0);
		People people2 = new People("jcy", "1", 18, 1117899.0);
		People people3 = new People("obj", "obj", 22, 12563.3);
		peoliList.add(people);
		peoliList.add(people2);
		peoliList.add(people3);
		String string = "hello get";
		resp.getWriter().print(peoliList.toString());
	}
	
	
}

                <div class="box">
			
		</div>
		<button id="btn">点我</button>		
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					 $.get("./gets",function(data,status){
						 alert("数据: " + data + "\n状态: " + status);
					});
				});
				
			})
			
		</script>

提交数据：

package com.array.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.array.bean.People;

@WebServlet("/post")
public class PostServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String username = req.getParameter("username");
		Integer age = Integer.valueOf(req.getParameter("age"));
		System.out.println(username+"年龄是"+age);
		resp.getWriter().print("hahaha");
		
	}
	
	
}

                <div class="box">
			
		</div>
		<button id="btn">点我</button>		
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					$.post("./post",
					{username:"array",age:18},
					function(data,status){
						 alert("数据: " + data + "\n状态: " + status);
					});
				});
				
			})
			
		</script>