您所在的位置： &
jQuery LigerUI使用教程入门篇
jQuery LigerUI使用教程入门篇
谢略的博客
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。
获取最新代码
可以到下载最新代码。
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以&简单&为原则的设计，每个插件尽量独立，并可依赖拓展。
ligerUI是什么
jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等
基础：Resizable、Drag、Tip
导航：Menu、MenuBar、ToolBar
布局：Layout、Tab
表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner
表格：Grid
树形：Tree
窗口：Dialog、MessageBox、Window
jQuery LigerUI是基于jQuery而设计的一系列插件集合。基本上每个插件都是相对独立的。但是彼此之间又紧密地关联着，合理地对插件进行组装，实现出现各种复杂的功能。 使用UI可以帮助你快速地创建友好的用户界面。
第一个例子
&&&&&&&&&&&href=&/lib/ligerUI/skins/Aqua/css/ligerui-all.css&&rel=&stylesheet&&type=&text/css&&&&&&&&src=&/lib/jquery/jquery-1.3.2.min.js&&type=&text/javascript&& &&&&&&src=&/lib/ligerUI/js/core/base.js&&type=&text/javascript&&&&&&&src=&/lib/ligerUI/js/plugins/ligerTextBox.js&&type=&text/javascript&&&&&&&type=&text/javascript&&&&&&&&&&$(function&() &&&&&&&&&{ &&&&&&&&&&&&&//我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象 &var&g&=&$(&#txt1&).ligerTextBox( &&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&//如果没有输入时,会提示不能为空 &&&&&&&&&&&&&&&&&nullText:&'不能为空' &&&&&&&&&&&&&}); &&&&&&&&&&&&&&&/* &&&&&&&&&&&&&如何获取属性 &&&&&&&&&&&&&*/ &&&&&&&&&&&&&//方式一 &&&&&&&&&&&&&alert('方式一:'&+&g.get('disabled')); &&&&&&&&&&&&&//方式二 &&&&&&&&&&&&&alert('方式二:'&+&$(&#txt1&).ligerTextBox('option',&'disabled')); &&&&&&&&&&&&&&&/* &&&&&&&&&&&&&如何设置属性 &&&&&&&&&&&&&*/ &&&&&&&&&&&&&//方式一 &&&&&&&&&&&&&g.set('disabled',&true); &&&&&&&&&&&&&//方式二& &&&&&&&&&&&&&$(&#txt1&).ligerTextBox('option',&'disabled',&false); && &&&&&&&&&&&&&&/* &&&&&&&&&&&&&如何调用方法 &&&&&&&&&&&&&*/ &&&&&&&&&&&&&//方式一 &&&&&&&&&&&&&g.setDisabled(); &&&&&&&&&&&&&//方式二& &&&&&&&&&&&&&$(&#txt1&).ligerTextBox('setEnabled'); &&&&&&&&&&&&&&/* &&&&&&&&&&&&&如何设置事件 &&&&&&&&&&&&&*/ &&&&&&&&&&&&&//这里给文本框绑定一个改变值的事件 &//也可以设置onChangeValue参数 &&&&&&&&&&&&&g.bind('changeValue',&function&(value) &&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&alert(value); &&&&&&&&&&&&&&}); &&&&&&&&&&});& &&&&&&&&style=&padding:10px&&&&&&&&&&&type=&text&&id=&txt1&&value=&&&style=&width:200px&&&
更多的参数和方法的设置可以查看API：/api/
上面是TextBox的使用范例，其他的插件使用方式类似。
如何使用ligerUI对象
我们应用完插件以后，是返回一个ligerui对象的，可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等，没有及时保存起来。我们可以用其他方式获取。见如下：
保存到一个全局的javascript变量：
var&g; &$(function&() &{& &g&=&$(&#txt1&).ligerTextBox(); &);&
使用$.fn.ligerGetTextBoxManager
var&g&=&$(&#txt1&).ligerGetTextBoxManager&();&
使用$.ligerui.get方法
var&g&=&&$.ligerui.get('txt1');&
◆ 第三个方式的是使用ligerui对象的id直接获取的，在传入参数没有指定id的情况下，对象的id将会使用html元素的id，如果html元素没有id，将会自动生成一个。所以在这里我们可以用html文本框的id来获取。
◆ 如果没有指定html元素的id，可以用第一种方式或者第二种方式。
◆ 其实第二种方式可以用第一种方式来替代，实则上ligerText是可以重复调用的，不同的是第二次以后调用都是直接放回ligerui对象。当我们不确定html元素是否已经应用了插件的情况下可以使用第二种方式。
◆ 其他插件的命名跟TextBox类同
事件处理有两种方式。一种是以参数的形式传入，一种是调用ligerui对象的bind方法。
&&&&&&&&&&&var&g&=&$(&#txt1&).ligerTextBox( &&&&&&&&&&&{ &&&&&&&&&&&&&&&onChangeValue&:&function(value){alert(value);} &&&&&&&&&&&}); &&&&&&&&&&&&&&&&&&&&&&g.bind('changeValue',&function&(value) &&&&&&&&&&&{ &&&&&&&&&&&&&&&alert(value); &&&&&&&&&&&});&
◆ 使用bind方法是没有带&on&的。
◆ 事件监听是可以多次绑定的。
◆ 对于某些事件，如果函数的返回值是false，那么后面还没有触发的函数将不会再执行
◆ 第二种方式(bind)，是V1.1.3使用core机制以后引入的。
使用ligerui的接口很方便。只需要调用ligerui对象的方法即可。
//这里设置文本框不能编辑 &g.setDisabled(); &//这里设置文本框可以编辑 &g.setEnabled();&
也可以使用这种方式
$(&#grid&).ligerGrid(&setEnabled&);&
◆ 至于这个对象有哪些方法，可以查看API
◆ 对象的方法是可以扩展的，后面会有一篇ligerui扩展的章节来介绍
◆ 第二种方式是在V1.1.4加入的
获取参数值
每一个ligerui对象都会有get方法。可以获取参数值
var&url&=&g.get(&url&);&
var&url&=&$(&#grid&).ligerGrid(&option&,&url&);&
动态设置参数
每一个ligerui对象都会有set方法。用于动态得设置参数。比如改变Grid的url，那么可以这样写：
g.set(&url&,url);&
g.set({url:url});&
也可以用插件的方式：
$(&#grid&).ligerGrid(&option&,&url&,url);&
◆ 第二种方式是允许同时传入多个参数的。
◆ Set方法是所有插件的统一设置属性的接口
◆ Set方法是V1.1.3使用core机制以后引入的。
◆ 插件传参的方式是V1.1.4引入的
Ligerui的默认参数、方法都是可以扩展的，这里我们定义了两个入口: $.ligerDefaults和$.ligerMethods。
比如要改变或者扩展Grid的默认参数，可以改变$.ligerDefaults.Grid
默认参数扩展
只需要扩展对象：$.ligerDefaults.{Plugin}
比如要改变表格默认的头部标题：
if($.ligerDefaults.Grid) &{ &&&&&$.ligerDefaults.Grid.title&=&&我的表格&; &}&
本地化支持扩展
只需要扩展对象：$.ligerDefaults.{Plugin}String
比如把表格&加载时&翻译成英文：
if($.ligerDefaults.GridString) &{ &&&&&$.ligerDefaults.GridString.loadingMessage&=&&loading...&; &}&
只需要扩展对象：$. ligerMethos.{Plugin}
这里给Grid ligerui对象增加一个alert方法：
$.extend($.ligerMethods.Grid, &&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&alert&:&function&() &&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&//要注意到一点，这里的this就是ligerui对象 &&&&&&&&&&&&&&&&&&&&&var&rowdata&=&this.getSelectedRow(); &&&&&&&&&&&&&&&&&&&&&if&(!rowdata) &&&&&&&&&&&&&&&&&&&&&&&&&alert('空'); &&&&&&&&&&&&&&&&&&&&&else &&&&&&&&&&&&&&&&&&&&&&&&&alert(rowdata.CustomerID); &&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&} &&&&&&&&&); &&function&show() &{ &&&&&&//后面就可以这样使用 &&&&&&Var&g&=&$(&#maingrid&).ligerGrid(); &&&&&&g.alert(); &}&
原文：/leoxie2011/archive//2324106.html
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
今天是被国际上众多科技公司和软件企业承认的业内人士
互联网一大真理便是，有痛点的地方就有机会。现在最想
Eclipse 是一个开源的、可扩展的集成开发环境。平台本
本书是按照全国计算机技术与软件专业技术资格（水平）考试《网络管理员考试大纲》的要求，参照《网络管理员教程》及近年来考试试
51CTO旗下网站jQuery EasyUI 教程
jQuery EasyUI 布局 - 动态添加标签页（Tabs）
通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。
在本教程中，我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。
当点击添加按钮，一个新的 tab 将被添加。如果 tab 已经存在，它将被激活。
步骤 1：创建 Tabs
&div style="margin-bottom:10px"&
&a href="#" class="easyui-linkbutton" onclick="addTab('google','')"&google&/a&
&a href="#" class="easyui-linkbutton" onclick="addTab('jquery','/')"&jquery&/a&
&a href="#" class="easyui-linkbutton" onclick="addTab('easyui','/')"&easyui&/a&
&div id="tt" class="easyui-tabs" style="width:400height:250"&
&div title="Home"&
这个 html 代码非常简单,我们创建了带有一个名为 'Home' 的 tab 面板的 Tabs。请注意，我们不需要写任何的 js 代码。
步骤 2：实现 'addTab' 函数
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
var content = '&iframe scrolling="auto" frameborder="0"
src="'+url+'" style="width:100%;height:100%;"&&/iframe&';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
我们使用 'exists' 方法来判断 tab 是否已经存在，如果已存在则激活 tab。如果不存在则调用 'add' 方法来添加一个新的 tab 面板。
下载 jQuery EasyUI 实例
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码jQuery UI 教程
jQuery UI 实例 - 工具提示框（Tooltip）
可自定义的、可主题化的工具提示框，替代原生的工具提示框。
如需了解更多有关 tooltip 部件的细节，请查看 API 文档 。
悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 默认功能&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
$(function() {
$( document ).tooltip();
display: inline-
&p&&a href="#" title="部件的名称"&Tooltips&/a& 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。&/p&
&p&但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 &a href="" title="ThemeRoller：jQuery UI 的主题创建应用程序"&ThemeRoller&/a& 创建的主题也可以相应地定义工具提示框的样式。&/p&
&p&工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。&/p&
&p&&label for="age"&您的年龄：&/label&&input id="age" title="年龄仅用于统计。"&&/p&
&p&悬停在相应的区域上查看工具提示框。&/p&
自定义样式
悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 自定义样式&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "&div&" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
.ui-tooltip, .arrow:after {
background:
.ui-tooltip {
padding: 10px 20
border-radius: 20
font: bold 14px "Helvetica Neue", Sans-S
text-transform:
box-shadow: 0 0 7
height: 16
left: 50%;
margin-left: -35
bottom: -16
.arrow.top {
.arrow.left {
left: 20%;
.arrow:after {
content: "";
height: 25
box-shadow: 6px 5px 9px -9
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
.arrow.top:after {
bottom: -20
&p&&a href="#" title="部件的名称"&Tooltips&/a& 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。&/p&
&p&但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 &a href="" title="ThemeRoller：jQuery UI 的主题创建应用程序"&ThemeRoller&/a& 创建的主题也可以相应地定义工具提示框的样式。&/p&
&p&工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。&/p&
&p&&label for="age"&您的年龄：&/label&&input id="age" title="年龄仅用于统计。"&&/p&
&p&悬停在相应的区域上查看工具提示框。&/p&
自定义动画
本实例演示了如何使用 show 和 hide 选项来自定义动画，也可以使用 open 事件来自定义动画。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 自定义动画&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
$(function() {
$( "#show-option" ).tooltip({
effect: "slideDown",
delay: 250
$( "#hide-option" ).tooltip({
effect: "explode",
delay: 250
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
&p&这里有多种方式自定义工具提示框的动画。&/p&
&p&您可以使用 &a id="show-option" href="/demos/tooltip/#option-show" title="向下滑动显示"&show&/a& 和
&a id="hide-option" href="/demos/tooltip/#option-hide" title="爆炸隐藏"&hide&/a& 选项。&/p&
&p&您也可以使用 &a id="open-event" href="/demos/tooltip/#event-open" title="向下移动显示"&open&/a& 事件。&/p&
自定义内容
演示如何通过自定义 items 和 content 选项，来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 自定义内容&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
width: 300
text-align:
.photo .ui-widget-header {
margin: 1em 0;
width: 350
height: 350
.ui-tooltip {
max-width: 350
$(function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "&img class='map' alt='" + text +
"' src='/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
text + "'&";
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
if ( element.is( "img" ) ) {
return element.attr( "alt" );
&div class="ui-widget photo"&
&div class="ui-widget-header ui-corner-all"&
&h2&圣史蒂芬大教堂（St. Stephen's Cathedral）&/h2&
&h3&&a href="/maps?q=vienna,+austria&z=11" data-geo=""&奥地利维也纳（Vienna, Austria）&/a&&/h3&
&a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"&
&img src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen&s Cathedral）" class="ui-corner-all"&
&div class="ui-widget photo"&
&div class="ui-widget-header ui-corner-all"&
&h2&塔桥（Tower Bridge）&/h2&
&h3&&a href="/maps?q=london,+england&z=11" data-geo=""&英国伦敦（London, England）&/a&&/h3&
&a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"&
&img src="/wp-content/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all"&
&p&所有的图片源自 &a href="http://commons.wikimedia.org/wiki/Main_Page"&Wikimedia Commons&/a&，且归 &a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0"&CC BY-SA 3.0&/a& 下版权持有人所有。&/p&
使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。
在 CSS 中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 表单&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
display: inline- width: 5
fieldset div {
margin-bottom: 2
fieldset .help {
display: inline-
.ui-tooltip {
width: 210
$(function() {
var tooltips = $( "[title]" ).tooltip();
$( "&button&" )
.text( "Show help" )
.click(function() {
tooltips.tooltip( "open" );
.insertAfter( "form" );
&fieldset&
&label for="firstname"&名字&/label&
&input id="firstname" name="firstname" title="请提供您的名字。"&
&label for="lastname"&姓氏&/label&
&input id="lastname" name="lastname" title="请提供您的姓氏。"&
&label for="address"&地址&/label&
&input id="address" name="address" title="您的家庭或工作地址。"&
&/fieldset&
本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 跟踪鼠标&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
display: inline-
$(function() {
$( document ).tooltip({
track: true
&p&&a href="#" title="部件的名称"&Tooltips&/a& 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。&/p&
&p&但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 &a href="" title="ThemeRoller：jQuery UI 的主题创建应用程序"&ThemeRoller&/a& 创建的主题也可以相应地定义工具提示框的样式。&/p&
&p&工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。&/p&
&p&&label for="age"&您的年龄：&/label&&input id="age" title="年龄仅用于统计。"&&/p&
&p&悬停在相应的区域上查看工具提示框。&/p&
视频播放器
一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 工具提示框（Tooltip） - 视频播放器&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
width: 500
height: 300
background: rgb(200, 200, 200);
text-align:
line-height: 300
.ui-tooltip {
background: rgba(20, 20, 20, 1);
display: inline-
.notification {
display: inline-
font-size: 2
padding: .5
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
$(function() {
function notify( input ) {
var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() );
$( "&div&" )
.appendTo( document.body )
.text( msg )
.addClass( "notification ui-state-default ui-corner-bottom" )
.position({
my: "center top",
at: "center top",
of: window
effect: "blind"
.delay( 1000 )
effect: "blind",
duration: "slow"
}, function() {
$( this ).remove();
$( "button" ).each(function() {
var button = $( this ).button({
primary: $( this ).data( "icon" )
text: !!$( this ).attr( "title" )
button.click(function() {
notify( button );
$( ".set" ).buttonset({
items: "button"
$( document ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
duration: "fast"
effect: "hide"
&div class="player"&这里是视频 (HTML5?)&/div&
&div class="tools"&
&span class="set"&
&button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频"&喜欢&/button&
&button data-icon="ui-icon-circle-arrow-s"&我不喜欢这个视频&/button&
&div class="set"&
&button data-icon="ui-icon-circle-plus" title="添加到播放列表"&添加到&/button&
&button class="menu" data-icon="ui-icon-triangle-1-s"&添加到收藏夹&/button&
&button title="分享这个视频"&分享&/button&
&button data-icon="ui-icon-alert"&标记为不恰当&/button&
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码jQuery 教程
jQuery :eq() 选择器
选取第二个 &p& 元素：
$("p:eq(1)")
定义和用法
:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所以第一个元素的 index 值是 0（不是 1）。
最常见的用法：与其他选择器一起使用，选取指定组合中指定索引的元素（如上面的实例）。
$(":eq(index)")
必需。规定元素的索引。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码