jQuery简介

1. 什么是jQuery

   它是一个轻量级的javascript类库
   
   注1：就一个类“jQuery”，简写“$”

2. jQuery优点
  2.1 总是面向集合
  2.2 多行操作集于一行 

3. hello jQuery
  3.1 导入js库（）
  3.2 $(fn)做为程序入口 
  
  $(fn)、$(document).ready(fn)与window.onload的区别？

4. jQuery三种工厂方法    （demo2.jsp）
  4.1 jQuery(exp[,context])
      exp：选择器
      context：上下文，环境/容器，documemt

      注1：选择器，css选择器
      标签选择器
      ID选择器
      类选择器

      包含选择器：E1 E2
      组合选择器：E1,E2,E3

      自定义选择器：:exp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    

        点我1
    

    

        点我2
    

    

        点我3
    

    

        点我4
    

    

        

            点我5
        

    

    点我

 

  4.2 jQuery(html)    （demo3.jsp）
      html：基于html的一个字符串

  4.3 jQuery(element)    （demo3.jsp）
      element：js对象，表示一个html元素对象
      js对象与jquery对象的相互转换

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    
        ---请选择---
    
    
        ---请选择---
    
    
    
    
    
    
    

  注1：$就是jQuery简写

 

5. jQuery程序的入口
   $(document).ready(fn)

   $(fn);

 

6. this指针的作用    （demo4.jsp）
  6.1 事件源（获取当前按钮的按钮值）
             6.2 当前元素（点击按钮，获取所有a标签的值）
        6.3 插件一章再讲

//事件源
$(function(){
    $(":input").click(function(){
        alert(this.value);
         $("a").each(function(inde,item){
             //指的是当前元素
             alert($(index+","+$(this).html()+","+$(item).html());
         })    ;    
    });
})

   
7、使用jquery动态给table添加样式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









    

        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    

书名	作者	点击量
圣墟	辰东	10万
飞剑问道	我吃西红柿	11万
杀神	逆苍天	22万
龙王传说	唐家三少	18万
斗破苍穹	天蚕拖豆	1万

jQuery插件

1. 插件机制简介
    往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式
  2.1 对象
      {sid:'s01',sname:'zs'}
  2.2 列表/数组
      [1,3,4,5]
      
  2.3 混合模式
      {id:3,hobby:['a','b','c']}

 

2. $.extend和$.fn.extend
  2.1 $.extend：对象的扩展(或继承)
      $.extend(obj1,obj2,obj3[,...])
      $.extend(obj1,obj2)
      $.extend(obj1)/$.method=function(options){...};
      

  2.2 $.fn.extend
      $.fn.extend(obj1)//$.fn.method=function(options){...};

3. jQuery插件的添加
   其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

demo6:(json的三种格式、.extend和.extend和 .extend和.extend和.fn.extend）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>









yellow

3. jQuery插件的添加
   其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

4. jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）
  4.1 命名
      jquery.xxx.js

  4.2 扩展实例方法

  4.3 如何面向集合

  4.4 如何多行集于一行

  4.5 命名参数的写法
      $.extend(defaults,options);

 

建一个css样式和js文件夹:（记得导包）

把css放在jquery.table.css文件中:

@charset "UTF-8";
      
.fen {
    background: #ff66ff;
}

.yellow {
    background: #ffff66;
}

.red {
    background: #ff3333;
}

.blue {
    background: #9999ff;
}

.green {
    background: #bbff99;
}
.hui {
    background: #d6d6c2;
}
 

把js放在jquery.table.js文件中:

$(function(){
    
    var defaults={
            head : 'fen',
             out : 'yellow',
            over : 'red'
    }
    $.fn.extend({
        //使用return的原因是让该实例方法支持链编程，好比Stringbuffer
        bgColor:function(option){
            $.extend(defaults,option);
            
            //this指的是插件本身，可以看成一个jquery实例
            return this.each(function() {
                //this指的是当前元素
                $(" tr:eq(0)",this).addClass(defaults.head);
                $("tr:gt(0)",this).addClass(defaults.out);
                //添加动态效果
                $("tr:gt(0)",this).hover(function(){
              $(this).removeClass().addClass(defaults.over);
                },function(){
              $(this).removeClass().addClass(defaults.out);
                });
            });
        }
    
    });
    $("table")
})

 

把css和js代码封装在head.jsp页面:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>




！

然后在页面调用head.jsp里面的css样式和js代码:(<%@ include file="/jsp/common/head.jsp" %>)

最后为jsp页面：

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/jsp/common/head.jsp" %>









    

        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    

书名	作者	点击量
圣墟	辰东	10万
飞剑问道	我吃西红柿	11万
杀神	逆苍天	22万
龙王传说	唐家三少	18万
斗破苍穹	天蚕拖豆	1万

    

        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    

书名	作者	点击量
圣墟	辰东	10万
飞剑问道	我吃西红柿	11万
杀神	逆苍天	22万
龙王传说	唐家三少	18万
斗破苍穹	天蚕拖豆	1万

ajax:

 1. jackson
   Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
   和xml文档，同样也可以将json、xml转换成Java对象

   核心代码：

   ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);
   
   int count = md.getColumnCount();
   map.put(md.getColumnName(i), rs.getObject(i));

2. jackson将java-->json
  2.1 JavaBean/Map
      {}
 
  2.2 数组/List/Set
      []

  2.3 类里嵌类
      混合模式

3. java->json死循环
   忽略双向关联的一个方向即可
    
   @JsonIgnore/程序控制

 

后台json的三种格式的形式:

package com.lww.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.sun.xml.internal.ws.client.Stub;
import com.lww.entity.Student;

/**
 * 后台json的三种格式的体现形式
 *后台三种格式的体现形式
 *
 */
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
    //j\第一种体现形式：json对象
    Student stu1=new Student("s001", "张三");
  ObjectMapper om=new ObjectMapper();
  System.out.println(om.writeValueAsString(stu1));
    
    //第二种：json数组
    Student stu2=new Student("s002", "李四");
    Listlist1=new ArrayList<>();
    list1.add(stu1);
    list1.add(stu2);
    System.out.println(om.writeValueAsString(list1));

    //第三种：混合格式
    Mapmap=new HashMap();
    map.put("total", 2);
    map.put("stus", list1);
    System.out.println(om.writeValueAsString(map));
    
}
}

 

