上一篇文章谈到了UI的重要性,以及用一个简单的例子说明了一下JQuery是什么样子的。从这篇文章看是,我们开始深入JQuery。
首先我们需要下载JQuery的类库,可以从JQuery的官方站点下载。http://jquery.com/
JQuery的类库包有两种,一种是用于生产环境的压缩版本,"JQuery-x.x.x.min.js" 大概几十K,另一种为开发环境用的版本"JQuery-x.x.x.js" 要100多K。
JQuery的内容很多,我这里不能一一讲解。所以我只能根据我的理解,就我认为在开发UI时用处最大的几个部分进行介绍和讨论。
- Selector
- 节点操作
- 事件的绑定
- Form对象的操作
- 对Ajax的支持
- JQuery工具类
- JQuery的插件
这一章我们首先讨论一下JQuery最强大也是最有特色的Selector,即选择器
Selector是JQuery中对HTML元素快速定位的工具,例如 $("a") 表示页面中所有的<a>元素
JQuery中的Selector共有以下几种:
1.根据Tag Name查找
例如 $("a") 表示页面中所有的<a>;$("div") 表示页面中所有的<div>等等
2.取得某个特定节点下的元素
2.1
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
那么$("input","form") 就代表两个form下的所有input元素,共8个
$("input",document.forms[0])表示第一个form下的所有input元素,共4个
$("input","body")表示body下所有的input元素,共12个
2.2
<body>
<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>
</body>
$("ul#nav li a") 表示ul下面的li下的<a>(最后一个不是,因为它位于<span>下)
3.根据ID定位元素
$("#TestID")取得ID为TestID的元素
$("div#TestID") 取得ID为TestID的div
4.利用filter函数
$("a").filter(".external") 选择class为external的<a>
同$("a").filter(function(){return $(this).hasClass("external");})
5.利用find函数
$("div").find("span")选择<div>下的<span>
filter和find的区别
<div id="testDIV"><span><a href="#">a</a></span></div>
filter只能查找第一级子标签,而find可以查找任意层级的子标签
例如 $("#testDIV").filter("a") 无法选择出任何标签,而$("testDIV").find("a")可以选择出<div>下的<span>下的<a>
6.end()函数
<div id="testDIV"><span><a href="#">a</a></span></div>
$("div#testDIV").find("a").end() 选择id为testDIV的<div>
7.andSelf()函数
<div id="testDIV"><span><a href="#">a</a></span></div>
$("div#testDIV").find("a").andSelf() 选择id为testDIV<div>和<a>
8.精确定位
<div>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
$("li:eq(1)")选择第二个<li>
$("li:eq(1)").next()选择第三个<li>
$("li:eq(1)").prev()选择第四个<li>
$("li:eq(1)").parent()选择<ul>
$("li:eq(1)").parent().children()选择所有<li>
$("li:eq(1)").nextAll()选择序号大于1的<li>
$("li:eq(1)").prevAll()选择序号小于1的<li>
9.siblings()函数
<div id="content">
<h1>Main title</h1>
<h2>Section title</h2>
<p>Some content...</p>
<h2>Section title</h2>
<p>More content...</p>
</div>
$("h1").sibling("h2,h3,p") 选择<h1>的兄弟节点中的<h2>,<h3>,<p>
10.索引函数
:first 选择第一个值
:last 选择最后一个值
:even 选择偶数行
:odd 选择奇数行
:eq(n)选择指定行数(从0开始)
:lt(n)选择小于n的行数
:gt(n)选择大于n的行数
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
$("ol li:first"),$("ol li:last")
<table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>
$("tr:even").addClass("even") 将偶数行的<tr>的class置为even
11.contain
<span>Hello World</span>
$("span:contains('World')")
12.not
$("a:not(div.important a,a.nav)") 选择不在class为important的div下的<a>或class不为nav的<a>
13.根据可见性选择
$("p:hidden") 选择隐藏的<p>, $("p:visible")选择可见的<p>
14.根据属性选择
$("a[attr]")选择具有attr属性的<a>
$("a[attr=val]")选择属性attr等于val的<a>
$("a[attr!=val]")选择属性attr不等于val的<a>
$("a[attr^=val]")选择属性attr的值以val开头的<a>
$("a[attr$=val]")选择属性attr的值以val结尾的<a>
$("a[attr~=val]")选择属性attr中包含val的<a>
15.选择form中的组件
:text <input type="text" />
:password <input type="password" />
:radio <input type="radio" />
:checkbox <input type="checkbox" />
:submit <input type="submit" />
:image <input type="image" />
:reset <input type="reset" />
:button <input type="button" />
:file <input type="file" />
:hidden <input type="hidden" />
16.根据样式class选择
$(".style")选择class为style的标签
$("div.style")选择class为style的<div>