JQuery

2020-09-28

1.dom对象和jquery对象
1).dom对象，使用js的语法创建的对象角坐dom对象，也就是js对象

1	var obj = document.getElementById("tex1");//obj是dom对象，也叫做js对象

2).jquery对象:使用jquery语法表示对象叫做jquery对象，注意:jquery表示的对象都是数组

1	var jobj = $("#txt1"),jobj就是使用jquery语法表示的对象，也就是jquery对象。它是一个数组。现在数组中就一个值

3).dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery，语法:$(dom对象)
jquery对象也可以转为dom对象，语法:从数组中获取第一个对象就是dom对象，jquer数组按下标取出来的是dom对象
4).为什么要进行相互转换:
目的是要使用对象的方法或属性，当你想用dom对象的属性，就需要转换成dom对象，jquery亦然

//将dom对象转换成jquery对象
var obj = document.getElementById("btn");
//使用$符号将dom转换成jquery
var jobj = $(obj);


//将jquery转换成dom对象
//使用jquery的语法，获取页面的dom对象
var obj = $("#domID")[0];

2.选择器:就是一个字符串，用来定位dom对象的，定位了dom对象，就可以通过jquery的函数操作dom对象
1).id选择器,语法：$(“#dom对象的id值”);通过dom对象的id值定位dom对象
2).class选择器，语法:$(“.class样式名”)
3).标签选择器,语法:$(“标签名称”)
4).组合选择器，三种选择器可以组合，选定不同类型的选择器
5).表单选择器:表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式/该方法无论是否存在表单<form>，均科做出响应的选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素地类型来定义的

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

语法:$(“:type属性值”),eg:$(:text)选取所有的文本框
3.过滤器
1).简介:在定位了dom对象后，根据一些条件筛选dom对象。过滤器是一个字符串，用来筛选dom对象的，过滤器不能单独使用，必须和选择器一起使用
2).基本选择器

$("选择器:first")//选择第一个first，保留数组中第一个DOM对象
$("选择器:last")//选择最后一个，保留数组中最后一个DOM对象
$("选择器:eq(数组索引)")//根据下标选择数组的指定对象
$("选择器:lt(数组索引)")//选择数组中小于指定索引的所有DOM对象
$("选择器:gt(数组索引)")//选择数组中大于指定索引的所有DOM对象

表单属性过滤器:根据表单中dom对象的状态情况，定位dom对象的。
启用状态:enabled
不可用状态:disabled，如果disabled相当于只读不能修改的文本框。
选择状态:checked,例如radio，checkbox
4.jquery中给dom对象绑定事件
1)$(选择器).事件名称(事件的处理函数)
5.函数
·第一组
1.val:操作数组中DOM对象的属性值。
$(选择器).val():无参数调用形式，读取数组中第一个DOM对象的value属性值
$(选择器).val(值):有参数形式调用，对数组中所有DOM对象的value属性值进行统一赋值
2.text:操作数组中所有DOM对象的【文字显示内容属性】
$(选择器).text():无参数调用形式，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数形式调用，对数组中所有DOM对象的文字显示内容进行统一赋值
3.attr:对val，text之外的其他属性操作
$(选择器).attr(“属性名”):获取DOM数组中第一个对象属性名对应的属性值
$(选择器).attr(“属性名”,”值”):对数组中所有DOM对象的属性设为新值
·第二组
1.$(选择器).remove():将数组中所有的DOM对象及其子对象一并删除
2.$(选择器).empty():将数组中所有的DOM对象的子对象删除
3.$(选择器).append():为数组中所有DOM对象添加子对象
4.$(选择器).html():无参调用方式，获取DOM数组第一个元素的内容
$(选择器).html(值):有参调用方式，获取DOM数组中所有元素的内容
5.each
each是对数组，json和dom数组等的遍历。对每个元素调用一次函数。
语法1:$.each(要遍历的对象，function(index,element){处理程序}),其中index表示循环变量，element表示数组成员
语法2：Jquery对象.each(cunction(index,element){处理程序})
6.on()绑定事件
on()方法在被选元素上添加事件处理程序，改方法给API带来很多便利
语法:$(选择器).on(event,function),其中event:一个或多个，多个之间用空格隔开，function():可选，规定当事件发生时运行的函数

