2019/5/19--jquery

JQuery学习

Jquery的css：

1. $(“#m1”).addClass(“此处为style的类名”);//添加css效果
2. $(“#m1”).removeClass(“此处为style的类名”);//移除css效果
3. .$(“#m1”).toggleClass(“此处为style的类名”);//切换，如过没有就显示，有就消去

4.  .$(“#m1”).css({“back-ground”:”red”});

Jquery的动画效果：

1. 正常普通的效果：

$(“#m1”).show() //显示

$(“#m1”).hide()//隐藏

$(“#m1”).toggle()//切换

1. 滑动效果:

$(“#m1”).slideUp()//向上滑动

$(“#m1”).slideDown()//向下滑动

$(“#m1”).slideToggle()//滑动切换

1. 淡进淡出效果：

$(“#m1”).fadeIn()//淡进

$(“#m1”).fade()//淡出

$(“#m1”).fadeToggle()淡进淡出切换

自定义动画效果：

首先解释一下animate()函数：

使用animate()的前提是将元素的定位方式改为absolute或relative，有两个参数，第一个是目标css属性集合，第二个是延时的毫秒数。

示例：animate({“left”:”100px”,”height”:”34px”},300);

Jquery的常用事件：

1. 加载事件：

$()

1. 点击事件：

$(“#m1”).click(); //单击

$(“#m1”).dblclick();//双击

1. 键盘事件：

$(“#m1”).keydown() || .keypress() //键盘按下

$(“#m1”).keyup() //键盘弹起

1. 鼠标事件:

$(“#m1”).mousedown()//鼠标按下

$(“#m1”).mouseup()//鼠标弹起

$(“#m1”).mounsemove()//鼠标进入元素，每移动一下，触发

$(“#m1”).mouseover()//鼠标进入元素，只是触发一次

$(“#m1”).mouseleave()//鼠标离开元素，触发

1. 焦点事件:

$(“#m1”).focus() //获得焦点

$(“#m1”).blur()//失去焦点

1. 改变

$(“#m1”).change()//焦点失去时内容也发生改变

1. 提交：

$(“#m1”).submit();//当表单元素进行提交操作时，触发

JQuery 的ajax

首先先描述一下它的使用场景：有一个输入框，当输入内容为abc时输出不可使用，其他内容为可以使用，使用ajax来进行实时和服务页面连接并进行数据处理。

什么是ajax？

Ajax是无需加载整个网页而进行局部更新的网站技术

Ajax = 异步javascript 和 xml

Ajax 是一种用于快速创建动态网页的技术，通过在后台与服务器进行少量数据交换，ajax可以是网页进行异步更新，这意味着可以不用加载完整个网页的情况下对某一部分进行更新。

最原始的写法：

<script src=”http://www.how2j.cn/study/jquery.min.js”> </script>

<script>

$.(function (){

$(“input”).keyup( function (){

Var value = $(“#text”).val();

Var page =”http://www.how2j.cn/study/checkName.jsp”;

$.ajax({

Url: page;//需要访问的服务页

Data:{“name”:value};//传送给服务端的数据

Success:function(result){ //成功应答后的操作

#(“data”).html(result);

}

});

});

});

</script>

改进的简便且方便的写法： 首先先介绍.serialize(),这是对表单元素的内容的数据格式化，要求表单各个元素都具有唯一的name，当然，用到.serialize()必须要有form表单元素,使用serialize的好处是当有多个元素要提交时，可以一次性的提交。

先把html元素表现出来：

表单元素：

<a href="http://how2j.cn/study/checkName.jsp" >http://www.how2j.cn/study/checkName.jsp</a>
<form id="form">
    <input type="text" id="name" placeholder="输入名字" name="name"><br>
    <input type="text" id="age" placeholder="输入年龄" name="age"><br>
    <input type="text" id="mobile" placeholder="输入手机号" name="mobile"><br>
</form>

js内容：

<script src=”http://www.how2j.cn/study/jquery.min.js”></script>

<script>

&(function(){

$(“input”).keyup( function(){

Var data = $(“input”).serialize();

Var link = “http://www.how2j.cn/study/checkName.jsp?”;

Var url=link +data;

$(“$result”).load(url);

});

});

</script>

Jquery 对数组的操作：

遍历数组： $.each(a,function(i,n){} )  其中，a表示数组名字，i 表示下标，n表示下标下的内容

对数组元素去重：$.unique(a);a表示数组名字

检查某数是否在数组中： $.inArray(9,a)  其中，9 表示数字，是要检查是否在其中的目标数字，a表示数组名字，表示要查询的数组。