JQUERY 教程

JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素

本例通过JQuery 实现 “隐藏与显示”，并分步讲解每一个步骤的意思
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js

那么本地要测试怎么做呢？
1. 首先在右侧下载 jquery.min.js
2. 把 jquery.min.js和测试的html放在同一个目录下
3. 在测试的html中直接写 src=”jquery.min.js”

1.理解 $(function(){})

$(function(){
});

表示文档加载。看上去略复杂，其实是由下面两种构成：

 $(); //文档加载

function(){ }

合并在一起就是：

$(function(){
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。
一样功能，还有另一个写法

$(document).ready(function(){
});

它也是由两部分组成

$(document).ready();
function(){
}

2.通过id获取元素

与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $(“#id”) 就可以获取了 #id就表示获取id节点

需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$(“#id”) 获取到的是一个 JQuery 对象
注：

通过get(0)或者[0] 把JQuery对象转为DOM对象

      var div= $("#d");
      var d = div[0];

通过$() 把DOM对象转为JQuery对象

      var div= document.getElementById("d");
      var d = $(div);

3.增加监听器

JQuery增加click事件的监听

$("#b1").click(function(){
   alert("点击了按钮");
});

这个也是由两部分组成：
1. b1按钮的点击事件

$(“#b1”).click();

1. 弹出对话框的函数(函数放置在click（）中）

function(){
alert(“点击了按钮”);
}

与原生javascript需要在html元素上增加监听事件不同的是
JQuery 不需要在html元素上进行操作
这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。

4.隐藏与显示

通过$(“#d”)拿到div对象后，直接对jquery对象，调用hide()和show()方法，即可实现隐藏和显示。

二、常见方法

1.取值 .val()方法

通过JQuery对象的.val()方法获取值
相当于 document.getElementById(“input1”).value;

2. .html()获取元素内容,如果有子元素，保留标签（子标签)

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});

</script>

<button id="b1">获取文本内容</button>

<br>
<br>

<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

3. .text()获取元素内容,如果有子元素，不包含子元素标签

通过text() 获取元素内容,如果有子元素，不包含标签

三、中对CSS样式的操作

1.增加class（addClass(“pink”)）

<script src="jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");//增加
   });

});

</script>
  <button id="b1">增加背景色</button>
<br>
<br>

<style>
.pink{
   background-color:pink;
}
</style>

<div id="d">

Hello JQuery

</div>

2.删除class（.removeClass（））

3.切换class（.toggleClass()）

通过toggleClass() 切换一个样式中的class,class变成了pink
这里的切换，指得是：
如果存在就删除
如果不存在，就添加

<script src="jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
   });

});   
</script>

  <button id="b1">切换背景色</button>
<br>
<br>

<style>
.pink{
   background-color:pink;
}
</style>

<div id="d" >
Hello JQuery 
</div>

4.css函数

通过css函数 直接设置样式

css(property,value)

第一个参数是样式属性，第二个参数是样式值,可设置多对，形成数组

css({p1:v1,p2:v2})

参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
样式属性和样式值之间用 冒号 ：分割
属性和值都需要用引号 “

<script src="jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   }); 
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
});

</script>
  <button id="b1">设置单一样式</button>
  <button id="b2">设置多种样式</button>
<br>
<br>

<div id="d1" > 
单一样式，只设置背景色
</div>

<div id="d2" > 
多种样式，不仅设置背景色，还设置字体颜色 
</div>

四、选择器（选择对象并对其操作）

1.元素 $(“tagName”)

$(“tagName”)
根据 标签名 选择所有该标签的元素

$(function(){
   $("#b1").click(function(){
      $("div").addClass("pink");//这就选择了所有div块的标签
   });  
});

2.id $(“#id”) 多了个

根据 id 选择元素
id应该是唯一的，如果id重复，则只会选择第一个。

3.类 $(“.className”) 多了个.

根据 class 选择元素

4.层级 $(“selector1 selector2”) 子标签

$(“selector1 selector2”)
选择 selector1下的selector2元素 。
在本例中 选择id=d3的div下的span元素

5.最先最后条件 :first :last

$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素

$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");//第一个div
   });

   $("#b2").click(function(){
      $("div:last").addClass("pink");//最后一个div
   });

});

6.奇偶

$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)

7.可见性

$(selector:hidden) 满足选择器条件的*不可见的元素*
$(selector:visible) 满足选择器条件的*可见的元素*
注； div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div**下**可见的元素

8.属性

$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性**不等于**value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

