1.Ajax

1.1是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

1.2有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

1.3数据请求 Get

1)创建对象

  1. function ajaxFunction() {
  2.         var xmlHttp;
  3.         try { // Firefox, Opera 8.0+, Safari
  4.             xmlHttp = new XMLHttpRequest();
  5.         } catch (e) {
  6.             try { // Internet Explorer
  7.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  8.             } catch (e) {
  9.                 try {
  10.                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.                 } catch (e) {}
  12.             }
  13.         }
  14.  
  15.         return xmlHttp;
  16.     }

2）发送请求

  1. //执行get请求
  2.     function get() {
  3.         //1. 创建xmlhttprequest 对象
  4.         var request = ajaxFunction();
  5.  
  6.         //2. 发送请求。
  7.         /*
  8.                     参数一： 请求类型  GET or  POST
  9.                     参数二： 请求的路径
  10.                     参数三： 是否异步， true  or false
  11.  
  12.                 */
  13.         request.open("GET", "/day13Ajax/DemoServlet01", true);
  14.         request.send();
  15.     }

如果发送请求的同时，还想获取数据，那么代码如下

  1. //执行get请求
  2.     function get() {
  3.         //1. 创建xmlhttprequest 对象
  4.         var request = ajaxFunction();
  5.  
  6.         //2. 发送请求。
  7.         /*
  8.                     参数一： 请求类型  GET or  POST
  9.                     参数二： 请求的路径
  10.                     参数三： 是否异步， true  or false
  11.  
  12.                 */
  13.         //request.open("GET", "/day13Ajax/DemoServlet01", true);
  14.         request.open("GET", "/day13Ajax/DemoServlet01?name=aa&age=18", true);
  15.  
  16.         //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
  17.         request.onreadystatechange = function(){
  18.  
  19.             //前半段表示 已经能够正常处理。  再判断状态码是否是200
  20.             if(request.readyState == 4 && request.status == 200){
  21.                 //弹出响应的信息
  22.                 alert(request.responseText);
  23.             }
  24.         }
  25.         request.send();

1.4数据请求 Post

  1. package cn.jxufe.web;
  2.  
  3. import java.io.IOException;
  4.  
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. public class DemoServlet01 extends HttpServlet {
  11.  
  12.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  13.         System.out.println("收到了一个请求。。。");
  14.         String name = request.getParameter("name");
  15.         String age = request.getParameter("age");
  16.         System.out.println("收到了一个请求。。。" + name + "=" + age);
  17.  
  18.         response.setContentType("text/html;charset=utf-8");
  19.         response.getWriter().write("收到了请求...");
  20.     }
  21.  
  22.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  23.         System.out.println("现在来了一个post请求，将要去走get的代码了。");
  24.         doGet(request, response);
  25.     }
  26.  
  27. }

如果不带数据

  1. function ajaxFunction() {
  2.         var xmlHttp;
  3.         try { // Firefox, Opera 8.0+, Safari
  4.             xmlHttp = new XMLHttpRequest();
  5.         } catch (e) {
  6.             try { // Internet Explorer
  7.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  8.             } catch (e) {
  9.                 try {
  10.                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.                 } catch (e) {}
  12.             }
  13.         }
  14.  
  15.         return xmlHttp;
  16.     }
  17.     //执行get请求
  18.     function post() {
  19.         //1. 创建xmlhttprequest 对象
  20.         var request = ajaxFunction();
  21.  
  22.         //2. 发送请求。
  23.         /*
  24.                     参数一： 请求类型  GET or  POST
  25.                     参数二： 请求的路径
  26.                     参数三： 是否异步， true  or false
  27.  
  28.                 */
  29.         request.open("POST", "/day13Ajax/DemoServlet01", true);
  30.         request.send();
  31.     }

