jquery入门

@D-zy

于 2019-07-26 11:42:38 发布

阅读量298

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44224029/article/details/97371365

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

jquery

1、jquery介绍

什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

2、jquery功能

1、jquery里的 window 、document、function调用顺序

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js">
<script type="text/javascript">
 window.onload = function(){
  alert("hello window");
 }
 $(document).ready(function(){
  alert("hello document");
 }) 
 $(function(){
  alert("hello function");
 })
 </script>

第一顺序：
在这里插入图片描述
第二顺序
】、7
第三顺序

结论： $(f n) 、$ (document).ready(fn)是等价的，哪个代码在前面哪个先执行
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完，css、js等静态资源加载完毕执行

2、调用点击事件

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
  //利用a标签获取jquery实例
   $("a").click(function(){
   alert("a");
  }); 
  //利用id=a3获取jquery实例
   $("#a3").click(function(){
   alert("a3");
  }); 
  
   $(".c1").click(function(){
   alert("c1");
  }); 
   $("p a").click(function(){
   alert("p a");
  });   
   $("a,span").click(function(){
   alert("a,span");
  }); 
  //讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
  //如果第二个参数没有填写，那么默认是document
  $("a","div").click(function(){
   alert("a,div");
  });
 })
</script>
 <p>
  <a id="a1" class="c1" href="#">点我1</a>
 </p>
 <p>
  <a id="a2" class="c2" href="#">点我2</a>
 </p>
 <p>
  <a id="a3" class="c3" href="#">点我3</a>
 </p>
 <div>
  <a id="a4" class="c1" href="#">点我4</a>
 </div>
 <div>
  <p>
   <a id="a5" class="c1" href="#">点我5</a>
  </p>
 </div>
 
 <span>点我</span>

点击事件两种class和id调用。以及标签名调用。

3、js对象与jquery对象的相互转换

<script type="text/javascript">
 $(function() {
  var $h1 = $("#h1");
  alert($h1.val());
  //jquery对象转js对象
  var h1Node = $h1.get(0);
  alert(h1Node.value);
  
  var h2Node = document.getElementById("h2");
  alert(h2Node.value);
  //jquery对象转js对象
  var $h2Node = $(h2Node);
  alert($h2Node.val());
 })
</script>

插件机制简介：在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。往jquery类库里面去扩展方法，这类方法就是jquery插件

4、json的三种格式：

//json对象字符串体现形式
  var jsonObj1 = {
   sid:'s001',
   sname:'DZY'
  };
  //json数组字符串体现形式
  var jsonArray1 = [1,2,3,4];
  console.log(jsonArray1);
  //json混合模式字符串体现形式
  var jsons = {id:3,hobby:['a','b','c']};
  console.log(jsons);

5、$.extend：是用来扩充jquery类属性或者方法所用

var jsonObj1 = {
   sid:'s001',
   sname:'DZY'
  };
  var jsonObj2 = {};
  //用后面的对象扩充第一个对象
  $.extend(jsonObj2,jsonObj1);

var jsonObj1 = {
   sid:'s001',
   sname:'DZY'
  };
  var jsonObj3 = {
    sid:'s002',
    sname:'qqq',
    hobby:['a','b','c']
   };
   var jsonObj2 = {};
   $.extend(jsonObj2,jsonObj1,jsonObj3);
   console.log(jsonObj2);

$.fn.extend：是用来扩充jquery实例的属性值或者方法所用

$.extend({
   hello:function(){
    alert('我来了');
   }
  });
  $.hello();
  $.fn.extend({
   sayHello:function(){
    alert('我来了2');
   }
  });
  
  $("#yellow").sayHello();
  alert("yellow");//这样写才会出来'我来了2和yellow

jQuery插件开发实例：
为了满足客户需求，如下图有的客户想要头部为红色，主体为绿色，有些客户想要头部为绿色，主体为蓝色，我们可以copy到其他界面去把颜色改了，但是为了方便开发人员后期维护，我们就开发一个插件，只要调用方法就可以改变它的颜色。

<style type="text/css">
.over{
 background:  #ff66ff;
}
.out{
 background: #ffff66;
}
.head{
 background: #ff3333;
}
</style>
<script type="text/javascript">
 $(function(){
  $("table").each(function(){
   //给默认值
   $("tr:eq(0)",this).addClass('head');
   $("tr:gt(0)",this).addClass('out');
    //添加动态效果
   $("tr:gt(0)",this).hover(function(){
    $(this).removeClass().addClass('over');
   },function(){
    $(this).removeClass().addClass('out');
   });
  });
   })
