jQuery笔记_html(function(i,origtext)-CSDN博客

本文链接：https://blog.csdn.net/WangSiTeng/article/details/50854061

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

</script>

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

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

animate():

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

您甚至可以把属性的动画值设置为 "show"、"hide"或 "toggle"

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

jQuery 效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

!!!使用 document.createElement() 来创建一个新的 DOM 元素，然后用它替换被选元素。

jQuery CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width().	设置或返回匹配元素的宽度。

注：用于返回或设置

1. $(“p”).height(100);将高度设为100px

2. $(“p”).height(); 将其高度返回（可结合text()和<span></span>使用）

origText

$(document).ready(function(){

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "Old text: "+ origText + " New text: Hello world! (index: " + i + ")";

});

$("#btn2").click(function(){

$("#test2").html(function(i,origText){

return "Old html: "+ origText + " New html: Hello <b>world!</b> (index: " +i + ")";

});

</script>

设置属性 - attr()

jQueryattr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

实例

$("button").click(function(){

  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

attr()方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click(function(){

  $("#w3s").attr({

    "href" : "http://www.w3school.com.cn/jquery",

    "title" : "W3School jQuery Tutorial"

});

});

attr()的回调函数

jQuery方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

实例

$("button").click(function(){

  $("#w3s").attr("href", function(i,origValue){

    return origValue + "/jquery";

});

});

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Texwt."); // 以 jQuery 创建新元素

var txt3=document.createElement("p");

txt3.innerHTML="Text."; // 通过 DOM 来创建文本

$("body").append(txt1,txt2,txt3); // 追加新元素

}

</script>

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

删除 class="italic" 的所有 p 元素

$(document).ready(function(){

$("button").click(function(){

$("p").remove(".italic");

});

</script>

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例

$("p").css("background-color");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

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

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

实例

$("button").click(function(){

vartxt="";

txt+="Width: " + $("#div1").width() + "</br>";

txt+="Height: " + $("#div1").height();

$("#div1").html(txt);

});

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true)方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true)方法返回元素的高度（包括内边距、边框和外边距）。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

· parent() 直接父类，今一个

· parents() 父类，父类的父类，父类的父类的父类。。。。多个

· parentsUntil() 父类，直到括号里的类（括号里的不算在内）

jQueryparent() 方法

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

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

实例

$(document).ready(function(){

  $("span").parent();

});

jQueryparents() 方法

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

下面的例子返回所有 <span> 元素的所有祖先：

实例

$(document).ready(function(){

  $("span").parents();

});

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

实例

$(document).ready(function(){

  $("span").parents("ul");

});

jQueryparentsUntil() 方法

parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

实例

$(document).ready(function(){

  $("span").parentsUntil("div");

});

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

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

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

· 下面的例子返回 <div> 的所有后代：

· 实例

· $(document).ready(function(){

· $("div").find("*");

· });

jQuery first() 方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

实例

$(document).ready(function(){

$("div p").first();

});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

实例

$(document).ready(function(){

$("div p").last();

});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "intro"的所有 <p> 元素：

实例

$(document).ready(function(){

$("p").filter(".intro");

});

$(“li:eq(2)”) 选取第3个li

属性选择器[attribute*=value]

[attribute=value]属性选择器

[attribute!=value]属性选择器

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

通过$("li:first-child")选择器代码，获取了两个<ul>父元素中的第一个<li>元素

通过$("li:last-child")选择器代码，获取了两个<ul>父元素中的最后一个<li>元素

:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。例如，通过调用$("#frmTest :input")表单选择器代码获取了表单中的全部元素。（记住，冒号前面有个空格！！！）

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

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

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

在表单中添加多个复选框和单选按钮，其中有一些元素处于选中状态，使用:checked获取并隐藏处于选中状态的元素

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

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

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

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

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

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

$(content).appendTo(selector)

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

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

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

$(selector).clone()

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

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

参数selector为被替换的元素，content为替换的内容。

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

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

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

例如：$(".red").wrapInner("<i></i>");——将.red格式的内容变为斜体

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

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

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

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

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

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

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

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

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

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

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

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

$(selector).unbind(event,fun)

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

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

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

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

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

$().bind(“focus”, function(e));

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

$("select").bind("change", function (e));

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

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

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

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

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

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

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

其中，url参数为请求加载json格式文件的服务器地址，可选项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) {

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

});

})

});

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

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

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

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

$.get(url,[callback])

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

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

$(selector).serialize()

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

使用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>");

}

});

})

});

</script>

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<style>