注： 一般不要使用[class=className] 而应该使用.className
因为使用$(“[class=’className’]”) .toggleClass(“anotherClassName”)
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。

9.表单对象

表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

注意:

$(“td[rowspan!=13] “+value).toggle(500);

$(“td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒

注： :submit会把元素选中，因为在一些浏览器中，元素的type默认值是submit，所以会选中它。 关于这个问题，请移步参考：使用button元素提交数据

10.表单对象属性

:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素 不可用就是不可选择不可点击
:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script src="jquery.min.js"></script>

<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);
   });

   $(".b2").click(function(){
      var value = $(this).val();
      var options = $("td[rowspan!=13] "+value);
      alert("选中了"+options.length+"条记录！");
   });

});

</script>

<style>
table{
    border-collapse:collapse;
        table-layout:fixed;
    width:80%;
}
table td{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
}

div button{
    display:block;
}

.border{
   border: 1px blue solid;

}

</style>

<table>
    <tr>

        <td rowspan="13" valign="top" width="120">
            <div >
                <button value=":enabled" class="b">切换:enabled</button>
                <button value=":disabled" class="b">切换:disabled</button>       
                <button value=":checked" class="b">切换:checked</button>     
                <button value=":selected" class="b2">:selected数量</button>      
            </div>           
        </td>
        <td width="120">说明</td>
        <td width="120">表单对象属性</td>
        <td width="100px">示例</td>
    </tr>
<tr>
  <td >enabled的按钮</td>
  <td >:enabled</td>
  <td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
</tr>

<tr>
  <td >disabled的按钮</td>
  <td >:disabled</td>
  <td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
</tr>

  <td >选中的复选框</td>
  <td >:checked</td>
  <td>

    <input type="radio" checked="checked" ><br>
    <input type="radio" ><br>
    <input type="checkbox" ><br>
    <input type="checkbox" checked="checked" >
  </td>

<tr>
  <td>选中的下拉列表</td>
  <td >:selected</td>
  <td>
    <select size="3" multiple="multiple">
       <option selected="selected">苍老师</option>
       <option >高树玛利亚</option>
       <option selected="selected">遥美</option>
    </select>
  </td>
</table>

<form>

</form>

11.当前元素

在监听函数中使用 $(this)，即表示触发该事件的组件。

五、筛选器

筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。

1.第一个 最后一个 第几个

首先通过 $(“div”) 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素 注: num基0

$(function(){
   $("#b1").click(function(){
      $("div").first().toggleClass("pink");
   });

   $("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });

   $("#b3").click(function(){
      $("div").eq(4).toggleClass("pink");
   });

});

2.父 祖先

parent() 选取最近的一个父元素
parents() 选取所有的祖先元素

<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").parent().toggleClass("b");
  });
  $("#b2").click(function(){
     $("#currentDiv").parents().toggleClass("b");
  });

});
</script>

3.儿子 后代

children(): 筛选出儿子元素 (紧挨着的子元素)
find(selector): 筛选出后代元素
注: find() 必须使用参数 selector

4.同级

siblings(): 同级(同胞)元素

$("#currentDiv").siblings().toggleClass("b");

六、属性

1.获取

通过attr()获取一个元素的属性

<script src="jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      alert("align属性是:" + $("#h").attr("align") );
   });
   $("#b2").click(function(){
      alert("game属性是:" + $("#h").attr("game") );
   });
});

</script>

<button id="b1">获取align属性</button>

<button id="b2">获取自定义属性 game</button>

<br>
<br>

<h1 id="h" align="center" game="LOL">居中标题</h1>

2.删除

通过removeAttr(attr)删除属性

$(function(){
   $("#b1").click(function(){
         $("#h").removeAttr("align");//删除后居中就没了
   });
});

3.prop（不能获取自定义属性)与attr的区别

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
注：选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

七、效果

1.显示 隐藏 切换

显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000) 延伸就有个动画效果

2.向上滑动 向下滑动 滑动切换

向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)

3.淡入 淡出 淡入淡出切换 指定淡入程度

淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入

3.自定义

通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

<script src="jquery.min.js"></script>

<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000);
   });
});

</script>

<style>
button{
  display:block;
}

div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>

<button id="b1">自定义动画</button>

<br>
<br>

<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

4.回调函数

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果合适结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");//多一个alert函数参数
    });
   });
});

</script>

八、事件

1.加载

页面加载有两种方式表示
1. $(document).ready();
2. $(); 这种比较常用
图片加载用load()函数

