jQuery和AJAX使用

jQuery和AJAX使用

• 是一个JavaScript函数库
• 轻量级的javaScript库

1、jquery语法

jQuery 语法是通过选取HTML元素，并对元素执行某些操作。

$(selector).action)

• 美元符号定义jQuery
• 选择符（selector） 查询和查找html元素
• jquery的action（）执行对元素的操作

元素选择器

$(“p”)

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id选择器

$("#test")

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class选择器

$(".test")

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

2、jquery事件

click() 单击元素

$("p").click(function(){
    // 动作触发后执行的代码!!
});

dblclick() 双击元素

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter() 鼠标穿过元素

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

**mouseleave()**鼠标离开元素

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

**mousedown()**鼠标移动到元素上方，并按下

**mouseup()**在当前元素上松开鼠标

**hover()**当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

**focus()**当元素获得焦点时，发生 focus 事件。

**blur()**当元素失去焦点时，发生 blur 事件。

3、jquery效果

jQuery 效果- 隐藏和显示

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

**toggle()**切换hide()和show()方法

$("button").click(function(){
  $("p").toggle();
});

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

4、jQuery 获取内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

attr() 方法用于获取属性值。

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

jQuery - 添加元素

$(“p”).append(“追加文本”);

$(“p”).prepend(“在开头追加文本”);

jQuery - 删除元素

$("#div1").remove();

jQuery - 获取并设置 CSS 类

#添加 class 属性
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

#删除指定的 class 属性：
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

 #toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

jQuery css() 方法

返回指定的 CSS 属性的值

$(“p”).css(“background-color”);

设置指定的 CSS 属性

$(“p”).css(“background-color”,“yellow”);

设置多个 CSS 属性

$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

5、jQuery 遍历

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

6、jQuery - AJAX 简介

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。以及交互性更强的web应用程序的技术

不是一种编程语言，而是一种用于创建更好更快

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法

$(selector).load(URL,data,callback);

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

利用AJAX可以做

• 注册时，输入用户名自动检测用户是否已经存在
• 登录时，提示用户密码错误
• 修改用户名密码时候，判断旧密码是否输入正常
• 删除数据行时，将ID发送到后台，后台数据库删除成功，在页面DOM中将数据行也删除。

1、jQuery.get(...)
	所有参数：
		url:待载入页面的URL地址
		data：待发送key/value 参数
		success：载入成功时回调函数
		dataType：返回内容格式，xml，	json,script,text,html

2、jQuery.post(...)

3、jQuery.ajax(...)
	部分参数：
		url：请求地址
		type：请求方式，get，post
		data：要发送的数据
		success：成功之后执行的回调函数
			data：封装了服务器返回的数据
			status：状态
	

@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
    String msg = "";
    if(name!= null){
        if("admin".equals(name)){
            msg = "ok"
        }else{
            msg= "用户名错误";
        }
    }
    
    if(pwd!= null){
        if("123456".equals(pwd)){
            msg = "ok"
        }else{
            msg= "密码输入错误";
        }
    }
    return msg;
}

<script>
	function a1(){
        $.post({
            url:${pageContext.request.contextPath}/ajax/a3,
            data:{"name:$("#name").val()},
            success:function(data){
            	if(data.toString()=='ok'){
                    //信息核对成功
                    $('#userInfo').css("color","green")
                }else{
                    $('#userInfo').css("color","red")
                }
            	$("#userInfo").html(data);
        	}
        });
    }
    
    function a2(){
        $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
            if(data.toString()=='ok'){
                    //信息核对成功
                    $('#pwdInfo').css("color","green")
                }else{
                    $('#pwdInfo').css("color","red")
                }
            	$("#pwdInfo").html(data);
        })
    }

</script>
<p>
	用户名：
    <input type ="text" id = "name" οnblur="a1()"/>
    <span id= "userInfo"></span>
</p>
<p>
    密码：
    <input type="text" id="pwd" οnblur="a2()"/>
    <span id ="pwdInfo"></span>
</p>

ajax总结

使用jQuery需要导入jQuery，使用vue导入vue，也可以原生实现

步骤：

• 编写对象的Controller，返回消息或者字符串或者json格式的数据；

• 编写ajax请求

  • url：Constroller请求
  • data：键值对
  • success：回调函数

• 给ajax绑定事件

  • 点击.click
  • 失去焦点onblur
  • 键盘弹起keyup