学习jQuery的第三篇日记
2011-01-06 阅读 44
从今天开始大家就和我一起去领略jQuery的美妙之处。
上篇文章我们提到"$"这个符号。在这里我们就说说这个符号到底是什么，它有什么作用呢？
“()”符号—jQuery 的工厂加工函数，在jQuery 中，无论使用哪种类型的选择符，都要从“()”开始，换言之：在将方法连缀到“$()”工厂函数后面时，包装在jQuery对象中的元素就会被自动，隐式地遍历。这样的好处是：就避免了使用for循环之类的显示迭代。
从本篇文章开始我们开始介绍选择符。
1. css选择符。
看了下面这个例子相信你就可以理解css选择符了。
html代码如下：
<pre class="brush:xml;"> ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞无标题文档＜/title＞
＜script src="../js/jquery-1.4.2.min.js"＞＜/script＞
＜/head＞
＜body＞
＜ul id="selected-plays"＞
＜li＞Comedies
＜ul＞
＜li＞＜a href="xxxxx"＞As you like it＜/a＞＜/li＞
＜li＞＜a href="xxxxxxx"＞xxxxxxxx＜/a＞＜/li＞
＜li＞＜a href="#"＞yyyyyyyyyyyyy＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞Tragedies
＜ul＞
＜li＞＜a href="xxxxx.pdf"＞As you like it＜/a＞＜/li＞
＜li＞＜a href="#"＞xxxxxxxx＜/a＞＜/li＞
＜li＞＜a href="#"＞yyyyyyyyyyyyy＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞History
＜ul＞
＜li＞Henry IV(＜a href="mailto:xxxxxxx"＞email＜/a＞)
＜ul＞
＜li＞Part I＜/li＞
＜li＞Part II＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="http://www.xxxhenryxxx"＞xxxxxxxx＜/a＞＜/li＞
＜li＞＜a href="#"＞yyyyyyyyyyyyy＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞
＜/body＞
＜/html＞
```
<p>
我们会注意到，在第一个具有一个selected-plays的ID，但在li标签中却没有与之关联的类</p>
<p>
</p>
- 上面html生成的样子如图所示：
假如我们想让顶级的项，而且只有顶级的项水平排列，该怎么办？
解决办法如下：
我们可以现在样式列表中定义一个horizontal类。
horizontal代码如下：
<pre class="brush:css;"> .horizontal{
float:left;
list-style:none;
margin:10px;
}
```
<p>
在这里就不在对horizontal类的作用做解释了。</p>
<p>
这里，我们并没有直接在html中添加horizontal类，而只是将它动态地添加给位于顶级的列表Comedies Tragedies 和History，以便示范jquery中选择符的用法：</p>
<p>
jquery代码如下：</p>
<pre class="brush:jscript;"> ＜script type="text/javascript"＞
$(document).ready(function(){
$('#selected-plays ＞ li').addClass('aa');
});
＜/script＞
```
<p>
我们可以把上面的两段代码写在html页面中，也可以写到外部，本人推荐后者。</p>
<p>
到这里页面的样子如下图所示：</p>
<p>
<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294986648.png" style="width: 539px; height: 148px;"></p>
<p>
我们可以对上面的代码做一些简单的修改：</p>
<p>
在页面中在添加一个类，代码如下：</p>
<pre class="brush:css;"> .sub-level{ background:#ccc;}
```
<p>
jquery代码如下：</p>
<pre class="brush:jscript;"> ＜script type="text/javascript"＞
$(document).ready(function(){
$('#selected-plays ＞ li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-lebel');
});
＜/script＞
```
<p>
添加了上面的两段代码后页面的样子如图所示：</p>
<p>
<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294986659.png" style="width: 590px; height: 128px;"></p>
<p>
对整个文章中某些标签的注释：</p>
<p>
$(document).ready()时，位于其中的所有代码都会在DOM加载后立即执行。</p>
<p>
">"符号：作用是将horizontal类只添加到顶级的相中。</p>
<p>
对于这两个标签不理解也没有关系，后面还会多次出现。</p>
<p>
好了 今天就到这把，明天继续。</p>
jQuery document ready onload click
更新于 2023年03月28日
