JQuery入门学习02
Posted sihai_1991
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery入门学习02相关的知识，希望对你有一定的参考价值。
jQuery常用方法API:
append()
prepend()
after()
before()
attr("参数")：取得属性值
attr("参数","参数")：设置属性值
remove()
clone()：不复制按钮的动态添加行为，但复制按钮的静态行为
clone(true)：即复制按钮的动态添加行为，又复制按钮的静态行为
被替换：replaceWith(替换者)
html()：取得获取标签中的内容
html(参数)：设置值到标签中
val()：取得标签的value属性值
val(参数)：设置标签的value属性值
removeAttr()
addClass("样式名")
removeClass("样式名")
toggleClass("样式名")：如果原来有样式，变成无样式；如果原来无样式，变成有样式
hasClass("样式名")：true表示有样式，false表示无样式
children()
next()
prev()
siblings()：同一级别的所有兄弟节点
show()
hide()
fadeIn()
fadeOut()
slideDown()
slidUp()
jQuery常用事件API：
click()
dblclick()
blur()
focus()
change()
select()
mousemove()
keyup()
mouseover()
mouseout()
submit()
ready()或$();
1）传统dom做法：window.οnlοad=function()当多个window.onload同时使用时，只会出现一次，后者覆盖前者；
浏览器必须加载完整个页面，同时所有图片需要正确显示出来，才会执行window.onload事件。 【无任何简写形式】
2）jquery做法：$(document).ready()，不论写多少次，都会按照书写顺序依次执行，当需要加载N多图片时，无需等待所有图片加载完毕，就可以执行ready()事件了.
ready()方法有简化形式，$(函数);
取得服务端当前时间：
jquery对象.load(url,sendData,function(backData,textStatus,xhr)... ...)
load()方法的返回值，会自动设置到jquery对象的val()中，即标签中
如果无参数传递，load()方法以GET形式发送数据
如果有参数传递，load()方法以POST形式发送数据，数据无需手工进行URL编码
第一个参数：表示提交的目的地
第二个参数：表示发送的数据，以JSON格式书写
第三个参数：无名函数。
前几个参数可选
函数参数一:返回的数据，没有的话，返回""
函数参数二:用字符串描述的状态情况：success,error
函数参数三:AJAX引警
这几个参数必选
基于jQuery的三级菜单联动【$.post(url,sendData,function(backData,textStatus,xhr)... ...)】：
1，导入js文件；
2，新建jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="provinceID">
<option>请选择</option>
<option>湖南</option>
<option>广东</option>
<option>湖北</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
<select id="areaID">
<option>选择区域</option>
</select>
</body>
<script type="text/javascript">
//省份下拉框
$("#provinceID").change(function()
//清空城市
$("#cityID option:gt(0)").remove();
//清空区域
$("#areaID option:gt(0)").remove();
//获取选中项的内容
var province = $("#provinceID option:selected").html();
//alert(province);
var url="$pageContext.request.contextPath/ProvinceServlet?time="+new Date().getTime();
var sendData = "province":province,"method":"provinceToCity";
$.post(url,sendData,function(backData,textStatus,xhr)
//alert(backData);
var jsonJavaString = xhr.responseText;
var json = eval("("+jsonJavaString+")");
var size = json.city.length;
//alert(size);
for(var i = 0; i<size; i++)
var city = json.city[i];
var option = $("<option>"+city+"</option>");
$("#cityID").append(option);
);
);
//城市下拉框
$("#cityID").change(function()
$("#areaID option:gt(0)").remove();
var city = $("#cityID option:selected").html();
//alert(city);
var url="$pageContext.request.contextPath/ProvinceServlet";
var sendData ="city":city,"method":"cityToArea";
$.post(url,sendData,function(backData,textStatus,xhr)
var jsonJavaString = xhr.responseText;
var json = eval("("+jsonJavaString+")");
var size = json.areas.length;
//alert(size);
for(var i=0; i<size; i++)
var areas = json.areas[i];
var option = $("<option>"+areas+"</option>");
$("#areaID").append(option);
);
);
</script>
</html>
public class ProvinceServlet extends HttpServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//获取请求的参数
String method = request.getParameter("method");
if("provinceToCity".equals(method))
this.provinceToCity(request, response);
else if("cityToArea".equals(method))
this.cityToArea(request, response);
//省份（城市）
private void provinceToCity(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
String province = request.getParameter("province");
String jsonJavaString = null;
if("广东".equals(province))
jsonJavaString = "city:['广州','深圳','韶关','清远']";
else if("湖南".equals(province))
jsonJavaString = "city:['长沙','株洲','衡阳']";
else if("湖北".equals(province))
jsonJavaString = "city:['武汉','荆州']";
response.getWriter().write(jsonJavaString);
//城市（区域）
private void cityToArea(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException
String city = request.getParameter("city");
String str = null;
if("长沙".equals(city))
str = "areas:['天心区','雨花区','岳麓区']";
else if("广州".equals(city))
str = "areas:['天河区','越秀区']";
else if("武汉".equals(city))
str = "areas:['武昌区','黄冈']";
response.getWriter().write(str);
以上是关于JQuery入门学习02的主要内容，如果未能解决你的问题，请参考以下文章