<script src="jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $("#message1").html("页面加载成功");

  });
  $(function(){
    $("#img").load(function(){
      $("#message2").html("图片加载成功");
    });
  });

</script>

<div id="message1"></div>
<div id="message2"></div>

<img id="img" src="example.gif">

2.点击

click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

3.键盘

keydown 表示按下键盘
keypress 表示按下键盘
keyup 表示键盘弹起
这三者的区别分别表现在1.发生的 先后顺序，2.获取到的键盘按钮值，3.已经对输入框的文本取值这三方面
先后顺序： 按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：
keydown和keypress：不能获取最后一个字符
keyup： 获取所有字符
如图所例，敲入ab
发生的先收顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab

4.鼠标

mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开

5.焦点（输入）

focus() 获取焦点
blur() 失去焦点

6.改变

change() 内容改变

注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。

<script>
$(function(){
 $("#input1").change(function(){
    var text = $(this).val();
    $("#message").html("input1的内容变为了"+text);
 });
});
</script>

7.提交

submit() 提交form表单

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

<form id="form" action="http://how2j.cn/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">

</form>

<script>
$(function(){

   $("#form").submit(function(){
      alert("提交账号密码");
   });
});

</script>

8.绑定事件

以上所有的事件处理，都可以通过on() 绑定事件来处理

将调用函数当做on()函数的第一个参数，用引号包围。

$(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });

  });

9.触发事件

触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。

$("selector").trigger("event");

九、AJAX与JQuery

JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多。

1.提交AJAX请求

参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证，当用户输入abc的时候提示”已经存在”
完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。

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

<div id="checkResult"></div>

输入账号 :<input id="name" type="text">

<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });
   });
});

</script>

$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

2.使用get方式提交ajax

$.get 是 $.ajax的简化版，专门用于发送GET请求

$.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
);

$.get 使用3个参数(跟ajax的三对不一样）
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

3.使用post方式提交ajax

$.post 是 $.ajax的简化版，专门用于发送POST请求

$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);

$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

4.最简单的调用ajax的方式

load比起 $.get,$.post 就更简单了

$("#id").load(page,[data]); 

id: 用于显示AJAX**服务端文本的元素Id**
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表

<script src="jquery.min.js"></script>

<div id="checkResult"></div>

输入账号 :<input id="name" type="text">

<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});

</script>

5.格式化form下的输入数据

serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串

<script src="jquery.min.js"></script>

<div id="checkResult"></div>
<div id="data"></div>
<a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a>

<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>

</form>

<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "http://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});

</script>

十、数组操作

1.遍历$.each( a, function(i, n){}

$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容

<script>
var a = new Array(1,2,3);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();

</script> 

2.遍历$.unique(a)

$.unique() 去掉重复的元素

注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。

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

<script>
var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();//大到小
$.unique(a);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();

</script> 

3.是否存在和存在位置$.inArray

$.inArray 返回元素在数组中的位置 ，如果不存在返回-1

<script src="jquery.min.js"></script>

<script>
var a = new Array(1,2,3,4,5,6,7,8);
document.write($.inArray(9,a));//9在不在a中
document.close();

</script>

十一、字符串操作

1.去除首尾空白$.trim()

document.write($.trim(" Hello JQuery    "));

$.unique(arr) 和arr.sort()使用后，arr的内容会变化; 但是$.trim(string)需要**再赋值**给string： string=$.trim(string)。

十二、JSON格式字符串，转换为JSON对象

$.parseJSON 将JSON格式的字符串，转换为JSON对象

<script src="jquery.min.js"></script>

<script>

var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;

document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = $.parseJSON(s3);

document.write("这是一个JSON对象: " + gareen);

</script>

结果：

这是一个JSON格式的字符串:{“name”:”盖伦”,”hp”:616}
这是一个JSON对象: [object Object]

十三、JQUERY对象 和 DOM节点对象互相转换

学习到这里已经使用了大量的JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象（getElementById）不具备这些方法。

同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。

在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换

1.通过get(0)或者[0] 把JQuery对象转为DOM对象

<script>
$(function(){
   $("#b1").click(function(){
      var div= $("#d");//选择一个jQuery对象
      var d = div[0];//转化为DOM对象
      var s ="JQuery对象是 " + div;//s是个字符串
      s +="\n对应的DOM对象是 " + d
      alert(s);
   });
});

</script>

2.通过$()把DOM转jQuery

var div= document.getElementById("d");
var d = $(div);