</script>
</head>
<body>
 <table id="t1" 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>11万</td>
  </tr>
  <tr>
   <td>杀神</td>
   <td>逆苍天</td>
   <td>22万</td>
  </tr>
  <tr>
   <td>龙王传说</td>
   <td>唐家三少</td>
   <td>18万</td>
  </tr>
  <tr>
   <td>斗破苍穹</td>
   <td>天蚕拖豆</td>
   <td>1万</td>
  </tr>
 </table>
 <table id="t2" 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>11万</td>
  </tr>
  <tr>
   <td>杀神</td>
   <td>逆苍天</td>
   <td>22万</td>
  </tr>
  <tr>
   <td>龙王传说</td>
   <td>唐家三少</td>
   <td>18万</td>
  </tr>
  <tr>
   <td>斗破苍穹</td>
   <td>天蚕拖豆</td>
   <td>1万</td>
  </tr>
 </table>

首先建一个/jquery/table/css的css样式：

@charset "UTF-8";
.fen {
 background: #ff66ff;
}
.yellow {
 background: #ffff66;
}
.red {
 background: #ff3333;
}
.blue {
 background: #9999ff;
}
.green {
 background: #bbff99;
}
.hui {
 background: #d6d6c2;
}
<link href="${pageContext.request.contextPath }/js/jquery.table.css" type="text/css" rel="stylesheet"/>

接着我们要建一个/jquery/table/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);
    });
   });
  }
 });
})

接着修改jsp页面：

修改前script里面要写这些
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.over{
 background:  #ff66ff;
}
.out{
 background: #ffff66;
}
.head{
 background: #ff3333;
}
</style>
<script type="text/javascript">
 $(function(){
  $("table").each(function(){
   //给默认值
   $("tr:eq(0)",this).addClass('head');
   $("tr:gt(0)",this).addClass('out');
   
   //添加动态效果
   $("tr:gt(0)",this).hover(function(){
    $(this).removeClass().addClass('over');
   },function(){
    $(this).removeClass().addClass('out');
   });
  });
})
</script>
</head>
<body>
 <table id="t
 修改后
 <script type="text/javascript">
 $(function(){
  $("table").bgColor({
    head : 'blue',
    out : 'green',
    over : 'hui'
  });
 })
</script>

只要把css样式和js文件导入进去就可以动态修改样式了

<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table1.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

因为每次修改颜色，我们都要导入css样式和js文件，所以我们把他进行封装到head.jsp里面：

<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table1.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

在jsp页面中导入文件head.jsp进行了：<%@ include file="/jsp/common/head.jsp" %>

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));

jackson将java–>json

//json数组
  Student stu1 = new Student("s001", "DZY");
  ObjectMapper om = new ObjectMapper();
  System.out.println(om.writeValueAsString(stu1));
  //json数组
  Student stu2 = new Student("s002", "lisi");
  List<Student> list = new ArrayList<>();
  list.add(stu1);
  list.add(stu2);
  System.out.println(om.writeValueAsString(list));
  //json混合格式
  Map<String, Object> map = new HashMap<>();
  map.put("total", 2);
  map.put("stus", list);
  System.out.println(om.writeValueAsString(map));

javaBean与map集合转换chengjson字符串格式是一样的。
json死循环问题

public class Demp3 {
 public static void main(String[] args) throws Exception {
  Student stu1 = new Student("s001", "aaa");
  Student stu2 = new Student("s002", "bbb");
  Teacher teas1 = new Teacher("t001","ccc",null);
  Teacher teas2 = new Teacher("t002","ddd",null);
  Set<Teacher> teas = new HashSet<>();
  teas.add(teas1);
  teas.add(teas2);
  stu1.setTeas(teas);
  Set<Student> stu = new HashSet<>();
  stu.add(stu1);
  stu.add(stu2);
  teas1.setStu(stu);
  ObjectMapper om = new ObjectMapper();
  System.out.println(om.writeValueAsString(stu1));
 }
}

解决这个问题我们可以：1由双向绑定改成单向绑定，也就是说将彼此之间的关系交予一方维护。2@JsonIgnore:将彼此循环调用的属性忽略，不参与对象转成json格式

3、 AJAX的应用

jQuery的ajax请求
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过JavaScript DOM更新一部分节点。期间数据传输可采用xml，json等格式。其实不刷新整个页面便可与服务器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。
JsonBaseDao类

package com.DZY.util;

