jQuery 学习笔记-雷云龙

jQuery 学习笔记

一、jQuery

jQuery是一款优秀的js 库,jQuery主要是用来查询,jQuery = JavaScript + Query

版本区别:

1 x : 支持IE678

2 x : 不支持IE678,只维护,不添加新功能

3 x : 不支持IE678,很多老的jQuery插件不支持这个版本,

二、原生js与jQuery对比

1、语法

// 原生js
window.onload = function () {    };
//jquery
$(document).ready(function () {
            
        });

2、加载模式

  1. 原生js ,加载完DOM,加载完图片,才调用回调函数。

​ jQuery,加载完毕DOM就调用回调函数,不等到加载完毕图片

  1. 原生js如果编写了多个入口函数,后面编写的会覆盖掉前面编写的。

    jQuery,则不会

3、入口函数的其他方法

//第一种写法
$(document).ready(function () {
            alert("  ")
        });

//第二种写法
$(function(){
      alert("  ")
});

三、jQuery的核心函数

          // 1.$()就是jQuery的核心函数
        $(function () {
            alert(" hello");

            //2.1  接收一个字符串选择器
            var div1 = $(".div1");
            var div2 = $("#div2");

            //2.2  接收一个字符串代码片段
            var p = $("

我是段落

"
);//会根据代码片段创建DOM元素 //3 接收一个DOM元素 var span = document.getElementsByTagName("span")[0]; $(span); //会被包装成为一个jQuery对象返回

四、jQuery的核心方法

1. each()方法

遍历谁返回谁,

/*使用jQuery的静态方法遍历数组 arr*/
/*arr:数组名
  function:每遍历一个元素回调的函数
  index:当前的索引
  value:对应的元素值
*/
        $.each(arr,function (index, value) {

        });

2.map()方法

默认返回空数组

/*使用jQuery的静态方法遍历数组 arr*/
/*arr:数组名
  function:每遍历一个元素回调的函数
  index:当前的索引
  value:对应的元素值
*/
        $.map(arr,function (value, index) {

        });

3. trim()去空格方法

var str =1nj
var res = $. trim(str);
console. log( --- +str+ --- ) ;

4、事件绑定的两种方法

 /*事件绑定
               两种方式:
               *(1) eventName(fn)

                 (2) on(eventName.fn)
               **/

        $(function () {

          $("button").click(function () {
                alert("btn");
            });

        });

        $(function () {

            $("button").on("click",function(){
                alert("btn2")
            })
        });


5、鼠标的移入移出事件

   /*移入事件*/
        $(function () {
            $("#id").mouseover(function () {
                "鼠标移入";
            });
        });

        /*移出事件*/

        $(function () {
            $("#id").mouseout(function () {
                "鼠标移出";
            });
        });

        $(function () {
            $("#id").hover(function () {
                "移入"
            },function () {
                "移出"
            });
        });

6、appendTo

 /*appendTo*/
        $(function () {
            $("p").appendTo(".item");
            /*source,需要加的某元素p,target,目标元素.item
            * 将p 添加到.item所在元素的最后
            *
            * */
            function appendTo( source,target) {
                target.appendChild(source);
            }
        });

后续方法。。。

五、ajax

1、ajax概述

1.1 Ajax = Asynchronous JavaScript and XML

​ 异步请求界面, 而不刷新整个界面与服务器进行通讯的,都叫alax。

1.2 ajax工具包

  • ajax与服务器端语言无关
  • XML = eXensible Markup Language,可扩展标记语言。是一种描述数据的格式。ajax需要某种格式再服务器与客户端之间传递信息,XML 可以作为选择。
  • XHTML 使用扩超媒体标记语言,和CSS( 级联样式单)标准化呈现。
  • DOM文档对象模型,实现动态显示和交互
  • 使用XMLHTTP组件XMLHttpRequest对象进行一步读取数据
  • 使用JavaScript绑定和处理所有数据

2 ajax数据格式

2.1 HTML

HTML 是由一些普通文本组成,如果服务器通过XMLHttpRequest发送HTML,则可以直接使用。将其插入到页面中。

插入HTML最简单的方法是更新这个元素的innerHTML属性。

2.2 XML

2.3 JSON

使用最多,原生态js 对象。

{
“TOKEN”: “876cfdfece034057997b947eda37018”,
“LATN_ID”: “290”,
“STAFF_ID”: “123”,
“SYSTEM_USER_ID”: "223333 ",
“SYSTEM_USER_CODE”: "ceshi ",
“STAFF_NAME”: “测试工号”,
“EMPEE_MOB_NO”: “18191791987”,
“STAFF_ORG_REL_ID”:“123”
“OPT_TYPE”: “1”,
“orgRelList”: [{
“ORG_ID”: “1”,
“TREE_ID”: “10000001”,
“ORG_NAME”: “西安”,
“TREE_LEVEL”: “2”,
“REL_TYPE”: “”,
“REL_ROLE”: “”,
“LATN_ID”: “”,
“LATN_NAME”: “”
}]
}

3、jQuery 使用 ajax

步骤

  1. 创建一个异步对象

  2. 设置请求方式和请求地址

  3. 发送请求

  4. 监听状态的变化

  5. 处理返回的结果

jQuery对ajax进行了封装:

jQuery最底层的方法是:$.ajax()

第二层是:load(), . g e t ( ) , .get(), .get().post()

第三层是:$.getScript()和getJSON()

3.1 load

load()方法是jQuery中最简单常用的方法,能远程载入html 代码,并载入到DOM中

结构:load(url,data,callback)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$title>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js">script>
    <script type="text/javascript">
      $(function () {
        $("a").click(function () {
          //使用load方法处理ajax
          var url = this.href;
          var args = {"time": new Date()};
          $("#content").load(url, args);
          return false;
        });
      });
    script>
  head>
  <body>
  <a href="hello.txt">hello,点我a>
  <div id="content"> div>
  body>
html>

参数名 类型 说明
url String 请求html 页面的url地址
data Object 发送到服务器的key/value数据
callback function 请求完成是回调函数

3.2 GET

/*使用ajax 方式 查询所有*/
       $().ready(function () {
           $.ajax({
               type:"GET",
               url:"${pageContext.request.contextPath}/questionServlet?method=findAllQuestion",
               dataType:"JSON",
               success:function (data) {
               if (data!==null) {
                   var count = 8;//每行显示的列数
                   for (var i = 0;i<Math.ceil(data.length / count);i ++) {
                       for (var j = 0; j < count ; j++) {
                           var index = i*count +j;
                           $("#message").html(
                               "" + data[index].questionId + ""
                               + "" + data[index].questionContent + ""
                               + "" + data[index].answerA + ""
                               + "" + data[index].answerB + ""
                               + "" + data[index].answerC + ""
                               + "" + data[index].answerD + ""
                               + "" + data[index].answer + ""
                               + "" + data[index].subjectName + ""
                           );
                       }
                   }

           }
       }

   });
});

3.3 POST

  /*模糊查询*/
        function btn(){
                //获取输入框内容
                var subjectName = document.getElementById("subjectname").value;
                    $.ajax({
                        type: "POST",
                        url: "${pageContext.request.contextPath}/questionServlet",
                        data: "method=searchBySubject&findName=" + subjectName,
                        dataType: "json",
                        success: function (data) {
                            if (data !== null) {
                                var count = 8;//每行显示的列数
                                for (var i = 0;i<Math.ceil(data.length/ count);i ++){
                                    for (var j = 0; j<count ; j++) {
                                        var index = i*count +j;
                                        $("#message").html(
                                            "" + data[index].questionId + ""
                                            + "" + data[index].questionContent + "                                               "
                                            + "" + data[index].answerA + ""
                                            + "" + data[index].answerB + ""
                                            + "" + data[index].answerC + ""
                                            + "" + data[index].answerD + ""
                                            + "" + data[index].answer + ""
                                            + "" + data[index].subjectName + ""
                                        );
                                    }
                                }
                            }else {
                                // 将js 对象转成 JSON字符串内容即是:对不起。。。。
                                $("#message").html(
                                    "" + data + ""
                                )
                            }

                        }
                    });

        }
-----------------------------------------------------------------------------------------
    //模糊查询
	function search() {
		//获取输入框内容
		var goodName = document.getElementById("goodName").value;
		//window.location.href="${pageContext.request.contextPath}/goods.jsp?sh1="+sh1;
		$.ajax({
			type:"GET",
			url:"${pageContext.request.contextPath}/goodServlet",
			data:"method=searchforone&goodName="+goodName,
			dataType:"json",
			success:function(data){
				if (data != null || data != undefined) {
					$("#myframe").hide();
					//console.info(data);
					var tbody = '';
					var tr = "";
					var count = 4;//每行显示的列数
					for (var i = 0; i < Math.ceil(data.length/ count); i++) {
						for (var j = 0; j < count; j++) {
							if ((i * count + j) >= data.length) {//空表格
								tr += "";
							} else {
								var index = i * count+ j;//动态计算出来的索引,有数据
								var id = data[index].id;
								var img = data[index].goodPic;
								var name = data[index].goodName;
								var price = parseFloat(data[index].goodPrice);
								//console.info(img + ","+ name + ","+ price);
				tr += "
"
+ name+ "
¥"+ price+ "元"; } } tr += ""; } tbody += tr; $('#tt').append(tbody); } }, error:function(){ alert("服务器请求异常!"); } }); } ----------------------------------------------------------------------------------------- /*servlet*/ public void searchforone(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 转码 request.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); // 获取前台传过来的参数name String goodName = request.getParameter("goodName"); // 查询数据库 List<Good> list1 = null; if (goodName == null || goodName.equals("")) {// 查询所有 } else {// 根商品名模糊查询 list1 = goodDao.findGoodByName(goodName); if (list1 != null) { // 使用json ObjectMapper mapper = new ObjectMapper(); // 将集合转为json字符串 String json = mapper.writeValueAsString(list1); // 使用打印流将数据写出去 PrintWriter out = response.getWriter(); out.write(json); out.close(); } } }

4 、检验用户名是否存在

  1. 导入jQuery库

  2. 获取name = “username” 的节点

  3. 为username 添加change 响应函数。

  4. 获取username 的value值属性,去除前后空格不为空,发送ajax请求

  5. 发送请求,校验是否可用,在客户端返回一个html片段:该用户名已经存在

  6. 在客户端浏览器把其添加到#message所在的html 中

    <script type="text/javascript"> 
    $(function () {
            $(":input[name='username']").change(function () {
              var val = $(this).val();
              val = $.trim(val);
              if (val !== ""){
                var url = "${pageContext.request.contextPath}/valUserNameServlet";
                var args = {"username":val,"time":new Date()};
                $.post(url,args,function (data) {
                  $("#message").html(data);
                  
                });
              }
            });
    
          });
        script>
    head>
    <form action="" method="post">
        Username :<br>
        <label>
            <input type="text" name="username"/>
            <br>
            <span id="message">span><br>
        label>
        <input type="submit" value="submit"><br>
    form>
    body>
    html>
    
    
    @WebServlet("/valUserNameServlet")
    public class ValUserNameServlet extends HttpServlet {
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            List<String> usernamelist = Arrays.asList("AA", "BB", "CC");
            String username = req.getParameter("username");
            String result =null;
            if (usernamelist.contains(username)) {
                 result = "该用户名已经存在";
    
            } else{
                 result = "该用户名可以使用";
            }
            resp.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().print(result);
        }
    }
    

namelist = Arrays.asList(“AA”, “BB”, “CC”);
String username = req.getParameter(“username”);
String result =null;
if (usernamelist.contains(username)) {
result = “该用户名已经存在”;

       } else{
            result = "该用户名可以使用";
       }
       resp.setCharacterEncoding("utf-8");
       resp.setContentType("text/html;charset=utf-8");
       resp.getWriter().print(result);
   }

}



你可能感兴趣的:(jquery)