带数据

  1.     function ajaxFunction() {
  2.         var xmlHttp;
  3.         try { // Firefox, Opera 8.0+, Safari
  4.             xmlHttp = new XMLHttpRequest();
  5.         } catch (e) {
  6.             try { // Internet Explorer
  7.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  8.             } catch (e) {
  9.                 try {
  10.                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.                 } catch (e) {}
  12.             }
  13.         }
  14.  
  15.         return xmlHttp;
  16.     }
  17.     //执行get请求
  18.     function post() {
  19.         //1. 创建xmlhttprequest 对象
  20.         var request = ajaxFunction();
  21.  
  22.         //2. 发送请求。
  23.         /*
  24.                     参数一： 请求类型  GET or  POST
  25.                     参数二： 请求的路径
  26.                     参数三： 是否异步， true  or false
  27.  
  28.                 */
  29.         request.open("POST", "/day13Ajax/DemoServlet01", true);
  30.  
  31.         //如果想带数据，就写下面的两行
  32.  
  33.         //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
  34.         request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  35.  
  36.         //带数据过去  ， 在send方法里面写表单数据。
  37.         request.send("name=obama&age=19");
  38.     }

  1. //执行get请求
  2.     function post() {
  3.         //1. 创建xmlhttprequest 对象
  4.         var request = ajaxFunction();
  5.  
  6.         //2. 发送请求。
  7.         /*
  8.                     参数一： 请求类型  GET or  POST
  9.                     参数二： 请求的路径
  10.                     参数三： 是否异步， true  or false
  11.  
  12.                 */
  13.         request.open("POST", "/day13Ajax/DemoServlet01", true);
  14.  
  15.         //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
  16.         request.onreadystatechange = function() {
  17.  
  18.             //前半段表示 已经能够正常处理。  再判断状态码是否是200
  19.             if (request.readyState == 4 && request.status == 200) {
  20.                 //弹出响应的信息
  21.                 alert(request.responseText);
  22.             }
  23.         }
  24.  
  25.         //如果想带数据，就写下面的两行
  26.  
  27.         //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
  28.         request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  29.  
  30.         //带数据过去  ， 在send方法里面写表单数据。
  31.         request.send("name=obama&age=19");
  32.  
  33.     }

2.JQuery

2.1是什么?

javascript 的代码框架。

2.2有什么用?

简化代码，提高效率。

2.3核心

write less do more , 写得更少，做的更多。

2.4load()方法

  1. package cn.jxufe.web;
  2.  
  3. import java.io.IOException;
  4.  
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. public class DemoServlet02 extends HttpServlet {
  11.  
  12.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  13.         System.out.println("收到了请求。。。");
  14.         response.setContentType("text/html;charset=utf-8");
  15.         response.getWriter().write("给你一份数据");
  16.     }
  17.  
  18.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.         doGet(request, response);
  20.     }
  21.  
  22. }
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP '01demo.jsp' starting page</title>
  8.  
  9. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  10.  
  11. <script type="text/javascript">
  12.     function load() {
  13.  
  14.         //$("#aaa").val("aaa");
  15.         //$("#aaa").html("9999999");
  16.  
  17.         //$("#aaa").load("/day16/DemoServlet02");
  18.  
  19.         //$("#text01") --- document.getElementById("text01");
  20.         $("#aaa").load("/day13Ajax/DemoServlet02", function(responseText, statusTXT, xhr) {
  21.             //alert("jieguo:"+responseText);
  22.             //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
  23.             $("#aaa").val(responseText);
  24.         });
  25.     }
  26. </script>
  27. </head>
  28.  
  29. <body>
  30.     <!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3>  -->
  31.     <h3>
  32.         <input type="button" onclick="load()" value="使用JQuery执行load方法">
  33.     </h3>
  34.  
  35.     <input type="text" id="aaa">
  36.  
  37. </body>
  38. </html>

