jQuery學習筆記

来源：互联网发布：魔法提琴手知乎编辑：程序博客网时间：2024/05/28 17:07

环境搭建

1. 下载jQuery文件库

在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。

1. 引入jQuery文件库

下载完jQuery框架文件后，并不需要任何的安装，仅需要使用<script>文件导入标记，将jQuery框架文件导入页面中即可，假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码：

<scriptlanguage="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>

<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script>

javaScript代码：

jQuery代码：

以上两段代码完成的功能是一样的。由此可以看出，jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。 $()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。

在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。

#id 选择器(使用身份证号来找人)

jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器：

$("#my_id")

其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。

element 选择器(寻找铅笔)

在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的<div>、<span>各个元素，虽然同属于一个容器，但有各自的功能，jQuery中可以根据元素名查找元素，格式如下：

$(“element”)

其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们就可画画了，通过元素名找到元素就可以对它进行操作了。

css()方法将设置该元素内容中文字显示的样式。

attr()方法的功能是设置或获取元素的某项属性值。

<body>

$("#btntest").attr("disabled","true");

</script>

</body>

.class 选择器(寻找红色铅笔)

我们在上一小节介绍了通过使用元素名称查询元素的方法，其实，还可以通过元素的类别属性查找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元素的某个特征进行查找，它的调用格式如下：

$(“.class”)

其中.class参数表示元素的CSS类别(类选择器)名称。

例如，在页面中，通过class选择器获取某个元素，并显示该元素的class类别名称，如下图所示：

