JQuery

1. 什么是jQuery

它是一个轻量级的javascript类库

2. jQuery优点

总是面向集合
多行操作集于一行

3.导入js库

<script type="text/javascript" src=""></script>

4. jQuery三种工厂模式

1.选择器

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("a").click(function(){
            alert("利用a标签获取jquery实例")
        });
        
        $(".c2").click(function(){
            alert("利用类选择器获取jquery实例");
        });
        
        $("#a3").click(function(){
            alert("利用id选择器获取jquery实例");
        });
        
        $("div button").click(function(){
            alert("利用包含选择器获取jquery实例");
        });
        
        $("a,button").click(function(){
            alert("利用组合选择器获取jquery实例");
        });
        
    })
</script>
</head>
<body>
    <p>
        <a id="a1" class="c1" href="#">点我1</a>
    </p>
    <p>
        <button id="a2" class="c2" href="#">点我2</button>
    </p>
    <p>
        <button id="a3" class="c3" href="#">点我3</button>
    </p>
    <div>
        <button id="a4" class="c1" href="#">点我4</button>
    </div>
    
</body>
</html>

 2.jquery对象转js对象

var $h1= $("#h1");
     alert($h1.val());
     //jquery对象转js对象
     var h1Node=$h1.get(0);
     alert(h1Node.value);

3.js对象转jquery对象

var h2Node=document.getElementById("h2");
     alert(h2Node.value);
     //js对象转jquery对象
     $h2Node=$(h2Node);
     alert(h2Node.val());

4. this指针的作用

<script type="text/javascript">
    $(function(){
        $(":input").click(function(){
            //this指的是事件源
            alert(this.value);
            $("a").each(function(){
                //this指的是当前元素
                alert($(this).html())
            });
        });
    })    ;
</script>

5.使用jquery动态给table添加样式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.fen {
    background: pink;
}

.yello {
    background: #ffff66;
}

.red {
    background: #ff3333;
}

.blue {
    background: #9999ff;
}

.green {
    background: #bbff99;
}
.hui {
    background: #d6d6c2;
}
</style>
<script type="text/javascript">
    $(function () {
        $("table tr:eq(0)").addClass("green");
        $("table tr:gt(0)").addClass("fen");
        
        $("table tr:gt(0)").hover(function(){
            $(this).removeClass().addClass("fen");
        },function(){
            $(this).removeClass().addClass("hui");
        });
        
    });
</script>
</head>
<body>
    <table border="1" width="100%">
        <tr>
            <td>书名</td>
            <td>作者</td>
            <td>点击量</td>
        </tr>
        <tr>
            <td>圣墟</td>
            <td>辰东</td>
            <td>10万</td>
        </tr>
        <tr>
            <td>飞剑问道</td>
            <td>我吃西红柿</td>
            <td>1万</td>
        </tr>
        <tr>
            <td>杀神</td>
            <td>逆苍天</td>
            <td>25万</td>
        </tr>
        <tr>
            <td>龙王传说</td>
            <td>唐家三少</td>
            <td>18万</td>
        </tr>
        <tr>
            <td>斗破苍穹</td>
            <td>天蚕拖豆</td>
            <td>1万</td>
        </tr>
    </table>
</body>
</html>

jQuery插件

1. 插件机制简介
就是用jquery写的一些js代码，他能实现具体的功能，比如上传图片，弹出遮罩层，直接将js文件引入进页面就可以调用了，达成快速开发的效果。
简单的来说，就是 往jquery类库里面去扩展方法，
 

Ajax运用

1、jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
 
//json对象json对象
Student stu1 = new Student("s001","张三");
    ObjectMapper om = new ObjectMapper();
    System.out.println(om.writeValueAsString(stu1));
//json数组：
Student stu2 = new Student("s002","李四");
    List<Student> ls = new ArrayList<>();
    ls.add(stu1);
    ls.add(stu2);
    System.out.println(om.writeValueAsString(ls));

//json混合模式
Map<String, Object> xmap = new HashMap<>();
    xmap.put("003",2);
    xmap.put("004",ls);
    System.out.println(om.writeValueAsString(xmap));

核心代码：

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

2、后台json的三种格式的体现形式

实体类（Student）：

package com.entity;

import java.util.HashSet;
import java.util.Set;
 public class Student {
     private String sid;
     private String sname;
     //教师集合
     private Set<Teacher> teas = new HashSet<>();
     
     public String getSid() {
         return sid;
     }
     public void setSid(String sid) {
         this.sid = sid;
     }
     public String getSname() {
         return sname;
     }
     public void setSname(String sname) {
         this.sname = sname;
     }
     public Set<Teacher> getTeas() {
         return teas;
     }
     public void setTeas(Set<Teacher> teas) {
         this.teas = teas;
     }
     @Override
     public String toString() {
         return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]";
     }
     public Student(String sid, String sname, Set<Teacher> teas) {
         super();
         this.sid = sid;
         this.sname = sname;
         this.teas = teas;
     }
     public Student() {
         super();
     }
     public Student(String sid, String sname) {
         super();
         this.sid = sid;
         this.sname = sname;
     }
 }
1 对象
2 列表/数组
3. 混合模式
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery.min.js">
</script>
<title>Insert title here</title>
<script type="text/javascript">
    $(function(){
        //json对象的字符串体现形式
        var jsonObj1 = {
            sid : 's001',
            sname : 'zhangsan'
        };
        console.log(jsonObj1);
        //json数组的字符串体现形式
        var jsonArray1 = [1,2,3,4,5];
        console.log(jsonArray1);
        //json混合模式的字符串体现形式
        var jsons = {id:3,hobby:['a','b']};
        console.log(jsons);
        
        var jsonObj3 = {
                sid : 's002',
                sname : 'lisi',
                hobby:['a','b']
        };
        
        //$.extend是用来扩充jQuery类属性或者方法所用
        var jsonObj2 = {};
        //用后面的对象扩充前一个对象
        //$.extend(jsonObj2,jsonObj1);
        //讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性值，会继续扩充
        $.extend(jsonObj2,jsonObj1,jsonObj3);
        console.log(jsonObj2);
        
        $.extend({
            hello:function(){
                alert('天气真好');
            }
        });
        $.hello();
        //$.fn.extend是用来扩充jquery实例的属性或者方法所用
        $.fn.extend({
            sayHello:function(){
                alert("适合打篮球");
            }
            
        });
        $("#yellow").hello();
        alert("yellow");
        
    });
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>

json死循环：

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

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

/**
 * json死循环问题
 * 1.由双向绑定改成单向绑定，也就是说将彼此之间的关系交于一方维护
 * 2.在teacher实体类那边加 @JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
 * @author Administrator
 *
 */
public class Demo3 {
    public static void main(String[] args) throws JsonProcessingException {
        
        Student s1 = new Student("s001", "张三");
        Student s2 = new Student("s002", "李四");
        Teacher t1 = new Teacher("t001", "小李", null);
        Teacher t2 = new Teacher("t002", "飞刀", null);
        Set<Teacher> teas = new HashSet<>();
        teas.add(t1);
        teas.add(t2);
        s1.setTeas(teas);// StackOverflowError双向绑定
        Set<Student> ss = new HashSet<>();
        ss.add(s1);
        ss.add(s2);
        t1.setS(ss);
        ObjectMapper om = new ObjectMapper();
        System.out.println(om.writeValueAsString(s1));
    }
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huxiaocong/p/11094427.html