javaBean与Map集合转化成json字符串格式是一样的

package com.lww.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 *javaBean与Map集合转化成json字符串格式是一样的
 *
 */
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
    Mapstu1=new HashMap();
    stu1.put("sid", "s001");
    stu1.put("sname", "张三");
    ObjectMapper om=new ObjectMapper();
    System.out.println(om.writeValueAsString(stu1));
    
Mapstu2=new HashMap();
    stu2.put("sid", "s002");
    stu2.put("sname", "李四");
    
    List> list1=new  ArrayList<>();
    list1.add(stu1);
    list1.add(stu2);
    System.out.println(om.writeValueAsString(list1));
    

    
}
}

 

3.java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制

 json死循环问题:

package com.lww.jquery;

import java.util.HashSet;
import java.util.Set;

import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.lww.entity.Student;
import com.lww.entity.Teacher;

/**
 * 
 *json死循环问题
 */
public class Demo3 {
/**
 * StackOverflowError栈溢出 双向绑定
 * 1.由双向绑定改成单向，就是将彼此之间的关系交于一方维护
 * 2.@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
 */
public static void main(String[] args) throws JsonProcessingException {
    Student stu1=new Student("soo1", "哈哈");
    Student stu2=new Student("s002", "呵呵");
    Teacher tea1=new Teacher("t001", "张三", null);
    Teacher tea2=new Teacher("t002", "李四", null);
    Setteas=new HashSet<>();
    teas.add(tea1);
    teas.add(tea2);
    stu1.setTeas(teas);
    Setstus=new HashSet<>();
    stus.add(stu1);
    stus.add(stu2);
    tea1.setStus(stus);//双向绑定，栈溢出
    ObjectMapper om=new ObjectMapper();
    System.out.println(om.writeValueAsString(stu1));
    
}
}

ajax实现省市联动例子，代码如下：

package com.lww.dao;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.lww.util.JsonBaseDao;
import com.lww.util.JsonUtils;
import com.lww.util.PageBean;
import com.lww.util.StringUtils;

public class ReginDao extends JsonBaseDao {
public List>list(MapparaMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String id=JsonUtils.getParamVal(paraMap, "ID");
    String sql="select * from ch_region where true";
    if(StringUtils.isBlank(id)) {
        sql += " and parent_id=7459 ";
        
    }else {
        sql += " and parent_id="+id;

    }
    
    return super.executeQuery(sql, pageBean);
    
}
    
    public static void main(String[] args) {
        MapparaMap=new HashMap();
        paraMap.put("ID", new String[]{"9504"});
        ReginDao reginDao=new ReginDao();
        try {
        List>list=reginDao.list(paraMap, null);
        System.out.println(list);
    } catch (InstantiationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    
    
}

JsonUtils(用来处理json数据的工具包)：

package com.lww.util;

import java.util.Arrays;
import java.util.Map;

/**
 * 专门用来处理json数据的工具包
 *
 */
public class JsonUtils {
    /**
     * 从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
     * paramMap 获取从jsp页面传递到后台的参数集合（req.getParamterMap）
     * key
     * 
     */
    public static String getParamVal(Map 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 "";
    }
    }

 

RegionServlet:

package com.lww.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lww.dao.ReginDao;
import com.lww.util.ResponseUtil;

public class RegionServlet extends HttpServlet {

    private static final long serialVersionUID = -7694858310078820183L;
private ReginDao reginDao=new ReginDao();
    
    @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 {
        try {
     List> list=reginDao.list(req.getParameterMap(), null);
     ObjectMapper om=new ObjectMapper();
     ResponseUtil.write(resp, om.writeValueAsString(list));
} catch (InstantiationException | IllegalAccessException | SQLException e) {
    e.printStackTrace();
        } catch (Exception e) {
    e.printStackTrace();
}
        
    }
}

 

里面放入js代码

 

$(function(){
    var ctx = $("#ctx").val();
    $.ajax({
        url:ctx+"/regionServlet",
        success:function(data){
            for(index in data){
                //console.log(data[index]);
                $("#province").append(""+data[index].REGION_NAME+"");
            }
        },
        dataType:"json"
    });
    
    $("#province").change(function(){
        $("option:gt(0)","#city").remove();//清空
        $.ajax({
            url:ctx+"/regionServlet?ID="+this.value,
            success:function(data){
                for(index in data){
                    //console.log(data[index]);
                    $("#city").append(""+data[index].REGION_NAME+"");
                }
            },
            dataType:"json"
        });
    });
})
 

配置web.xml文件

  Pro_jquery
 
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
 
  
 
  regionServlet
 com.lww.web.RegionServlet
 
 
 regionServlet
 /regionServlet
 
  

 

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    
    

$.ajax实现省市联动

    

        收货地址  
        
            ---请选择省份---
          
        
            ---请选择城市---
          
        
            ---请选择县区---
        
    

由于截图太多（懒得截）效果可自己试！！！