$(document).ready(function(){
				$("#btn01").click(function(){
					$("#mydiv").append("<button value='newBtn' id='newBtn'>新增的按钮</button>");
					$("#newBtn").on("click",function(){
						alert("新增的btn被点击了");
					})
				})
			})

7.使用jQuery的函数，实现ajax请求的处理
没有Jquery之前，使用XMLHttpRequest异步对象做ajax，有4个步骤，jQuery简化了使用ajax的处理，使用三个函数来实现ajax的处理
1).$.ajax():jQuery中实现ajax的核心函数
2).$.post():使用post方式做ajax请求
3).$.get():使用get方式发送ajax请求
介绍:$.ajax()函数的调用，其参数是一个json的结构。
例如:$.ajax({名称：值，名称1：值1，·····})
json结构的参数说明:
· async:是一个Boolean类型的值，默认是true，表示异步请求的，因为有默认值，所以一般省略
· data:可以是字符串，数组，json，表示请求的参数和参数值,以json格式输入

1	data:{name:"lisi",age:20}

· dataType:表示期望从服务器端返回的数据格式，可选的有:xml,html,text,json，当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的时json或者xml的数据，那么服务器就可以返回你需要的数据
· error:一个function，表示当请求发生错误时，执行的函数。
· sucess:一个function，请求成功了，从服务端返回了数据，会执行success指定函数，类似于之前使用XMLHttpRequest时，当readyState==4&&status==200的时候执行的函数
· url:请求的地址
· type:请求参数，get或者post,默认是get方式

$.ajax({
    async:true,
    contentType:"application/json",
    data:{name:"lisi",age:18},
    dataType:"json"，
    error:function(){
        请求出现错误时执行的函数
    },
    success:function(data){
        //data就是responseText，时jQuery处理后的数据
    },
    url:"bmiAjax",
    type:"get"
})//例子
//总结:主要使用的是url，data，datatype，success四个参数

8.$.get()函数
$.get()方法使用jquery利用get方式向服务器加载数据

$.get(url,data,function(data,status,xhr),dataType)
//参数说明
//url:必需，规定请求的url
//data:可选,利用json格式将请求参数发送到服务器
//function(data,status,xhr)，内部的三个参数时自定义形参名，可选，data表示来自服务端响应的结果，status包含请求状态，xhr包含异步对象
//dataType:可选，规定预期的服务器响应的数据类型，可能为xml,html,text,json

8.$.post()函数
语法和参数和get相同，参考get
9.利用jquery实现级联查询
首先实现的效果，例如淘宝的位置定位，当选取河南省时，会跳出河南省的城市的选项

点击load数据按钮首先填充省份列表，选取省份列表后，展开城市列表

1.准备数据库文件

创建简单的操作页面

<body>
<center>
   <table>
       <tr>
           <td>省份列表</td>
           <td>
               <select id="province">
                   <option value="0">请选择···</option>

               </select>
           </td>
           <td><input type="button" value="load数据" id="btnLoad"></td>
       </tr>
       <tr>
           <td>城市列表:</td>
           <td>
               <select id="city">
                   <option value="0">请选择···</option>

               </select>
           </td>
       </tr>
   </table>



</center>
  </body>

2.搭建idea环境
·创建模块->web application
·在web-INF目录下创建lib文件夹，将使用的数据库连接jar包和json相关jar包粘贴进入
·项目结构->模块->依赖->将tomcat和lib都导入到项目中
3.创建实体类
根据省份的信息创建province实体类，根据city信息创建city实体类，在src->entity文件目录下
4.创建QueryDao类进行数据库连接，实现查询城市和查询省份的两个方法
这个类封装了利用参数访问数据库，返回的sql语句结果数据被封装在province和city类中，以集合形式返回