2.5get()方法

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP '01demo.jsp' starting page</title>
  8.  
  9. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  10.  
  11. <script type="text/javascript">
  12.     //$.get(URL,callback);
  13.     function get() {
  14.         $.get("/day13Ajax/DemoServlet02", function(data, status) {
  15.             //alert("结果是：" + data);
  16.             //$("#div01")  -- document.getElementById("div01");
  17.  
  18.             //$("#div01").val(); //val  用于设置 元素里面有values 的属性值
  19.             //$("#div01").html(data);
  20.             //$("#div01").val(data);
  21.             $("#div01").text("aaa=" + data);
  22.         //$("#div01").html(data); // <font>
  23.         });
  24.     }
  25. </script>
  26. </head>
  27.  
  28. <body>
  29.  
  30.     <input type="button" onclick="get()" value="使用JQuery演示 get方法">
  31.  
  32.     <div id="div01"
  33.         style="width: 100px ; height: 100px ; border: 1px solid blue; ">
  34.  
  35.     </div>
  36.  
  37. </body>
  38. </html>

* val("aa");

> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");

> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

2.6POST()方法

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP '06demo.jsp' starting page</title>
  8.  
  9. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  10.  
  11. <script type="text/javascript">
  12.     function post() {
  13.         $.post("/day13Ajax/DemoServlet02", {
  14.             name : "zhangsan",
  15.             age : "18"
  16.         }, function(data, status) {
  17.             //想要放数据到div里面去。 --- 找到div
  18.             $("#div01").html(data);
  19.         });
  20.     }
  21. </script>
  22. </head>
  23.  
  24. <body>
  25.  
  26.     <input type="button" onclick="post()" value="使用JQuery演示 post方法">
  27.  
  28.     <div id="div01"
  29.         style="width: 100px ; height: 100px ; border: 1px solid blue; ">
  30.  
  31.     </div>
  32.  
  33. </body>
  34. </html>

2.7城市联动小案例

1）准备数据库

2） 准备页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  9. <script type="text/javascript" src="js/city02.js"></script>
  10.  
  11. <!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
  12. </head>
  13. <body>
  14.     省份:
  15.     <select name="province" id="province">
  16.         <option value="">-请选择 -
  17.         <option value="1" >广东
  18.         <option value="2" >湖南
  19.         <option value="3" >湖北
  20.         <option value="4" >四川
  21.     </select>
  22. 城市:
  23.     <select name="city" id="city">
  24.         <option value="" >-请选择 -
  25.     </select>
  26. </body>
  27. </html>

3)创建javabean

  1. package cn.jxufe.entity;
  2.  
  3. public class CityBean {
  4.     private int id ;
  5.     private int pid;
  6.     String cname;
  7.     public int getId() {
  8.         return id;
  9.     }
  10.     public void setId(int id) {
  11.         this.id = id;
  12.     }
  13.     public int getPid() {
  14.         return pid;
  15.     }
  16.     public void setPid(int pid) {
  17.         this.pid = pid;
  18.     }
  19.     public String getCname() {
  20.         return cname;
  21.     }
  22.     public void setCname(String cname) {
  23.         this.cname = cname;
  24.     }
  25.  
  26. }

4）创建dom接口及实现类

  1. package cn.jxufe.dao;
  2.  
  3. import java.sql.SQLException;
  4. import java.util.List;
  5.  
  6. import cn.jxufe.entity.CityBean;
  7.  
  8. public interface CityDao {
  9.     List<CityBean> findCity(int pid) throws SQLException ;
  10. }
  1. package cn.jxufe.dao.impl;
  2.  
  3. import java.sql.SQLException;
  4. import java.util.List;
  5.  
  6. import org.apache.commons.dbutils.QueryRunner;
  7. import org.apache.commons.dbutils.handlers.BeanListHandler;
  8.  
  9. import cn.jxufe.dao.CityDao;
  10. import cn.jxufe.entity.CityBean;
  11. import cn.jxufe.util.JDBCUtil02;
  12.  
  13. public class CityDaoImpl implements CityDao{
  14.     @Override
  15.     public List<CityBean> findCity(int pid) throws SQLException {
  16.         // TODO Auto-generated method stub
  17.         QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
  18.         String sql = "select * from city where pid = ?";
  19.         return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid);
  20.  
  21.     }
  22. }

5）创建servlet

