【JQuery入门】学习02
2016-08-08 10:33
337 查看
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.onload=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>
3，新建Servlet;
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);
}
}4,部署发布到服务器上，浏览器地址中输入，访问........效果如下：
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.onload=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>
3，新建Servlet;
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);
}
}4,部署发布到服务器上，浏览器地址中输入，访问........效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 菜鸟写jquery入门教程(for web前端开发群4)(02)
- 从零开始学习jQuery (一) 开天辟地入门篇
- jQuery入门学习五：浮动窗口
- jquery入门学习
- jQuery入门学习九：仿GoogleSuggest
- jQuery学习笔记 02
- Jquery入门学习文档（手册）
- jQuery入门学习三：XMLHttpRequest处理xml格式的返回数据
- jQuery入门学习二：使用jQuery方式实现异步登录验证
- 从零开始学习jQuery (一) 开天辟地入门篇
- 从零开始学习jQuery (一) 开天辟地入门篇
- 从零开始学习jQuery (一) 开天辟地入门篇
- jquery 入门-方法学习
- jQuery入门学习四：jQuery处理xml格式的返回数据
- 从零开始学习jQuery (一) 开天辟地入门篇【转】
- jQuery入门指南教程学习
- 从零开始学习jQuery (一) 开天辟地入门篇
- jQuery入门学习之实现滑动效果：slideUp（）和slideDown（）小总结
- jQuery入门学习七：可编辑的表格
- 从零开始学习jQuery (一) 开天辟地入门篇