Hobo的jQuery学习笔记（4）-是不是应该做点什么
有几个朋友说找到东西jQuery就学会了。当然，我作为一个初学者并不敢下断言，但是通过今天仔细的看了看下面一些关于控制的东西，才发现找到东西之后jQuery的确已经基本上学会了。
但是今天仍然要继续学习下去，只要掌握下面的一小部分，也就是说入门了。这样就足够用来做一些东西了。或许是很丑的东西，毕竟我不是大师。我是菜鸟。
既然我们已经找到了我们要控制的东西,那么让我们来看一下，接下来我们能做的事情：
为了少打几个字在这里用“E” 来代表我们找到的东西，也就是通过选择器选择的元素。
1.为我们找出来的东西添加（或移除）一个class（或id）。
2.可以（获取）设置E的宽或高，当然也可以获取E的内部宽高，外部宽高。
3.我们可以获取E的位置，jQuery的API上写的是获取偏移。（包括对窗口的，对上级元素的等等）。
4.我们可以取得E的css中某个属性的值，当然我们也可以设置其CSS属性。
5.我们也可以对E进行各种修改，如插入、替换、删除、包裹（例如在其外层加个div）等等
6.当然我们也可以获取某个元素（例如<P>）中的内容。
7.或者我们也可以获取或修改某个表单元素（文本框、单选框）的内容。
8.jQuery如此强大的也为我们提供了很多动态效果：滑动、淡入淡出还有自定义效果。
很可能我这样写还是没有找得全面，我应该用一句话来概括，那就是：凡是你想得到的前台控制效果，jQuery应该都能实现。
好吧，让我来测试几个简单的，在之前我的第二个笔记中已经有过一个非常非常简单的例子了。今天应该再实践几个。
首先，上第二章笔记中我将一个class=class1 给了 我建立的页面中唯一的id=test1的div
现在我要做的是改变这个div的高度和宽度呵呵。
-
$(document).ready(function() {
-
$(“#test1″).addClass(“class1″)//这里是最初
-
.height(80)//设置此div的高度
-
.width(80);//设置此div的宽度
-
});
看一下上面的代码，注意heitht和width后面括号里面的数字，正常是应该有单位的，不过如果不填写的话默认是px，当然也可以填写%或者em。
如上图，看看我们得到了什么？ 是的一个宽80px高80px的方块，两周前还是一个长长的黑条。
好吧，我是一个懒惰的人，为了让自己对这东西更加感兴趣，我打算搞个好玩点的效果，试试，当然这很不漂亮，仅仅是好玩。
-
$(document).ready(function() {
-
$(“#test1″).addClass(“class1″)
-
.height(80)
-
.width(80)
-
.slideToggle(“slow”);//让方块滑动消失
-
});
这里没有截图了，因为这是一个动画，是呀，这个方块由下向上慢慢消失了。大家可以看到slideToggle这个函数后面的括号里有个”slow”，这里可以填入的是”slow”, “normal”, 或者”fast”这样三个字串分别代表了三种速度。分别是600、400、200毫秒（注意1000毫秒为1秒）。
当然这里也可以直接填写数字，但是要注意填写数字的时候没有引号，例如.slideToggle(20000) ，是的我尝试了20000这个数字，这让这个方块非常慢速的消失，让我有了充足的欣赏这个变化过程的时间（尽管很丑，但是我仍然很欣喜自己做了一个动态的效果）。
我在尝试的过程中使用了.animate({marginLeft: ‘+500px’}, “slow”) 这个自定义动画，这个的意思是说让这个方块在600毫秒的时间里移动到左边距500px的地方（如果其本身的左边距大于500，那它就会向左移动）。
让我们仔细看看这里定义的属性marginLeft，CSS不错的人会立刻产生疑惑，难道不是应该写成margin-left吗？ 这也是我希望我自己还有看这个文章的人能够注意的地方，在自定义动画的控制中必须要采用所谓的骆驼式，就是margin-right 要写成marginRight 请严重注意那个大写字母。如果只有一个字母的话，都是小写。
啊，我真的很厌烦这样不停的打字，也很厌烦看这种满篇都是文字的文章，但是没办法，有些东西必须详细的记录下来。
下面总结一些常用的可以用来改变你找到的东西的代码（函数）：
.show() 用来显示本来隐藏的东西，原来的东西应该有display: none这个属性。
.hide() 用来隐藏本来显示的东西。
以上两个函数都可以带参数，我不知道该怎么解释参数，还是看下面代码吧
-
$(document).ready(function() {
-
$(“#test1″).addClass(“class1″)
-
.height(80)
-
.width(80)
-
.hide(4000,function(){//这让test1优雅的隐藏并且
-
alert(“我隐藏了”);//执行了这个弹出窗口的函数
-
});
-
});
上面的.hide函数换行了，这可能对阅读造成了一些麻烦，不过没关系，我现在把它摆成一行：
.hide( 4000, function(){alert(“我隐藏了”);} )
其结构是： .hide(隐藏的毫秒数,隐藏后要执行的函数)
效果基本如下图：
本来打算在这里总结一些常用的函数，但是我实在是不想让一片文章长的让所有人都看不下去，尽管现在可能大部分人已经看不下去了哈哈。
我会在以后做一篇好一点的总结。至少，我现在能够控制某些以前不会控制的东西了。
您还可能感兴趣的文章：
19 评论 至 “Hobo的jQuery学习笔记（4）-是不是应该做点什么”
留言
我还没有这方面的知识,很佩服博主的钻研精神!
[回复]
我了解了下jQuery，知道它很强大
但是发现对于我这个代码文盲忒难了……
[回复]
既然大家都喜欢偷懒，可以考虑将
$(document).ready(function(){
…
})
简写为
$(function(){
…
})
[回复]
Hobo 回复:
十月 12th, 2009 at 11:31 上午
哦,学习了呵呵
[回复]
为什么 你每次出的笔记都很简单，而出的题却很难呢！！
[回复]
Hobo 回复:
十月 7th, 2009 at 2:27 下午
这次的笔记出题了吗?
[回复]
随影 回复:
十月 9th, 2009 at 9:47 下午
上次的约瑟夫换问题 好经典啊！
[回复]
我来看看，谢谢楼主在我博客留言了……
[回复]
Hobo 回复:
九月 28th, 2009 at 9:20 下午
欢迎常来哈哈,多多交流
[回复]
哈哈！坚持就是胜利。
[回复]
Hobo 回复:
九月 27th, 2009 at 7:43 下午
哎,慢慢坚持吧,我是个很懒惰的人
[回复]
厉害啊，好像挺强大的JQ
[回复]
Hobo 回复:
九月 27th, 2009 at 8:23 上午
非常之强大
[回复]
学习了，谢谢。
[回复]
Hobo 回复:
九月 27th, 2009 at 8:19 上午
欢迎呵呵
[回复]
呵呵 加油吧 最近也想学jQuery呢 不过基础不够 慢慢学吧 要学的东西太多～～
[回复]
Hobo 回复:
九月 27th, 2009 at 8:18 上午
想学的话其实很容易呵呵,多找一些教程,主要是多动手.你的博客地址打错了呵呵,帮你改一下
[回复]
不错的文章,学习了.
[回复]
Hobo 回复:
九月 27th, 2009 at 8:28 上午
大家共同学习,共同进步嘛
[回复]