$(“.red”).html($(“.red).attr(“class”); ---- 注：attr(“class”)就是它的class的值red.

在浏览器中显示的效果：

<body>

<div class="red">立正，向我这边看齐</div>

<div class="green">我先歇歇脚</div>

var $redHTML = $(".red").html();

$('.green').html($redHTML);

//$('.green').html($('.red').html());-----這句和上兩句效果一樣。

</script>

</body>

運行效果：

* 选择器(取走全部铅笔)

有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素，相当于可以取走你文具盒中的所有铅笔,格式为：

$(“*”)

选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。

如下图所示：使用*选择器，获取div中的所有子元素并设置三个子元素显示相同的内容。

在浏览器中显示的效果：

由于三个元素都包含在<div>元素中，因此，它们都是<div>元素的子元素，那么，就可以使用$(“div *”)的方式获取<div>元素中的这三个子元素，并使用html()方法来设置它们显示的内容。

实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

sele1,sele2,seleN选择器

有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：

$(“sele1,sele2,seleN”)

其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

例如，通过选择器获取其中的任意两个元素，并将它们显示的内容设为相同，如图所示：

在浏览器中显示的效果：

<body>

<div class="red">选我吧！我是red</div>

<div class="green">选我吧！我是green</div>

<div class="blue">选我吧！我是blue</div>

$(".red,.green,.blue").html("hi,我们的样子很美哦!");

</script>

</body>

運行效果：

ance desc选择器ance(ancestor祖先的简写)- desc（descendant后代的简写）

本节开始，我们将介绍层次性选择器。

在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：

$("ance desc")

其中ancedesc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。

例如，使用层次选择器，获取<div>元素中的全部<span>元素，并设置它们显示的内容，在如下图所示：

在浏览器中显示的效果：

parent > child选择器

它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：

$(“parent > child”)

child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。

prev + next选择器

而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：

$(“prev + next”)

$("p+label").css("background-color","red");

prev ~ siblings选择器

与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev元素后面全部相邻的元素，它的调用格式如下：

$(“prev ~ siblings”)

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。

$("p~label").css("border","solid 1px red");

$("p~label").html("我们都是p先生的粉丝");

:first过滤选择器

本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。

在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？

在下面的示例代码中你可能注意到我们会使用

$(“li:first”)

使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.

鉴于：first和:last功能相近,使用:last给最后的li标签文字添加红色。

$("li:last").css("background-color","red");

:eq(index)过滤选择器

如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用

:eq(index)

其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。

$("li:eq(2)").css("background-color","#60F");

:contains(text)过滤选择器

与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

$("li:contains('jQuery')").css("background","green");

:has(selector)过滤选择器

除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

$("li:has(label)").css("background-color","blue");

:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

$("div").html($(".hidstr:hidden").val());

:visible过滤选择器

与上一节的:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

$("li:visible").css("background-color","blue");

[attribute=value]属性选择器

属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

<body>

<ul>

</ul>

<scripttype="text/javascript">

$("li[title='蔬菜']").css("background-color","green");

</script>

</body>

[attribute!=value]属性选择器

与上一节介绍的[attribute=value]属性选择器正好相反，[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

$("li[title!='水果']").css("background-color","green");

[attribute*=value]属性选择器

介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。

$("li[title*='果']").css("background-color","green");

:first-child子元素过滤选择器

通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

$("li:first-child").css("background-color","green");

:last-child子元素过滤选择器

与:first-child子元素过滤选择器功能相反，:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

$('li:last-child').css("background-color","blue");

:input表单选择器

如何获取表单全部元素？:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select>和 <button>标记的表单元素，因此，它选择的表单元素是最广的。

$("#frmTest:input").addClass("bg_blue");

addClass()方法的功能是为元素添加指定的样式类别名称

:text表单文本选择器

:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。

$("#frmTest:text").addClass("bg_blue");

:password表单密码选择器

如果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。

$("#frmTest:password").addClass("bg_red");

:radio单选按钮选择器

表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。

$("#frmTest:radio").attr("disabled","true");

:checkbox复选框选择器

表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。

$("#frmTest:checkbox").attr("disabled","true"); 復選框不可見

$(“#frmTest:checkbox”).attr(“checked”,”true”); 復選框為選中狀態

:submit提交按钮选择器

通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。

$("#frmTestinput:submit").addClass("bg_red"); id下的input元素為submit的元素。

:image图像域选择器

当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。

$("#frmTest:image").addClass("bg_red"); id下input里type=”image”的圖片選擇。

:button表单按钮选择器

表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

$("#frmTest:button").addClass("bg_blue"); 這種方式不會獲取type=”submit”的按鈕。

:checked选中状态选择器

有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。

$("#frmTest:checked").attr("disabled", true); 讓id下所有為選中狀態的值為不可用。

Checked—選中狀態。Checkbox復選框

:selected选中状态选择器

与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

$("#tip").html("選中的內容為："+$("#frmTest:selected").text());

復選框中的選中狀態選擇用：selected而不是用checked

使用attr()方法控制元素的属性

attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。

$("#a1").attr("href", "www.imooc.com"); 為id為a1的元加href為 www.imooc.com

$("#tip").html($("#a1").attr("href")); 把a1的href屬性值傳給id為tip的元素。

操作元素的内容html()和text()

使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。

$("#text1").html($("#test").html());

$("#text2").text($("#test").html());

html()方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而text()方法只是获取元素中的文本内容，并不包含HTML格式代码，所以它显示的内容并没有变“歪”。

操作元素的样式

通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。

$("#content").css("border","1pxsolid red");

$("#content").css("background","green");

移除属性和样式

使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名

$("#content").removeClass();

$(“#content”).removeAttr(“href”);

使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

function rethtml() {

var $html = "<divid='test' title='hi'>我是调用函数创建的</div>"

return $html;

}

$("body").append(rethtml());

使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：

$(content).appendTo(selector)

参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部

var $html = "<spanclass='red'>小青蛙</span>"

$($html).appendTo("div");

使用before()和after()在元素前后插入内容

使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：

$(selector).before(content)和$(selector).after(content)

其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

$("span").after("<spanclass='red'>小兄弟</span>")

使用clone()方法复制元素

调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

$("body").append($(".red").clone())

替换内容

replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：

$(selector).replaceWith(content)和$(content).replaceAll(selector)

参数selector为被替换的元素，content为替换的内容。最終留下的是content中的內容。

$($html).replaceAll(".green"); 用$html替換掉.green

$(“.green”).replaceWith($html); .green 被$html替換掉

使用wrap()和wrapInner()方法包裹元素和内容

wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

$(".red").wrapInner("<i></i>");

$(‘.red’).wrap(“<span></span>”);

使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：

$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

$("span").each(function(index){

if(index==2){

$(this).addClass('red');

}

})

使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

$(“span”).remove(“.red”); 刪除span中class=”red”的元素

$("span").empty() 刪除span的子元素

页面加载时触发ready()事件

ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：

$(document).ready(function(){})等价于$(function(){});

$(document).ready(function(){ 页面加载触发ready()事件

$("#btntest").bind("click", function () {

$("#tip").html("我被点击了！");

});

使用bind()方法绑定元素的事件

bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：

$(selector).bind(event,[data] function)

参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

$(function () {

$("#btntest").bind("click", function () { 綁定bind click事件

$(this).attr("disabled", "true");

})

});

使用hover()方法切换事件

hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：

$(selector).hover(over，out);

over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

$(document).ready(function(){

$("div").hover(function(){

$(this).addClass("orange");

},function(){

$(this).removeClass("orange")

})

使用toggle()方法绑定多个函数

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：

$(selector).toggle(fun1(),fun2(),funN(),...)

其中，fun1，fun2就是多个函数的名称

$(function () {

$("#btntest").bind("click", function () {

$("div").toggle()

})

});

------------------------------------------------------------------------------------------------

$(function(){

$(".bing").toggle(

function(){

$(this).html("aaaaaaaaaaaaaaaaaaa");

},function(){

$(this).html("bbbbbbbbbbbbbbbbbbbb");

},function(){

$(this).html("ccccccccccccccccccccc");

})

注意：toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。

使用unbind()方法移除元素绑定的事件

unbind()方法可以移除元素已绑定的事件，它的调用格式如下：

$(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。

$(function () {

$("div").bind("click",

function () {

$(this).removeClass("backcolor").addClass("color");

}).bind("dblclick",function () {

$(this).removeClass("color").addClass("backcolor");

})

$("#btntest").bind("click",function () {

$("div").unbind("click"); 移除已綁定好的單擊事件

$(this).attr("disabled", "true");

});

使用one()方法绑定元素的一次性事件

one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：

$(selector).one(event,[data],fun)

参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

$(function () {

var i = 0;

$("div").one("click", function () {

i++;

$(this).css("font-size", i + "px");

$(this).html("我被點擊了"+i+"次")

$(".aaa").html("我被點擊了"+i+"次")

})

});

调用trigger()方法手动触发指定的事件

trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：

$(selector).trigger(event)

其中event参数为需要手动触发的事件名称。

$(function () {

$("div").bind("change-color",function () {

$(this).addClass("color");

});

$("div").trigger("change-color");

});

文本框的focus和blur事件

focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。

$(function () {

$("input").bind("focus", function () {

$("div").html("请输入您的姓名！");

})

$("input").bind("blur", function () {

if ($(this).val().length ==0){

$("div").html("你的名称不能为空！");

}else{

$("div").html("寫得不錯哦");

}

})

});

下拉列表框的change事件

当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。

$(function () {

$("#seltest").bind("change", function () {

if ($(this).val() == "苹果"){

$(this).css("background-color", "red");

$("div").html("你選擇的是："+$(this).val());

}

else{

$(this).css("background-color", "green");

$("div").html("你選擇的是："+$(this).val());

}

})

});

调用live()方法绑定元素的事件

与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：

$(selector).live(event,[data],fun)

参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

$(function () {

$("#btntest").live("click",function () {

$(this).attr("disabled", "true");

})

$("body").append("<inputid='btntest' type='button' value='点击或移出就不可用了' />");

});

注意：从 jQuery 1.7开始，不再建议使用 .live()方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。

如何通过bind方法绑定一个id号为test文本框元素的两个事件,代码如下:

$("#test").bind("changeclick",function(){});

调用show()和hide()方法显示和隐藏元素

show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

$(function(){

var flag=true; //定議一個標杆

$("h4").bind("click",function(){

if(flag){

$("ul").show(1000);

flag=false;

}else{

$('ul').hide(300);

flag=true;

}

})

动画效果的show()和hide()方法

在上一小节中，调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。

$(function() {

$("h4").bind("click", function () {

if($("#hidval").val() == 0) {

$("ul").show(300,function(){

$("#hidval").val(1);

})

} else {

$("ul").hide(300,function(){

$("#hidval").val(0);

})

}

})

});

调用toggle()方法实现动画切换效果

第一节我们学过实现元素的显示与隐藏需要使用hide()与show()，那么有没有更简便的方法来实现同样的动画效果呢？

调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：

$(selector).toggle(speed,[callback])

其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

$(function () {

var $spn =$("#spnTip");

$("h4").bind("click", function () {

$("ul").toggle(500,function(){

$spn.html() =="隐藏" ?$spn.html("显示") :$spn.html("隐藏"); //$(“#id).html()是取文本值

})

});

如果是按鈕時用$(“#id).val()取值：例下

$(this).val()==”隱藏”?$(this).val(“顯示”):$(this).val(“隱藏”);

使用slideUp()和slideDown()方法的滑动效果

可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。

要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

$(function () {

$("h4").bind("click", function () {

if($("#hidval").val() == 0) {

$("ul").slideUp(300,function(){

$("#hidval").val(1);

})

} else {

$("ul").slideDown(1000,function(){

$("#hidval").val(0);

})

}

})

});

使用slideToggle()方法实现图片“变脸”效果

使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：

$(selector).slideToggle(speed,[callback])

其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

$(function () {

var $spn =$("#spnTip");

$("h4").bind("click", function () {

$("ul").slideToggle(500,function(){

$spn.html()=="向下滑"?$spn.html("向上滑"):$spn.html("向下滑");

})

});

使用fadeIn()与fadeOut()方法实现淡入淡出效果

fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：

$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])

其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。

$(function () {

$("h4").bind("click", function () {

if($("#hidval").val() == 0) {

$("ul").fadeIn(500,function() {

$("#hidval").val(1);

})

} else {

$("ul").fadeOut(500,function() {

$("#hidval").val(0);

})

}

})

});

使用fadeTo()方法设置淡入淡出效果的不透明度

调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：

$(selector).fadeTo(speed,opacity,[callback])

其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

例如，分别调用fadeTo()方法，设置三个图片元素的不透明度值，如下图所示：

$(function () {

$("span").each(function (index) {

switch (index) {

case 0:

$(".red").fadeTo(1000,0.5)

break;

case 1:

$(".orange").fadeTo(5000,0.2)

break;

case 2:

$(".blue").fadeTo(3000,0.5)

break;

}

});

调用animate()方法制作简单的动画效果

调用animate()方法可以创建自定义动画效果，它的调用格式为：

$(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

$(function () {

$("span").animate({

width:"80px",

height:"80px"

3000, function () {

$("#tip").html("执行完成!");

});

调用animate()方法制作移动位置的动画

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

$(function () {

$("span").animate({

left:"+=100px"

}, 3000, function (){

$("span").animate({

height:'+=30px',

width:'+=30px'

}, 3000,function () {

$("#tip").html("执行完成!");

});

调用stop()方法停止当前所有动画效果

stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：

$(selector).stop([clearQueue],[goToEnd])

其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

$(function () {

$("span").animate({

left:"+=100px"

}, 3000, function (){

$(this).animate({

height:'+=60px',

width:'+=60px'

}, 3000,function () {

$("#tip").html("执行完成!");

});

$("#btnStop").bind("click", function () {

$("span").stop();

$("#tip").html("执行停止!");

});

调用delay()方法延时执行动画效果

delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：

$(selector).delay(duration)

其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。

$(function () {

$("span").animate({

left:"+=200px"

}, 3000, function (){

$(this).animate({

height:'+=60px',

width:'+=60px'

}, 3000,function () {

$("#tip").html("执行完成!");

});

$("#btnStop").bind("click", function () {

$("span").delay(5000);

$("#tip").html("正在延时!");

});

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

$(function () {

$("#btnShow").bind("click", function () {

var $this =$(this);

$("ul")

.html("<img src='Images/Loading.gif' alt=''/>")

.load("http://www.imooc.com/data/fruit_part.html",function() {

$this.attr("disabled", "true");

});

})

});

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

$(function () {

$("#btnShow").bind("click", function () {

var $this = $(this);

$.getJSON("http://www.imooc.com/data/sport.json",function(data){

$this.attr("disabled", "true");

$.each(data,function (index, sport) {

if(index==4)

$("ul").append("<li>" +sport["name"] + "</li>");

});

})

});

使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

$(function () {

$("#btnShow").bind("click", function () {

var $this =$(this);

jQuery.getScript("http://www.imooc.com/data/sport_f.js",function(){

$this.attr("disabled", "true");

});

})

});

使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

$(function () {

$("#btnShow").bind("click", function() {

var $this =$(this);

$.get("http://www.imooc.com/data/info_f.php",function(data){

$this.attr("disabled", "true");

$("ul").append("<li>我的名字叫：" + data.name +"</li>");

$("ul").append("<li>男朋友对我说：" + data.say +"</li>");

},"json");

})

});

使用post()方法以POST方式从服务器发送数据

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

$.post(url,[data],[callback])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

$(function () {

$("#btnCheck").bind("click", function () {

$.post("http://www.imooc.com/data/check_f.php",{

num:$("#txtNumber").val()

function (data){

$("ul").append("<li>你输入的<b> "

+$("#txtNumber").val() + " </b>是<b> "

+ data +" </b></li>");

});

})

});

使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

$(function () {

$("#btnAction").bind("click", function () {

$("#litest").html($("form").serialize());

})

使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

$(function () {

$("#btnCheck").bind("click", function () {

$.ajax({

url:"http://www.imooc.com/data/check.php",

data: { num:$("#txtNumber").val() },

type:"POST",

success:function (data) {

$("ul").append("<li>你输入的<b> "

+$("#txtNumber").val() + " </b>是<b> "

+ data +" </b></li>");

}

});

})

});

使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

$(function () {

$.ajaxSetup({

type:"post",

success:function(data){

$("ul").append("<li>你输入的<b> "

+$("#txtNumber").val() + " </b>是<b> "

+ data +" </b></li>");

}

});

$("#btnShow_1").bind("click",function () {

$.ajax({

data: { num:$("#txtNumber").val() },

url:"http://www.imooc.com/data/check.php"

});

})

$("#btnShow_2").bind("click",function () {

$.ajax({

data: { num:$("#txtNumber").val() },

url:"http://www.imooc.com/data/check_f.php"

});

})

});

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

$(function () {

$("#divload").ajaxStart(function(){

$(this).html("正在请求数据...");

});

$("#divload").ajaxStop(function(){

$(this).html("数据请求完成！");

});

$("#btnShow").bind("click", function () {

var $this =$(this);

$.ajax({

url:"http://www.imooc.com/data/info_f.php",

dataType: "json",

success:function (data) {

$this.attr("disabled", "true");

$("ul").append("<li>我的名字叫：" + data.name +"</li>");

$("ul").append("<li>男朋友对我说：" + data.say +"</li>");

}

});

})

});

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

$(function () {

$("#frmV").validate(

{

/*自定义验证规则*/

rules: {

email:{

required:true,

email:true

}

/*错误提示位置*/

errorPlacement: function (error, element) {

error.appendTo(".tip");

}

);

});

表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

$(function () {

var options = {

url:"http://www.imooc.com/data/form_f.php",

target:".tip"

}

$("#frmV").ajaxForm(options);

});

图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

$(function () {

$(".divPicsa").lightBox({

overlayBgColor:"#666", //图片浏览时的背景色

overlayOpacity:0.5, //背景色的透明度

containerResizeSpeed: 600 //图片切换时的速度

})

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

<divclass="content">

<ahref="http://img.mukewang.com/52e4aec90001924d06800599.jpg"id="jqzoom" title="小兔子乖乖">

<img src="http://img.mukewang.com/52e4aee700012df702130212.jpg"alt=""/>

</a>

</div>

<scripttype="text/javascript">

$(function () {

$("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom

zoomWidth: 123, //小图片所选区域的宽

zoomHeight: 123,//小图片所选区域的高

zoomType:'reverse' //设置放大镜的类型

});

</script>

cookie插件——cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

$(function () {

if($.cookie("email")) {

$("#email").val($.cookie("email"));

}

$("#btnSet").bind("click", function () {

if($("#chksave").is(":checked")) {

$.cookie("email",$("email").val(), {

path:"/", expires: 7

})

}

else {

$.cookie("email",null, {

path:"/"

})

}

});

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。

$(function () {

var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];

$("#txtSearch").autocomplete(arrUserName,{

minChars: 0, //双击空白文本框时显示全部提示数据

formatItem:function (data, i, total) {

return"<I>" + data[0] + "</I>"; //改变匹配数据显示的格式

formatMatch:function (data, i, total) {

returndata[0];

formatResult:function (data) {

returndata[0];

}

}).result(SearchCallback);

functionSearchCallback(event, data, formatted) {

$(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));

}

});

右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：

$(selector).contextMenu(menuId,{options});

Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。

$(function () {

$("#btnSubmit").contextMenu("sysMenu",

{bindings:

{

'Li3':function (Item) {

$(".tip").show().html("您点击了“保存”项");

'Li4':function (Item) {

$(".tip").show().html("您点击了“退出”项");

}

});

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：

$(Id).focusColor(color)

其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。

$(function () {

$("#u1").focusColor("#ccc");

})

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：

$.addNum(p1,p2) 和 $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。

$(function () {

$("#btnCount").bind("click", function () {

$("#Text3").val(

$.subNum($("#Text1").val(),

$("#Text2").val())

);

});

拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

//指定區域隨意拖動效果。

$(function () {

$(".drag").draggable({containment:"parent"})

});

//繞x軸y軸拖動效果代碼。

$(function () {

$("#x").draggable({axis:"x"})

$("#y").draggable({axis:"y"})

});

放置插件——droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

$(function () {

$(".drag").draggable();

$(".cart").droppable({

drop: function() {

intSum++;

$(this).addClass("focus").find("#tip").html("");

$(".titlespan").html(intSum);

}

})

});

拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，

$(function () {

$("ul").sortable({

delay:2,//為防止點擊事件沖突，延時2秒

opacity:0.35//以透明度0.35進行拖動

})

});

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

$(function () {

$("#accordion").accordion();

});

选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

$(function () {

$("#tabs").tabs({

//设置各选项卡在切换时的动画效果

fx: { opacity: "toggle",height: "toggle" },

event:"click" //通过移动鼠标事件切换选项卡

})

});

对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

$(function () {

$(".btnDelete").bind("click", function () { //询问按钮事件

if($(".spnName").html() != null) { //如果对象不为空

sys_Confirm("您真的要删除该条记录吗？");

returnfalse;

}

});

functionsys_Confirm(content) { //弹出询问信息窗口

$("#dialog-modal").dialog({

height: 140,

modal: true,

title: '系统提示',

hide: 'slide',

buttons: {

'确定': function () {

$(".spnName").remove();

$(this).dialog("close");

'取消': function () {

$(this).dialog("close");

}

open: function(event, ui) {

$(this).html("");

$(this).append("<p>" + content +"</p>");

}

});

}

菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

<scriptsrc="http://www.imooc.com/data/jquery-1.8.2.min.js"type="text/javascript"></script>

<scriptsrc="http://www.imooc.com/data/jquery-ui-1.9.2.min.js"type="text/javascript"></script>

$(function () {

$("#menu").menu();

});

微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

$(function () {

//定义变量

var intR = 0, intG =0, intB = 0, strColor;

$("input").spinner({

//初始化插件

max: 10,

min: 0,

//设置微调按钮递增/递减事件

spin: function(event, ui) {

if (ui.value== 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor = "green";

//设置微调按钮值改变事件

change: function(event, ui) {

var intTmp =$(this).spinner("value");

if (intTmp< 0) $(this).spinner("value", 0);

if (intTmp> 10) $(this).spinner("value", 10);

if (intTmp== 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor= "green";

}

});

工具提示插件——tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

$(function () {

$("#name").tooltip({

show: {

effect:"slideDown",

delay: 350

hide: {

effect:"explode",

delay: 350

position: {

my:"left top",

at:"left bottom"

}

});

获取浏览器的名称与版本信息

在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。

$(function () {

var strTmp = "您的浏览器名称是：";

if ($.browser.chrome) { //谷歌浏览器

strTmp +="Chrome";

}

if($.browser.mozilla) { //火狐相关浏览器

strTmp +="Mozilla FireFox";

}

strTmp +="<br /><br />版本号是：" //获取版本号

+$.browser.version;

$(".content").html(strTmp);

});

检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。

$(function () {

var strTmp = "您打开的页面是：";

if($.support.boxModel) { //是W3C盒子模型

strTmp +="W3C盒子模型";

}

else { //是IE盒子模型

strTmp += "IE盒子模型";

}

$(".content").html(strTmp);

});

检测对象是否为空

在jQuery中，可以调用名为$.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：

$.isEmptyObject(obj);

其中，参数obj表示需要检测的对象名称。

$(function () {

var obj = { "姓名": "土豪一族" };

var strTmp = "您定义了一个：";

if($.isEmptyObject(obj)) { //检测是否为空

strTmp += "空对象";

}

else {

strTmp += "非空对象";

}

$(".content").html(strTmp);

});

检测对象是否为原始对象

调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：

$.isPlainObject (obj);

其中，参数obj表示需要检测的对象名称。

$(function () {

var obj ="null";

var strTmp = "您定义了一个：";

if($.isPlainObject(obj)) { //检测是否为原始对象

strTmp += "原始对象";

}

else {

strTmp += "非原始对象";

}

$(".content").html(strTmp);

});

检测两个节点的包含关系

调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：

$.contains (container, contained);

参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

$(function () {

var node_a =document.body.firstChild;

var node_b =document.body;

var strTmp = "对象node_a";

if($.contains(node_a,node_b)) { //检测是否包含节点

strTmp += "包含 ";

}

else {

strTmp += "不包含 ";

}

strTmp += "对象node_b";

$(".content").html(strTmp);

});

字符串操作函数

调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：

$.trim (str);

参数str表示需要删除左右两边空格符的字符串。

$(function () {

$("#btnShow").bind("click", function () {

$(".tip").html("");

var strTmp ="内容：";

var strOld =$("#txtName").val();

var strNew=$.trim(strOld);

strTmp +=strOld;

strTmp +="<br/><br>除掉空格符前的长度："

strTmp +=strOld.length;

strTmp +="<br/><br>除掉空格符后的长度："

strTmp +=strNew.length;

$(".tip").show().append(strTmp);

});

URL操作函数

调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：

$. param (obj);

参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。

$(function () {

//基本信息对象

var objInfo = newObject();

objInfo.name ="白富美";

objInfo.sex = 1;

//序列化对象

var objNewInfo =$.param(objInfo);

//显示序列化后的对象

var strTmp ="<b>对象白富美序列化后</b>：<br/><br/>";

strTmp +=objNewInfo;

//显示在页面中

$(".tip").show().append(strTmp);

});

使用$.extend()扩展工具函数

调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：

$. extend ({options});

参数options表示自定义插件的函数内容。

/*------------------------------------------------------------/

功能：返回两个数中最小值

参数：数字p1,p2

返回：最小值的一个数

示例：$.MinNum(1,2);

/------------------------------------------------------------*/

(function ($) {

$.extend({

"MinNum": function (p1, p2) {

return (p1> p2) ? p2 : p1;

}

});

})(jQuery);

$(function () {

$("#btnShow").bind("click", function () {

$(".tip").html("");

var strTmp ="17与18中最小的数是：";

strTmp+=$.MinNum(17, 18);

//显示在页面中

$(".tip").show().append(strTmp);

});

使用$.extend()扩展Object对象

除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：

$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

$(function () {

var objInfo = {name: "" };

var objMess = {name: "白富美,", title:"欢迎与我联系！" };

var objNewInfo=$.extend(objInfo,objMess);

var strTmp ="<b>对象白富美合并后</b>：<br/><br/>";

strTmp +=objNewInfo.name + objInfo.title;

//显示在页面中

$(".tip").show().append(strTmp);

});

0 0