jQuery

jQuery

一、jQuery概述

1、jQuery简介

jQuery是一个优秀的JavaScript框架，一个轻量级的JS库，它封装了JS、CSS、DOM，提供了一致的、简介的API。使用户更方便地处理HTML、Events、实现动画效果，并且方便地为网站提供AJAX交互。

2、jQuery对象

1）什么是jQuery对象

jQuery对象：jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述，jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型是jQuery对象，所以方法可以连缀调用“jQuery对象.方法().方法()….”。通过jQuery选择器选中的对象为jQuery对象：— 如$("div)和$("#d1")。

引入jQuery文件

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

当DOM载入就绪时可以绑定一个执行的函数，所以需要在DOM加载完成后执行的jQuery代码要写在如下代码块中：

$(document).ready(function(){
    // 在这里写你的代码...
});

简写方式：

$(function(){
    // 在这里写你的代码...
})

2）jQuery对象与DOM对象的关系

jQuery对象本质上是一个DOM对象组，它在该数组上扩展了一下操作数组中元素的方法。

3、对象访问

each()：以每一个匹配的元素作为上下文来执行一个函数。

$("p").each(function(i){
    $(this).val("第"+i+"个");
});

• i：当前元素在集合中所处的位置，从0开始。
• this：指的是DOM对象。
• $(this)：指的才是jQuery对象
• 返回值：如果里面返回一个值，返回false，将停止循环；返回true，将跳至下次循环。

get()：得到匹配的DOM元素。

$("p").get();//得到所有DOM元素集合。
$("p").get(0);//等价于$("p")[0];得到第0个位置的元素

index()：返回相应元素的索引值，从0开始。

$("li").index();//返回该元素在同辈元素中的索引位置。
$("ul").index("li");//返回ul中所有li的索引位置。

相关属性

属性	描述
length	jQuery对象中元素的个数。
selector	返回找到当前元素的选择器。
context	返回传给jQuery()函数的原始DOM节点内容，即该函数的第二个参数，如果没指定，则返回当前文档对象（document）。

4、数据缓存

data()：在元素上存放或读取数据，返回jQuery对象。

$("div").data("a");//获取存放的数据
$("div").data("a","hello");//存放数据a，值为hello

removeData()：移除存放的数据。

$("div").removeData("a");

二、选择器

选择器是用来选择文档当中的标签的，它很好的解决了程序的访问这个问题。

1、基本选择器

1）通用选择器

通用选择器：选取所有元素，用*标识。

$("*");

2）元素选择器

元素选择器：选取所有指定元素，用元素类型标识。

$("p");

3）类选择器

类选择器：选择指定类属性的元素，用.加class属性名标识。

$(".className");

4）id选择器

id选择器：选择指定id属性的元素，用#加id属性名标识。

$("#idName");

2、层次选择器

1）后代选择器

后代选择器：选择元素所有指定的后代元素，用空格标识。

$("ul li");//选择ul中所有的li元素

2）子选择器

子选择器：选择元素所有指定子元素，用>标识。

$("ul>li");//选取ul中子元素li，如果有嵌套li将不会被选择。

3）兄弟选择器

兄弟选择器：选择元素后面第一个同辈元素，用+标识。

$("#liId+li");//选择#liId标识的li元素后面第一个li元素

4）所有兄弟选择器

所有兄弟选择器：选择元素中所有与指定元素同辈的元素，用~标识。

$("form~input");//选择form中所有input元素

3、过滤选择器

之前的选择器可能会选择很多的元素，我们需要进行一定的过滤，来得到我们需要的元素。

1）基本过滤选择器

根据元素的基本特征选择元素，常用于表格和列表。

过滤选择器	描述
:first	第一个元素
:last	最后一个元素
:not(selector)	把selector排除在外
:even	挑选偶数行
:odd	挑选奇数行
:eq(index)	下标等于index的元素
:gt(index)	下标大于index的元素
:lt(index)	下标小于index的元素
:header	匹配<h1>-<h6>等标题元素
:animated	匹配正在执行动画效果的元素

使用

$("li:first");//选择第一元素
$("li:eq(0)");//选择第1个元素

2）子元素过滤选择器

根据子元素位置选择元素。

属性	描述
:nth-child	匹配父元素下的第n个子元素，会忽略元素类型计数，从1开始
:first-child	匹配第一个子元素
:last-child	匹配最后一个子元素
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配

使用

$("li:nth-child(1)");
$("li:only-child");

3）内容过滤选择器

根据元素文本的内容选择元素。

过滤选择器	描述
:contains(text)	匹配包含给定文本的元素
:empty	匹配所有不包含子元素或文本的空元素

使用

$("p:contains('content')");//匹配包含“content”内容的文本。 
$("p:empty");//匹配没有子元素的p元素

4）可见性过滤选择器

根据元素可见性选择元素。

过滤选择器	描述
:hidden	匹配所有不可见的元素，或type为hidden的元素
:visible	匹配所有可见的元素

使用

$("input:hidden");//所有隐藏的input元素
$("table:visibe");//所有可见的表格

5）属性过滤选择器

根据元素属性选择元素。

属性	描述
[attribute]	匹配具有attribute属性的元素
[attribute = value]	匹配属性等于value的元素
[attribute ! = value]	匹配属性不等于value的元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用

使用

$("[href]");//所有带有href属性的元素
$("[href='#']");//所有href属性值为#的元素

6）表单选择器

根据表单元素类型选择元素。

选择器	描述
:input	匹配所有input、textarea、select和button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有普通按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素或为hidden的元素

使用

$(":radio");

7）状态过滤选择器

根据元素状态选择元素。

过滤选择器	描述
:enabled	匹配所有可用的元素
:disabled	匹配所有不可用的元素
:checked	匹配所有选中的被选中元素（checkbox、radio等，不包括select中的option）
:selected	匹配所有选中的option元素

使用

$(":selected")

4、选择器组

选择器组：可以将多种选择器结合起来共同使用，选择所有的元素用,分隔。

$("select1,select2,select3");

三、筛选函数

对通过选择器选择的jQuery对象，我们可以通过筛选函数，选择我们我们所需要的对象。

1、过滤

之前的过滤选择器是在得到jQuery对象之前进行过滤，现在的过滤是在得到jQuery对象之后进行过滤，从中找出我们需要的对象进行处理。

函数	描述
eq(index)	获取第n个jQuery对象，从0开始
first()	获取第一个元素
last()	获取最后一个元素
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有则返回true
`filter(expr	obj
`is(expr	obj
map(callback)	将一组元素转换成其它数组
has(expr)	保留包含特定后代的元素，去掉那些不含有指定后代的元素
not(expr)	删除与指定表达式匹配的元素
slice(start, [end])	选取一个匹配的子集

使用

$("li").eq(0);//得到第一个jQuery对象，类似的有get(0)，获得的是DOM对象
$(this).hasClass("className");
$("p").filter(".className");//保留带有className类的元素
$("p").filater(function(index){
    return index%2==0;
})//对每个对象进行运算，返回false这个元素将被删除，保留偶数位元素

2、查找

函数	描述
children([expr])	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，只考虑子元素
closest([expr])	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
find(expr)	搜索与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
next([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr])	查找当前元素之后所有的同辈元素
nextUntil([expr])	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent()	返回第一个匹配元素用于定位的父节点
parent([expr])	匹配一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr])	取得一个包含着所有匹配元素的祖先元素的元素集合
parentsUntil([expr])	查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止
prev([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的集合
prevAll([expr])	查找当前元素之前的所有同辈元素
prevUntil([expr])	查找当前元素之前的所有同辈元素，直到遇到匹配的那个元素为止
siblings([expr])	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

使用

$("div").children();
$("div").parent();
$("div").siblings();

3、串联

函数	描述
add(expr, [context])	把与表达式匹配的元素添加到jquery对象中，这个函数可以用于连接分别于两个表达式匹配的元素结果集
andSelf()	加入先前所选的加入当前元素中
contents()	查找匹配元素内部所有的子节点（包括文本节点），如果元素是一个iframe，则查找文档内容
end()	回到最近的一个破坏值操作之前，即将匹配的元素列表变为前一次的状态。

使用

$("p").add("span");//选取p元素和span元素的结果集
$("div").find("p").andSelf();//选取div和内部的p元素

四、属性

1、attr

对元素的属性进行操作。

函数	描述
attr()	设置或返回匹配元素的属性和值。
removeAttr()	从所匹配的元素中移除指定的属性。

使用

$("img").attr("width");
$("img").attr("width",100);
$("img").attr("width",function(index,endvalue){
    return endvalue-50;
})

$("img").removeAttr("id");

2、class

对元素的class属性进行操作​。

函数	描述
addClass()	向匹配的元素添加指定的类名。
removeClass()	从匹配的元素中删除全部或指定的类。
toggleClass()	对匹配的元素中一个或多个类进行切换。

使用

$("img").addClass("className");
$("img").addClass(function(index,oldClass){
    return "class_"+index;
});

$("img").removeClass("className");
$("img").removeClass(fuction(index,oldClass){
    return "class_"+index;
})；

$("img").toggleClass("className");//不存在该类，则添加；存在，则移除
$("img").toggleClass(function(index,class){
    return "class_"+index;
});

使用简单参数的，一般是对所选元素进行同样操作；使用function参数的，一般是对选中的多个元素按位置区分，进行不同的操作。

3、html

对元素的html代码、文本、值进行操作。

函数	描述
html()	设置或返回所选元素集合中的HTML内容。
text()	设置或返返回所选元素的文本内容。
val()	设置或返回匹配元素的值。

使用

$("p").html();
$("p").html("<b>Hello</b>");
$("p").html(function(index,oldcontent){
    return "index:"+index;
});

$("p").text();
$("p").text("Hello");
$("p").text(function(index,oldcontext){
    return "index:"+index;
});

$("input").value();
$("input").value("请输入");
$("input").value(function(index,oldvalue){
    return "index:"+index;
});

4、style

对元素的样式属性进行操作。

1）样式

css()：设置或返回匹配元素的一个或多个样式属性。

使用

$("p").css("color");
$("p").css("color","red");
$("p").css("color",function(index,oldvalue){
    return "red";
});
$("p").css({
    "color":"red",
    "font-size":"20px"
});

2）尺寸

函数	描述
height()	设置或返回当前元素的高度。
width()	设置或返回当前元素的宽度。
innerHeight()	设置或返回当前元素内部区域高度。
innerWidth()	设置或返回当前元素内部区域宽度。
outerHeight(options)	设置或返回当前元素的外部高度。
outerWidth(options)	设置或返回当前元素的外部宽度。

使用

$("div").width();

3）位置

函数	描述
offset()	返回第一个匹配元素相当于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置，包含两个属性top和left。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。

使用

var x=$("div").parent();
x.top;
x.left;

五、DOM

1、插入

1）内部插入

函数	描述
append()	向被选元素结尾（仍然在内部）插入由参数指定的内容。
appendTo()	向目标结尾（仍然在内部）插入匹配元素结合中的每个元素。
prepend()	向匹配元素集合中的每个元素开头（仍然在内部）插入由参数指定的内容。
prependTo()	向目标开头插入（仍然在内部）匹配元素集合中的每个元素。

使用

$("p").append("<b>Hello</b>");//<p>This is paragraph!<b>Hello</b></p>
$("p").append(function(index,html){
    alert(html);//html是当前选择元素中的内容，为This is paragraph!
});

$("<b>Hello</b>").appendTo("p");//与append相比内容和选择器位置不同，不能使用函数添加内容

2）外部插入

函数	描述
after()	在匹配的元素之后插入内容。
before()	在匹配的元素之前插入内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。

使用

$("p").after("<b>Hello</b>");//<p>This is paragraph!</p><b>Hello</b>
$("p").after(function(index){
    return "index:"+index;
});

$("<b>Hello</b>").insertAfter("p");//<p>This is paragraph!</p><b>Hello</b>

2、包裹

函数	描述
wrap()	把被选元素用指定的内容或元素包裹起来。
unwrap()	移除指定元素的父元素。
wrapAll()	把所有被选元素用指定的内容或元素包裹起来。
wrapInner()	将匹配的元素的自内容用指定的内容或元素包裹起来。

使用

$("p").wrap("<div></div>");//<div><p>This is paragraph!</p></div>
$("p").wrap(function(){
    return "<div></div>";
});

$("p").unwrap();

$("p").wrapAll("<div></div>");//<div><p>This is paragraph!</p><p>This is paragraph!</p></div>

$("p").wrapInner("<b></b>");<!--<p><b>This is paragraph!</b></p>-->
$("p").wrapInner(unction(){
    return "<b></b>";
});

3、替换

函数	描述
replaceWith()	用新内容替换匹配的元素。
replaceAll()	用新内容替换匹配到的所有元素。

$("p").replaceWith("<b>Hello world!</b>");<!--<p>元素变为<b>Hello world!</b>-->
$("p").replaceWith(function(){
    return "<b>Hello world!</b>";
});

$("<b>Hello world!</b>").replaceAll("p");<!--<p>元素变为<b>Hello world!</b>，与replaceWith相比，内容和选择器位置相反，不能使用函数进行替换-->

4、删除

函数	描述
empty()	移除元素中的所有内容，包括文本和子节点。
remove()	移除被选元素。
detach()	移除被选元素。

使用

$("p").empty();<!--<p></p>-->
$("p").remove();<!--移除该元素，会保留 jQuery 对象中的匹配的元素，不会保留元素的jquery数据。-->
$("p").detach();<!--移除该元素，会保留 jQuery 对象中的匹配的元素，会保留所有绑定的事件、附加的数据-->

5、复制

clone()：创建匹配的元素集合的副本。

$("body").append($("p").clone());
$("p").clone(true);<!--为true则复制元素所有的事件处理-->

六、事件

1、事件处理

处理函数	描述
on()	向被选元素附加一个或更多事件处理器。
one()	向被选元素添加事件处理器，每个元素只能触发一次该处理器。
trigger()	使所有被选元素触发指定事件。
triggerHandler()	使第一个被选元素触发指定事件，不会执行浏览器默认动作，表单提交等。
off()	从被选元素移除一个被添加的事件处理器。

使用

$("button").on("click",function(){
    $("p").slideToggle();
});
$("button").on({//添加多个事件
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

$("p").one("click",function(){//只能触发一次改变大小
    $(this).animate({fontSize:"+=6px"});
});

$("input").trigger("select");<!--使input元素触发触发选中事件，会出现选中边框-->
$("input").triggerHandler("select");<!--使input元素触发触发选中事件，输入框不会出现选中边框-->

$("p").off();<!--移除p元素所有的事件处理器-->
$("p").off("click");<!--移除p元素click事件处理器-->

2、事件切换

切换函数	描述
hover()	绑定两个事件处理器函数，鼠标移上和鼠标离开分别执行。
toggle()	绑定两个或多个事件处理器函数，当发生轮流click事件时执行。

使用

$("body").hover(//三个函数轮流执行
    function(){
        $("body").css("background-color","green");
    },function(){
        $("body").css("background-color","red");
});

$("button").toggle(//三个函数轮流执行
    function(){
        $("body").css("background-color","green");
    },function(){
        $("body").css("background-color","red");
    },function(){
        $("body").css("background-color","yellow");
});

3、事件属性

属性	描述
pageX	相对于文档左边缘的鼠标位置。
pageY	相对于文档上边缘的鼠标位置。
result	包含由被指定事件触发的事件处理器返回的最后一个值。
target	触发该事件的DOM元素。
timestamp	返回从1970年1月1日到事件发生时的毫秒数。
tyoe	显示触发事件的类型。
which	指示按了哪个键或按钮。

使用

event.pageX;
event.pageY;

4、事件类型

事件	描述
load()	指定元素加载时触发。
click()	鼠标点击触发。
dblclick()	鼠标双击触发。
keydown()	键盘或按钮被按下时触发。
keyup()	按钮被松开时触发。
keypress()	当键盘或按钮被按下时触发。
mousedown()	鼠标指针移到元素商法，并按下鼠标按键时触发。
mouseup()	当在元素上松开鼠标按钮时触发。
mouseenter()	鼠标指针穿过元素时触发。
mouseleave()	鼠标指针离开元素时触发。
mousemove()	鼠标指针在元素中移动时触发。
mouseout()	鼠标指针从元素上移开时触发。
mouseover()	鼠标指针位于元素上方时触发。
focus()	元素获得焦点触发。
blur()	元素失去焦点触发。
focusout()	元素失去焦点触发，可以从父元素上检测子元素失去焦点的情况。
focusin()	元素获得焦点时触发，可以从父元素上检测子元素失去焦点的情况。
change()	元素值发生改变时触发，仅用于文本域、textarea、select。
select()	textarea或文本input元素中的文本被选择时触发。
submit()	提交表单时会触发。
resize()	调整浏览器窗口大小时触发。
scroll()	用户滚动指定元素时触发。

使用

$("input").change(function(){
    $(this).css("background-color","#FFFFCC");
});
$("input").change();<!--触发文本域的change事件-->

七、效果

1、显示隐藏

函数	描述
show()	显示被选元素。
hide()	隐藏被选元素。
toggle()	对被选元素进行显示和隐藏的切换。

使用

$("p").show();
$("p").show(1000);//设置元素从隐藏到可见的时间为1000毫秒
$("p").show(1000,function(){
    //show函数执行完成后执行的函数。
});

$("p").hide();
$("p").hide(1000);//设置元素从可见到隐藏的时间为1000毫秒
$("p").hide(1000,function(){
    //hide函数执行完成后执行的函数。
});

$("p").toggle();
$("p").toggle(1000);//设置元素从可见到隐藏的时间为1000毫秒，或者相反
$("p").toggle(1000,function(){
    //toggle函数执行完成后执行的函数。
});

2、滑入滑出

函数	描述
slideDown()	使用滑动效果显示被选的元素。
slideUp()	使用滑动效果隐藏被选的元素。
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换。

使用

$("p").slideDown();
$("p").slideDown(1000);//设置元素从隐藏到可见的时间为1000毫秒
$("p").slideDown(1000,function(){
    //slideDown函数执行完成后执行的函数。
});

$("p").slideUp();
$("p").slideUp(1000);//设置元素从可见到隐藏的时间为1000毫秒
$("p").slideUp(1000,function(){
    //slideUp函数执行完成后执行的函数。
});

$("p").slideToggle();
$("p").slideToggle(1000);//设置元素从可见到隐藏的时间为1000毫秒，或者相反
$("p").slideToggle(1000,function(){
    //slideToggle函数执行完成后执行的函数。
});

3、淡入淡出

函数	描述
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见。
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏。
fadeTo()	把被选元素逐渐改变至给定的不透明度。

使用

$("p").fadeIn();
$("p").fadeIn(1000);
$("p").fadeIn(1000,function(){
    //fadeIn函数执行完成后执行
});

$("p").fadeOut();
$("p").fadeOut(1000);
$("p").fadeOut(1000,function(){
    //fadeOut函数执行完成后执行
});

$("p").fadeIn(0.4);//透明度参数必须
$("p").fadeIn(1000,0.4);
$("p").fadeIn(1000,0.4,function(){
    //fadeTo函数执行完成后执行
});

4、自定义

函数	描述
animate()	对被选元素怒应用自定义的动画。
stop()	停止当前在被选元素上正在运行的动画。
delay()	对被选元素的所有排队函数设置延迟。

使用

$("div").animate({width:400px;});<!--第一个参数样式，必须-->
$("div").animate({width:400px;},1000,swing,function(){<!--第二个参数是时间，第三个参数是设置动画速度函数，取值为swing、linear。-->
    <!--animate函数执行完成后执行-->
});

$("div").stop();
$("div").stop();
$("div").stop();

$('#foo').slideUp(300).delay(800).fadeIn(400);<!--在两个函数之间延时800毫秒-->

八、ajax

1、请求

函数	描述
jQuery.ajax()	执行异步HTTP请求
load()	从服务器加载数据，然后把返回的数据放在指定的元素中。
jQuery.get()	使用HTTP GET请求从服务器加载数据。
jQuery.post()	使用HTTP POST请求从服务器加载数据。
jQuery.getJSON()	使用HTTP GET请求从服务器加载JSON编码数据。
jQuery.getScript()	使用HTTP GET请求从服务器加载JavaScript文件，然后放入执行文件。

使用

$.ajax({
    type:"GET",
    url:"/test.action",
    async:true,
    data:"name=wen&age=22",
    success function(data){
        alert(data);
    }
});

• type：请求方式，默认为GET。
• url：请求的地址。
• async：默认true，为异步请求；如果要发送同步请求，设置为false。
• data：传输的数据。

$("div").load("test.action",{//与事件load方法根据参数区分。
    name:"wen"
},function(response,status,xhr){//status：请求的状态，取值为为success、notmodified、error、timeout、parseerror
    alert(response);
})

$.get("test.action","name=wen",function(response,status,xhr){
    //运行成功时执行的函数，如果需要使用出错状态，使用$.ajax()
},"json");//响应的数据类型，取值为xml、json、script或html，默认执行只能判断

$.post("test.action","name=wen",function(response,status,xhr){
    //运行成功时执行的函数，如果需要使用出错状态，使用$.ajax()
},"json");//响应的数据类型，取值为xml、json、script或html，默认执行只能判断

$.getJSON("test.action","name=wen",function(response,status,xhr){
    //运行成功时执行的函数，如果需要使用出错状态，使用$.ajax()
});
$.getScript("test.action",function(response,status){
    //运行成功时执行的函数，如果需要使用出错状态，使用$.ajax()
});

2、事件

函数	描述
ajaxComplete()	当ajax请求完成时注册要调用的处理程序。
ajaxError()	当ajax请求完成且出现错误时注册要调用的处理程序。
ajaxSend()	在ajax请求发送之前显示一条消息。
ajaxStart()	当首个ajax请求完成开始时注册要调用的处理程序。
ajaxStop()	当所有ajax请求完成时注册要调用的处理程序。
ajaxSuccess()	当ajax请求成功完成时显示一条消息。

使用

$("div").ajaxSuccess(function(){
    alert("AJAX 请求已成功完成");
});