public class QueryDao {
    private Connection con = null;
    private PreparedStatement ps = null;
    private ResultSet rs = null;
    //查询所有的省份信息
    public List<Province> queryProvinceList(){
        Integer id;
        String name;
        String jiancheng;
        String shenghui;
        List<Province> ProvinceList = new ArrayList<>();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?&useSSL=false&serverTimezone=UTC","root","123456");
            String sql = "select id,name,jiancheng,shenghui from province order by id";
            ps = con.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()){
                id = rs.getInt("id");
                name = rs.getString("name");
                jiancheng = rs.getString("jiancheng");
                shenghui = rs.getString("shenghui");
                Province province = new Province(id,name,jiancheng,shenghui);
                ProvinceList.add(province);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(con!=null){
                try {
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        return ProvinceList;
    }
    public List<City> queryCityById(Integer provinceId){
        List<City> cityList = new ArrayList<>();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?&useSSL=false&serverTimezone=UTC","root","123456");
            String sql = "select id,name from city where provinceid = ?";
            ps = con.prepareStatement(sql);
            ps.setInt(1,provinceId);
            rs = ps.executeQuery();
            while (rs.next()){
                City city = new City();
                city.setId(rs.getInt("id"));
                city.setName(rs.getString("name"));
                cityList.add(city);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(con!=null){
                try {
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        return cityList;
    }
}

5.创建provinced的servlet实现类

public class QueryProvinceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "{}";//json的初始值
        //调取DAO获取所有的省份信息
        QueryDao dao = new QueryDao();
        List<Province> provinces = dao.queryProvinceList();
        //将List转为json格式的数据
        if(provinces!=null){
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(provinces);
            System.out.println(json);
        }
        //响应ajax的请求
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(json);
        out.flush();
        out.close();
    }
}

6.创建城市的servlet实现类

public class QueryCityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("进入了post");
        QueryDao dao = new QueryDao();
        String json = "{}";
        String provinceId = request.getParameter("provinceId");
        System.out.println(provinceId);
        if(provinceId!=null&&!"".equals(provinceId.trim())){
            List<City> cityList = dao.queryCityById(Integer.valueOf(provinceId));
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(cityList);
            System.out.println(json);
        }
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(json);
        out.flush();
        out.close();
    }

7.实现js的脚本语言
首先要记得导入jquery

1
2
3

 <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
```  
然后我们为onLoad按钮绑定响应事件，其中所有的响应事件应放入$(function())中，相当于weindows.onLoad();

$(“#btnLoad”).click(function () {//利用选择器选中按钮并绑定事件
//做ajax，利用jquery实现ajax
$.ajax({
url:”queryProvince”,
dataType:”json”,
success:function (resp) {
//防止我们每点一次onload就添加一次数据，所以我们在增加之前删除旧的数据
$(“#province”).empty();
//我们将list转成json对象时，以数组的形式存放
$.each(resp,function (i,n) {//n表示json对象
$(“#province”).append(““);
})//调用each函数和append函数
}
})
})

1 2	我们可以看到我们将相应的option的value值绑定为了province的id值，方便我们下面得到省份的id 8.接下来给省份列表绑定change()事件

// 给省份的select绑定一个change事件，当select内容发生变化时，触发事件
$(“#province”).change(function () {
//选取选中的option
var obj = $(“#province>option:selected”);
var provinceId = obj.val();
alert(provinceId+”=====”+obj.text());
//做一个ajax请求,下面使用另一种请求方式
$.post(“queryCity”,{provinceId:provinceId},function (response) {
alert(response);
$(“#city”).empty();
$.each(response,function (i,n) {
$(“#city”).append(““);
})
},”json”);
})