JQuery

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

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

jQuery的程序入口有3种

window.onload=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实例追加"<option value='1'>湖南省</option>"的html jquery实例
              $("#selId1").append("<option value='1'>湖南省</option>")
          }); 
          $(":input[name='name2']").click(function(){
              //将"<option value='1'>湖南省</option>"的html jquery实例追加到id=selId2的select标签jquery实例
              $("<option value='1'>长沙</option>").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<Student> list=new ArrayList<>();
        list.add(stu1);
        list.add(stu);
        System.out.println(hs.writeValueAsString(list));

json混合模式

     Map<String, Object> 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<Teacher> teas = new HashSet<>();
        teas.add(d1);
        teas.add(d2);
        s1.setTeas(teas);
        Set<Student> 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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.contextPath }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    query($("#prov"),7459)
    $("#prov").change(function(){
        query($("#city"),$(this).val())
    });
    $("#city").change(function(){
        query($("#town"),$(this).val())
    })
    $("#prov").change(function(){
        query($("#town"),$(this).val())
    })
    
});
function query(obj,pid){
    $.ajax({
        url:'RegionAction',
       data:{"parent_id":pid},
       dataType:'json',
       type:'post',
       success:function(data){
          obj.find("option:not(:first)").remove();
           $.each(data,function(idx,elem){
              obj.append("<option value='"+elem.id+"'>"+elem.region_name+"</option>")
           });
       }
       
    });
}

</script>
<style type="text/css">
select{
color: red;
}

</style>
</head>
<body>
<select id="prov">
<option value="">请选择省</option>
</select>
<select id="city">
<option value="">请选择市</option>
</select>
<select id="town">
<option value="">请选择县</option>
</select>
</body>
</html>

效果图