1. 什么是jQuery

它是一个轻量级的javascript类库

注1：就一个类“jQuery”，简写“$”

2. jQuery优点

2.1 总是面向集合

2.2 多行操作集于一行

jQuery的程序入口有3种

window.οnlοad=function(){         alert("3")     }

$(document).ready(function(){         alert("2")     })

$(function(){         alert("1");     })

结论：$(fn)、$(document).ready(fn)是等价的。那个代码在前面哪个先执行。

jsp的dom树结构加载完毕即刻调用方法

window.onload最后执行

jsp的dom树加载完,css,js等静态资源加载完毕执行

id选择器

$(function(){    //利用a标签获取jquery实例    /* $("a").click(function(){        alert("被翻牌子了");    }); */    //利用ID=a3标签获取jquery实例    /* $("#a3").click(function(){        alert("被翻牌子了");    }); */    /* $(".c1").click(function(){        alert("被翻牌子了");    }); */    /* $("p a").click(function(){        alert("被翻牌子了");    }); */    /* $("a,span").click(function(){        alert("被翻牌子了");    }); */    //讲解第二个参数的作用(在DIV标签内部寻找到a标签，然后给找到的标签添加事件)    //如果第二个参数没有填写，那么默认是document    $("a","div").click(function(){        alert("被翻牌子了");    });})

给按钮增加点击事件，让它给下拉框里面增加值

$(function(){          $(":input[name='name1']").click(function(){              //在ID=selId1的select的jquery实例追加"湖南省"的html jquery实例              $("#selId1").append("湖南省")          });           $(":input[name='name2']").click(function(){              //将"湖南省"的html jquery实例追加到id=selId2的select标签jquery实例              $("长沙").appendTo("#selId2")             /*  var $h1= $("#h1");              alert($h1.val());              //jquery对象转js对象              var h1Node=$h1.get(0);              alert(h1Node.value); */                            var h2Node=document.getElementById("h2");              alert(h2Node.value);              //js对象转jquery对象              $h2Node=$(h2Node);              alert(h2Node.val());          });      })

首先都没值

 

 add1之后

 

 add2之后

 

 jquery对象转js对象

var $h1= $("#h1");              alert($h1.val());              var h1Node=$h1.get(0);              alert(h1Node.value);

js对象转换成Jquery对象

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

this指针的作用

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

使用JQuery给table增加样式

$(function(){       $("table tr:eq(0)").addClass("yello");       $("table tr:gt(0)").addClass("red");              $("table tr:gt(0)").hover(function(){           $(this).removeClass().addClass("fen");       },function(){            $(this.removeClass().addClass("red"));                 })   })

Jquery的插件

 json的三种格式

2.1 对象

{sid:'s01',sname:'zs'}

2.2 列表/数组

[1,3,4,5]

2.3 混合模式

{id:3,hobby:['a','b','c']}

json对象

Student stu=new Student("s001","zs");        ObjectMapper hs=new ObjectMapper();        System.out.println(hs.writeValueAsString(stu));

json数组

Student stu1=new Student("s002","ls");        List
     
       list=new ArrayList<>();        list.add(stu1);        list.add(stu);        System.out.println(hs.writeValueAsString(list));
     

json混合模式

Map
     
       map = new HashMap<>();    map.put("003",2);    map.put("004",ls);    System.out.println(hs.writeValueAsString(map));
     

json死循环

Student s1 = new Student("q1", "ww");        Student s2 = new Student("q2", "ls");        Teacher d1 = new Teacher("w1", "dw", null);        Teacher d2 = new Teacher("w2", "fw", null);        Set
     
       teas = new HashSet<>();        teas.add(d1);        teas.add(d2);        s1.setTeas(teas);        Set
      
        ss = new HashSet<>();        ss.add(s1);        ss.add(s2);        t1.setS(ss);        ObjectMapper om = new ObjectMapper();        System.out.println(om.writeValueAsString(s1));
      
     

三级联动

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
     请选择省请选择市请选择县

效果图