.ui-table{margin: 20px auto; border-collapse: collapse; font-size: 12px; text-align:center; color: #666;}

.ui-table th, .ui-table td {padding: 4px 8px;border: 1px solid #ccc;}

.ui-table th {background-color: #f0f0f0;}

</style>

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

</head>

<body>

<tr>

</tr>

</thead>

<tbody>

<tr >

<tdcolspan="5">

<inputid="wst" type="button" value="加载"/>

</td>

</tr>

</tbody>

</table>

var student=[

{"name":"wst","id":"1","class":"一班","score":"99"},

{"name":"lxy","id":"2","class":"二班","score":"88"},

{"name":"aha","id":"3","class":"三班","score":"77"},

{"name":"xe","id":"4","class":"四班","score":"66"}

];

$(function(){

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

vartbody=$("#studentsInfo").find("tbody");

tbody.empty();

$.each(student,function(index,stu){

tbody.append(

"<tr><td>" + parseInt(index+1)+

"</td><td>" + stu.id +

"</td><td>" + stu.name +

"</td><td>" + stu.class +

"</td><td>" + stu.score +

"</td></tr>"

);

});

})

</script>

</body>

</html>

表单验证插件：

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

$(form).validate({options})

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

例子：

</form>

$("#frmV").validate(

{

/*自定义验证规则*/

rules: {

email: { //这个email是输入框的id

required: true,

email: true

}

}, (注意这里有个逗号)

/*错误提示位置*/

errorPlacement: function(error, element) {

error.appendTo(".tip");

}

);

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

$(form). ajaxForm ({options})

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

例子：

$(function () {

$("#frmV").ajaxForm({

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

target: ".tip"

});

图片灯箱插件——lightBox

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

$(linkimage).lightBox({options})

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

例子：

$(function () {

$(".divPics").lightBox({

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

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

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

})

});

图片放大镜插件——jqzoom

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

$(linkimage).jqzoom({options})

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

例子：

<scripttype="text/javascript">

$(function () {

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

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

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

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

});

</script>

cookie插件——cookie

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

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

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

搜索插件——autocomplete

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

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

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

<body>

<spanclass="fl">搜索插件</span>

</div>

<divclass="content">

<spanclass="fl">用户名</span><br />

<input id="txtSearch" name="txtSearch"type="text" />

<divclass="tip">

</div>

<scripttype="text/javascript">

$(function () {

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

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

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

formatItem: function (data,i, total) {

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

formatMatch: function(data, i, total) {

return data[0];

formatResult: function(data) {

return data[0];

}

}).result(SearchCallback);

function SearchCallback(event,data, formatted) {

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

}

});

</script>

</body>

右键菜单插件——contextmenu

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

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

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

例子:

<body>

<divclass="title"><span class="fl">点击右键</span></div>

<divclass="content">

<inputid="btnSubmit" type="button" value="提交" />

<divclass="tip"></div>

</div>

<divclass="contextMenu" id="sysMenu">

<ul>

<liid="Li4"><imgsrc="http://img.mukewang.com/52e4b3680001424900160016.jpg"alt="" />退出</li>

</ul>

</div>

<scripttype="text/javascript">

$(function () {

$(".title").contextMenu("sysMenu",

{bindings:

{

'Li3': function (Item) {

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

'Li4': function (Item) {

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

}

});

</script>

</body>

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

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

$(Id).focusColor(color)

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

如：$("#u1").focusColor("#dcc");

自定义类级别插件—— twoaddresult

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

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

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

拖曳插件——draggable

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

$(selector). draggable({options})

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

例如：$("#x").draggable({axis:"x"});延X轴

$("#y").draggable({axis:"y"});延Y轴

$("#y").draggable({containment:"parent"}); 在父类中移动

放置插件——droppable

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

$(selector).droppable({options})

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

$().droppable({

drop: function(){ }

} )

拖曳排序插件——sortable

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

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

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

$( ).sortable({

delay: 2, //延迟

opacity: 0.35 //透明度

})

面板折叠插件——accordion

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

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

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

选项卡插件——tabs

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

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

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

<body>

<divid="divtest">

<divid="tabs">

<ul>

<li><a href="#tabs-1">最爱吃的水果</a></li>

<li><a href="#tabs-2">最喜欢的运动</a></li>

</ul>

<divid="tabs-1">

</div>

<divid="tabs-2">

</div>

<scripttype="text/javascript">

$(function (){

$("#tabs").tabs ({

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

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

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

})

});

</script>

</body>

菜单工具插件——menu

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

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

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

微调按钮插件——spinner

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

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

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

$("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()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

<input id="name"name="name" title="XXXXXXXXXXXXX" />

(会显示title 的内容)

$(function () {

$("#name").tooltip({

show:{

effect:"slideDown",

delay: 1

hide: {

effect:"explode",

delay: 350

position:{

my: "lefttop",

at: "leftbottom"

}

});

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

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

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

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