#1 以xml的形式返回数据

  1. package cn.jxufe.web;
  2.  
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5. import java.util.List;
  6.  
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import com.thoughtworks.xstream.XStream;
  13.  
  14. import cn.jxufe.dao.CityDao;
  15. import cn.jxufe.dao.impl.CityDaoImpl;
  16. import cn.jxufe.entity.CityBean;
  17.  
  18. public class CityServlet extends HttpServlet {
  19.  
  20.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21.         try {
  22.             // 1. 获取参数
  23.             int pid = Integer.parseInt(request.getParameter("pid"));
  24.  
  25.             // 2 找出所有的城市
  26.             CityDao dao = new CityDaoImpl();
  27.             List<CityBean> list = dao.findCity(pid);
  28.  
  29.             // 3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
  30.             XStream xStream = new XStream();
  31.  
  32.             // 想把id做成属性
  33.             // xStream.useAttributeFor(CityBean.class, "id");
  34.             // 设置别名
  35.             xStream.alias("city", CityBean.class);
  36.             // 转化一个对象成xml字符串
  37.             String xml = xStream.toXML(list);
  38.  
  39. //            // 返回数据
  40.             response.setContentType("text/xml;charset=utf-8");
  41.             response.getWriter().write(xml);
  42.         } catch (SQLException e) {
  43.             // TODO Auto-generated catch block
  44.             e.printStackTrace();
  45.         }
  46.     }
  47.  
  48.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  49.         doGet(request, response);
  50.     }
  51.  
  52. }

#02以json的形式返回数据

  1. package cn.jxufe.web;
  2.  
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5. import java.util.List;
  6.  
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import com.thoughtworks.xstream.XStream;
  13.  
  14. import cn.jxufe.dao.CityDao;
  15. import cn.jxufe.dao.impl.CityDaoImpl;
  16. import cn.jxufe.entity.CityBean;
  17. import net.sf.json.JSONArray;
  18.  
  19. public class CityServlet02 extends HttpServlet {
  20.  
  21.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  22.         try {
  23.             // 1. 获取参数
  24.             int pid = Integer.parseInt(request.getParameter("pid"));
  25.  
  26.             // 2 找出所有的城市
  27.             CityDao dao = new CityDaoImpl();
  28.             List<CityBean> list = dao.findCity(pid);
  29.  
  30.             // 3. 把list ---> json数据
  31.             // JSONArray ---> 变成数组 ， 集合 []
  32.             // JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}
  33.  
  34.             JSONArray jsonArray = JSONArray.fromObject(list);
  35.             String json = jsonArray.toString();
  36.             response.setContentType("text/html;charset=utf-8");
  37.             response.getWriter().write(json);
  38.  
  39.         } catch (SQLException e) {
  40.             // TODO Auto-generated catch block
  41.             e.printStackTrace();
  42.         }
  43.     }
  44.  
  45.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  46.         doGet(request, response);
  47.     }
  48.  
  49. }

6）JSP

#1

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  9. <script type="text/javascript" src="js/city.js"></script>
  10.  
  11. <!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
  12. </head>
  13. <body>
  14.     省份:
  15.     <select name="province" id="province">
  16.         <option value="">-请选择 -
  17.         <option value="1" >广东
  18.         <option value="2" >湖南
  19.         <option value="3" >湖北
  20.         <option value="4" >四川
  21.     </select>
  22. 城市:
  23.     <select name="city" id="city">
  24.         <option value="" >-请选择 -
  25.     </select>
  26. </body>
  27. </html>

#2

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  9. <script type="text/javascript" src="js/city02.js"></script>
  10.  
  11. </head>
  12. <body>
  13.     省份:
  14.     <select name="province" id="province">
  15.         <option value="">-请选择 -
  16.         <option value="1" >广东
  17.         <option value="2" >湖南
  18.         <option value="3" >湖北
  19.         <option value="4" >四川
  20.     </select>
  21. 城市:
  22.     <select name="city" id="city">
  23.         <option value="" >-请选择 -
  24.     </select>
  25. </body>
  26. </html>