import java.lang.reflect.Field;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.ResultSetMetaData;

public class JsonBaseDao extends BaseDao<Map<String, Object>> {
 public final List<Map<String, Object>> executeQuery(String sql,PageBean pageBean ) {
  return super.executeQuery(sql, pageBean, new Callback<Map<String, Object>>(){
   public List<Map<String, Object>> foreach(ResultSet rs) {  
      /**
     * 1、创建一个实体类
     * 2、给创建的实例属性赋值
     * 3、将添加完内容的实体添加到list集合中
     * 
     */
    List<Map<String, Object>> list = new ArrayList<>();
//    获取原数据
    java.sql.ResultSetMetaData md = rs.getMetaData();
    int count = md.getColumnCount();
    Map<String, Object> map = null;
    while(rs.next()) {
     map = new HashMap<>();
     for (int i = 1; i <= count; i++) {
      map.put(md.getColumnName(i), rs.getObject(i));
     }
     list.add(map);
    }
    return list;
   }
  });
 }
}

RegionDao

package com.DZY.dao;

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

import com.DZY.util.JsonBaseDao;
import com.DZY.util.JsonUtil;
import com.DZY.util.PageBean;
import com.DZY.util.StringUtils;
public class RegionDao extends JsonBaseDao {
 public List<Map<String, Object>> list(Map<String, String[]> paMap, PageBean pageBean){
  String id = JsonUtil.getParamVal(paMap, "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) {
//  Map<String, String> paMap = new HashMap<>();
  PageBean pageBean = new PageBean();
  Map<String, String[]> paMap = new HashMap<>();
  paMap.put("ID", new String[] {"9504"});
  RegionDao regionDao = new RegionDao(); 
  List<Map<String, Object>> list = regionDao.list(paMap, pageBean);
  System.out.println(list);
 }
}

JsonUtil（处理Json数据）

package com.DZY.util;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
 * 专门用来处理Jon数据的工具包
 * @author DZY
 *
 */
public class JsonUtil {
 /**
  * 从paMap拿到咱们所需要用到的查询维度，用于sql语句拼接
  * @param paMap    获取从jsp页面传递到后台的 参数集合（req.getPaMap）
  * @param key
  * @return 
  */
 public static String getParamVal(Map<String, String[]> paMap,String key) {
  if(paMap != null && paMap.size() > 0) {
   String[] vals = paMap.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.DZY.web;

import java.io.IOException;

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.DZY.dao.RegionDao;
import com.DZY.util.ResponseUtil;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.fabric.Response;
public class RegionServlet extends HttpServlet {
 private static final long serialVersionUID = 3804017731990576545L;
 private RegionDao regionDao = new RegionDao();
 @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 {
   List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
   ObjectMapper om = new ObjectMapper();
   try {
    ResponseUtil.write(resp, om.writeValueAsString(list));
   } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
 }
}

ResponseUtil

package com.DZY.util;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;
public class ResponseUtil {
 public static void write(HttpServletResponse response,Object o) throws Exception {
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  out.println(o.toString());
  out.print(o.toString());
  out.flush();
  out.close();
 }
}

jsp页面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.demo10.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
 var ctx = $("#ctx").val();
 $.ajax({
  url:"/regionServlet",
  success:function(data){
   for(index in date){
    //console.log(data[index]);
    $("#province").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</option>")
   }
  },
  dataType:"json"
 });
 $("#province").change(function(){
  $("option:gt(0)","#city").remove();
  $.ajax({
  url:"/regionServlet?ID="+this.value,
  success:function(data){
   for(index in date){
    //console.log(data[index]);
    $("#city").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</option>")
   }
  },
  dataType:"json"
   });
  });
 $("#city").change(function(){
  $("option:gt(0)","#county").remove();//清空追加的值
  $.ajax({
   url:"/reg.do?ID="+this.value,//直接的id值
   success:function(data){
    for(index in data){
     $("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
    }
   },
   dataType:"json"
  });
 })

})
</script>
</head>
<body>
<div>
    <input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
 <h1>$.ajax实现省市联动</h1>
 <div>
  收货地址&nbsp;&nbsp;
  <select id="province">
   <option selected="selected">---请选择省份---</option>
  </select>&nbsp;&nbsp;
  <select id="city">
   <option selected="selected">---请选择城市---</option>
  </select>&nbsp;&nbsp;
  <select id=" county">
   <option selected="selected">---请选择县区---</option>
  </select>
 </div>
</div>

在这里插入图片描述