初识JQuery
什么是JQquery
- 它是一个轻量级的javascript类库
- jQuery优点:①总是面向集合，②多行操作集于一行 。
- 必须要导入js库（）
初识JQquery
( f n ) 、 (fn)、 (fn)、(document).ready(fn)与window.onload的区别？
- 使用方法
window.onload =function(){
alert("hello，jQuery3");
}
$(document).ready(function(){
alert("hello，jQuery2");
})
$(function(){
alert("hello，jQuery1");
})
/* $(fn)、$(document).ready(function)是等价的位置， window.onload最后执行
jsp的dome树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完，css/ js 等静态资源加载完毕执行
*/
jQquery选择器
- 标签选择器
$(function() {
//利用a标签获取实例
$("a").click(function(){
alert("利用a标签获取实例");
});
})
- id选择器
$(function() {
//利用id=a3获取jquery实例
$("#a3").click(function(){
alert("利用id=a3获取jquery实例");
});
})
- class选择器
$(function() {
//利用类选择器class=c1获取jquery实例
$(".c1").click(function(){
alert("利用类选择器class=c1获取jquery实例");
});
})
- 包含选择器
$(function() {
//利用类选择器class=c1获取jquery实例
$("p a").click(function(){
alert("利用包含选择器<p>里面包含<a>获取jquery实例");
});
})
- 组合选择器
$(function() {
//利用组合选择器多个标签用逗号隔开获取jquery实例
$("a,span").click(function(){
alert("利用组合选择器多个标签用逗号隔开获取jquery实例");
});
})
- 自定义选择器
$(function() {
//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
//如果第二参数没有填写，那么默认是document
$("p","div").click(function(){
alert("在div标签内部寻找a标签，然后给找到的标签添加事件");
});
})
js对象与jquery对象的相互转换
- 给标签添加事件
$(function() {
//在input里找到name=name1的标签添加事件
$(":input[name='name1']").click(function() {
alert("在input里找到name=name1的标签添加事件");
});
})
- 给点击事件直接添加代码内容
$(function() {
$(":input[name='name1']").click(function() {
//在给id=selId1的select的jquery实例上追加<option value='1'>湖南省</option>下拉框代码
$("#selId1").append("<option value='1'>湖南省</option>");
});
$(":input[name='name2']").click(function() {
//把<option value='1'>长沙</option>下拉框代码添加到id=selId2的select标签jQuery
$("<option value='1'>长沙</option>").appendTo("#selId2");
});
})
- 获取中的value值三种方法
var $h1 = $("#h1");//①根据id选择器获取
alert($h1.val());
//jquery对象转js对象
var h1Node =$h1.get(0);//②单个形式
var h1Node =$h1.get(0);//③数组集合形式
alert(h1Node.value); */
/* //获取<input type="hidden" id="h2" value="h2">中的value值两种方法
var h2Node =document.getElementById("h2");//①根据id获取到value=h1
alert (h2Node.value);
//js对象转jQuery对象
var $h2Node = $(h2Node);
alert($h2Node.val()); */
事件源 当前元素（获取当前按钮的按钮值）
$(function() {
$(":input").click(function() {
alert(this.value);//获取当前标签input的value 事件源
$("a").each(function(index,item) {
alert(index+","+$(this).html()+","+$(item).html());//指的是当前元素
});
});
})
使用jquery动态给table添加样式
$(function(){
$("table").each(function(){
//给默认值
$("tr:eq(0)",this).addClass('head');
$("tr:gt(0)",this).addClass('out');
//添加动态效果
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass('over');
},function(){
$(this).removeClass().addClass('out');
});
});
})
jquery插件
json的三种格式
- 1 .对象
$(function() {
//json对象的字符串体现形式
var jsonObj1 ={
sid :'s001',
sname :'zhangsan'
};
console.log(jsonObj1);
alert(jsonObj1.sid);
})
-
- 列表/数组
//json数组的字符串体现形式
var jsonArray1=[1,2,3,4,];
console.log(jsonArray1);
alert(jsonArray1);
- 3.混合模式
//json混合模式的字符串体现形式
var jsons ={id :3,hobby :['a','b','c']};
console.log(jsons);
alert(jsons);
- 后台json的三种体现形式
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
//json对象
Student stu1 =new Student("s001", "张三");
ObjectMapper om =new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
// {"sid":"s001","sname":"张三"}
//json数组
Student stu2 =new Student("s002", "李四");
List<Student> list1 =new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
// {"sid":"s001","sname":"张三"}
// [{"sid":"s001","sname":"张三"},{"sid":"s002","sname":"李四"}]
//json混合格式
Map<String, Object> map =new HashMap<>();
map.put("total", 2);
map.put("stu", list1);
System.out.println(om.writeValueAsString(list1));
}
}
- javaBean与Map集合转换成json字符串格式是一样的
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
Map<String, Object> stu1 =new HashMap<>();
stu1.put("sid", "s001");
stu1.put("sname", "张三");
ObjectMapper om =new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
// {"sname":"张三","sid":"s001"}
Map<String, Object> stu2 =new HashMap<>();
stu1.put("sid", "s002");
stu1.put("sname", "李四");
List<Map<String, Object>> list1 =new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
// [{"sid":"s001","sname":"张三"},{"sid":"s002","sname":"李四"}]
// [{"sname":"李四","sid":"s002"},{"sname":"李四","sid":"s002"}]
}
}
- json死循环问题
//解决死循环的方法
//1、由双向绑定改成单向绑定，也就说将彼此之间的关心交于一方维护。
// 2、@JsonIgnore ：将彼此循环调用的属性忽略，不参于对象转成json格式
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
Student stu1 =new Student("s001", "aaaa");
Student stu2 =new Student("s002", "bbbb");
Teacher tea1 =new Teacher("t001", "1111", null);
Teacher tea2 =new Teacher("t002", "2222", null);
Set<Teacher> teas =new HashSet<>();
teas.add(tea1);
teas.add(tea2);
stu1.setTeas(teas);
Set<Student> stus =new HashSet<>();
stus.add(stu1);
stus.add(stu2);
tea1.setStus(stus);
ObjectMapper om =new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
}
}
$.extend和 $.fn.extend
$(function() {
// $.extend(jsonObj2,jsonObj1);
//用后面的对象扩充定一个对象
//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，
//如果后面对象有新的属性，会继续扩充
$.extend({
hello:function(){
alert('我来了');
}
});
$.hello();
//$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.fn.extend({
sayhello:function(){
alert('早丫丫!');
}
});
$("#yellow").sayhello();
alert("yellow");
})
jQuery的ajax请求
- Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java
对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象
- 利用jQuery的ajax做一个省市县三级联动
JsonBaseDao
/**
*1.创建一个实体类的实例
*2.给创建的实例属性赋值
*3.将添加完内容的实体类添加到list集合中
*/
public class JsonBaseDao extends BaseDao<Map<String,Object>>{//继承BaseDao引用的泛型类方法
public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) {
return super.executeQuery(sql, pageBean, new Callbac<Map<String, Object>>() {
public List<Map<String, Object>> foreach(ResultSet rs) {
List<Map<String, Object>> list=new ArrayList<>();
ResultSetMetaData md = rs.getMetaData();//获取行跟列的数值 获取源数据
int count=md.getColumnCount();//返回列
Map<String, Object> map=null;//可多次创建引用
while(rs.next()) {
map=new HashMap<>();
for (int i = 1; i <= count; i++) {
map.put( md.getColumnName(i), rs.getObject(i));//每一列的数据
}
list.add(map);
}
return list;
}
});
}
JsonUtils
/**
*专门用来处理json数据的工具包
*从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
*paramMap 获取从jsp页面传递到后台的参数集合 （req.getParamVa）
*/
public class JsonUtils{
public static String getParamVal(Map<String,String[]> paramMap,String Key){
if(paramMap != null&& paramMap.size()>0 ){
String [] vals =paramMap.get(key);
if(vals != null && vals.length >0){
String val= Arrays.toString(vals);
return val.substring(1, val.length()-1);
｝
return " ";
｝
return " ";
}
}
RegionDao
public class RegionDao extends JsonBaseDao{//继承于JsonBaseDao
public List<Map<String, Object>> list(Map<String, String[]> paramMap,PageBean pageBean){//带参数的分页查询方法
String id = JsonUtils.getParamVal(paramMap, "ID");//调用处理json数据的工具包
String sql="select * from ch_region where 1=1";
if(StringUtils.isBlank(id)) {
sql+=" and parent_id=7459";
}
else {
sql+=" and parent_id="+id;
}
return super.executeQuery(sql, pageBean);
}
RegionServlet
public class RegionServlet extends HttpServlet {
private static final long serialVersionUID = 6826185684173095882L;
private RegionDao regionDao=new RegionDao();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();
out.println(om.writeValueAsString(list).toString());
out.flush();
out.close();
}
}
//还有简单的servlet配置我的省略了
运行的jsp界面
<title>ajax实现省市县三级联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"/reg.do",
success:function(data){
for(index in data){
//把数据追加到后面
$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
$("#province").change(function(){
$("option:gt(0)","#city").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
})
$("#city").change(function(){
$("option:gt(0)","#county").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
})
})
</script>
</head>
<body>
地址：
<select id="province">
<option selected="selected">---请选择省份---</option>
</select>
<select id="city">
<option selected="selected">---请选择城市---</option>
</select>
<select id="county">
<option selected="selected">---请选择县区---</option>
</select>
</body>
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