7）js

#1

  1. $(function() {
  2.     //1。找到省份的元素
  3.     $("#province").change(function() {
  4.         //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
  5.         //$("#province").varl();
  6.         var pid = $(this).val();
  7.  
  8.         /*[
  9.             {
  10.                 "cname": "深圳",
  11.                 "id": 1,
  12.                 "pid": 1
  13.             },
  14.             {
  15.                 "cname": "东莞",
  16.                 "id": 2,
  17.                 "pid": 1
  18.             }
  19.             ...
  20.         ]*/
  21.         $.post( "CityServlet02",{pid:pid} ,function(data,status){
  22.  
  23.             //先清空
  24.             $("#city").html("<option value='' >-请选择-");
  25.             //再遍历，追加
  26.             $(data).each(function(index , c) {
  27.                 $("#city").append("<option value='"+c.id+"' >"+c.cname)
  28.             });
  29.         },"json" );
  30.  
  31.     });
  32. });

#2

  1. $(function() {
  2.     //1。找到省份的元素
  3.     $("#province").change(function() {
  4.         //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
  5.         //$("#province").varl();
  6.         var pid = $(this).val();
  7.  
  8.         /*[
  9.             {
  10.                 "cname": "深圳",
  11.                 "id": 1,
  12.                 "pid": 1
  13.             },
  14.             {
  15.                 "cname": "东莞",
  16.                 "id": 2,
  17.                 "pid": 1
  18.             }
  19.             ...
  20.         ]*/
  21.         $.post( "CityServlet02",{pid:pid} ,function(data,status){
  22.  
  23.             //先清空
  24.             $("#city").html("<option value='' >-请选择-");
  25.             //再遍历，追加
  26.             $(data).each(function(index , c) {
  27.                 $("#city").append("<option value='"+c.id+"' >"+c.cname)
  28.             });
  29.         },"json" );
  30.  
  31.     });
  32. });

13Ajax和JQuery的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

随机推荐

  1. javascript之alter的坑

    1.注意在使用alert返回两数之和时,会出现0.1+0.2并不等于0.3的bug 解决方法: var f=0.1; var g=0.2; alert((parseFloat(f)*100+parse ...

  2. APK文件结构和安装过程

    APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...

  3. IO重定向与管道

    一.三种IO设备 程序:数据+指令 或 数据结构+算法 程序必须能够读入输入然后经过加工来产生结果,其接受的输入可以是变量.数组.列表.文件等等,生产出来的结果可以使变量.数组.列表.文件等等.即: ...

  4. div中图片居中

    直接上图

  5. TypeScript快速笔记（一）

    刚学习TypeScript,但因为马上要用,主要是寻求先快速上手,而后再求精. 推荐学习网站: 1)https://www.runoob.com/typescript/ts-tutorial.html ...

  6. The MEAN stack is a modern replacement for the LAMP (Linux, Apache, MySQL, PHP/Python) stack

    w https://www.mongodb.com/blog/post/building-your-first-application-mongodb-creating-rest-api-using- ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第1节 Object类_1_Object类的toString方法

    任何一个类都可以使用Object类中的方法 ## 1.1 概述 `java.lang.Object`类是Java语言中的根类,即所有类的父类.它中描述的所有方法子类都可以使用.在对象实例化的时候,最终 ...

  8. 测开之路八十七：HTML之a标签的用法

    初始化的HTML结构为,只需要在body里面加网页的标签和要显示的内容即可 <!DOCTYPE html><html lang="en"><head& ...

  9. 编译的时候出现"/usr/bin/ld: cannot find -lz

    编译的时候出现"/usr/bin/ld: cannot find -lz"错误,需要安装zlib-dev这个包,在线安装命令为:apt-get install zlib1g-dev ...

  10. 在VS Code中使用Jupyter Notebook

    一.安装配置 1.在扩展商店中安装官方的Python扩展包 2.系统已经安装了Jupyter Notebook 由于系统上的Python环境是用Anaconda安装的,已经有Jupyter Noteb ...