omiga

接前文——使用jQuery进行便捷web开发

严格来说这些东西都没有多少原创性可言，只是总结一些东西，方便自己，也顺便方便一下别人～

jQuery的选择器是极其强大并且有趣的，他结合了CSS1，CSS2，部分CSS3以及部分XPath的语法，同时并有一些专有的扩展 ，这样，使用起来便得心应手。

最基本的选择器

• #id 通过id获取对象你就可以这样写了$(”#id”)，而不用再getElementById(”id”)，当然实际上，很多人都在自己定义$的getElementById方法；
• #.class 通过class获取对象，javascript中是没有专门的类似函数的
• element 类似于getElementsByTagName
• * 用于匹配所有元素
• 组合选择器 直接将CSS中组合选择器的思想引用过来，各选择器之间以逗号区分，如：$(”#id,.class,h1″)

层级选择器

• $(”parent children”) 匹配给定祖先元素下的所有后代元素，如：$(”form input”)将匹配所有表单元素中的input元素
• parent > child 匹配给定祖先元素下的子元素，而非所有后代元素
• prev + next 匹配一个有效选择器pre后紧接着的第一个选择器
• prev ～ siblings 匹配一个有效选择器pre后的所有同级选择器

基本滤镜

• :first 匹配返回对象中的第一个元素，如：$(”div:first”)将返回DOM树中的第一个div
• :last 匹配返回对象中的最后一个元素
• :not 去除所有与给定选择器匹配的元素，如：$(”div:not(’.post’)”)将返回class部位“post”的所有div元素
• :even 匹配所有索引值为偶数的元素，从 0 开始计数，这个选择器在制作“斑马线”是十分有效，如：$(”td:even”).css(”backgroundColor”,”#FFF”)
• :odd 匹配所有索引值为奇数的元素
• :eq(index) 匹配一个给定索引值的元素，如：$(”p:eq(0)”)将返回文档中的第一个文本段落
• :gt(index) 匹配所有大于给定索引值的元素
• :lt(index) 匹配所有小于给定索引值的元素
• :header 匹配如 h1, h2, h3之类的标题元素
• :animated 匹配所有正在执行动画效果的元素，如：$(”div:not(:animated)”)

子元素滤镜

• :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素

  ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用
  :nth-child(even)
  :nth-child(odd)
  :nth-child(3n)
  :nth-child(2)
  :nth-child(3n+1)
  :nth-child(3n+2)
  如：$(”ul li:noth-child(2)”)将匹配所有ul下的第二个li元素

• :first-child 匹配第一个子元素，如$(”ul li:first-child”)将匹配ul的第一个li元素
• last-child 匹配最后一个子元素
• only-child 当该元素为其父元素的唯一子元素时将被匹配

属性滤镜

• [attribute] 匹配包含特定属性的元素，如：$(”img[title]“)将匹配所有拥有title属性呃img元素
• [attribute=value] 匹配特定属性为特定值的元素，如：$(”img[title='点击查看原图']“)匹配所有title属性为“点击查看原图”的img元素
• [attribute^=value] 匹配特定属性其值以特定字符为起始值的元素，如：$(”img[title^='点击']“)匹配所有title属性以“点击”开始的img元素
• [attribute$=value] 匹配特定属性其值以特定字符结尾的元素
• [attribute*=value] 匹配特定属性其值包含特定字符的元素
• 复合属性选择器 如：$(”img[title^='点击'][title$='原图']“)

表单滤镜

• :input 匹配所有 input, textarea, select 和 button 元素，如：$(:input)
• :text 匹配所有的单行文本框
• :password 匹配密码域
• :radio 匹配单选按钮
• :checkbox 匹配复选框
• :sumbit 匹配提交按钮
• :image 匹配图像域
• :reset 匹配重置按钮
• :buttom 匹配按钮
• :file 匹配文件域
• :enabled 匹配所有可用的元素
• :disabled 匹配所有禁用的元素
• :checked 匹配所有被选中的表单
• :selected 匹配所有选择的表单
• :hidden 匹配所有不可见元素，或者type为hidden的元素

其他滤镜

• :contains(text) 匹配包含给定文本的元素，如：$(”p:contains(’jQuery’)”)将匹配包含”jQuery”的所有段落元素
• :empty 匹配所有不包含子元素或者文本的空元素
• :has 匹配所有不包含子元素或者文本的空元素，如：$(”div:has(’p')”)将匹配所有包含有段落元素的div元素
• :parent 匹配含有子元素或者文本的元素
• :visible 匹配所有的可见元素

本文相关链接：

• jQuery1.2 API
• jQuery for JavaScript programmers 原文 译文

咳咳～这个题目～不废话吗～谁写JS框架是为了进行“笨重”开发？嗯～这个～囧～OK，不废话了…接触jQuery有一段时间了，关于jQuery本身我就不再多做介绍，大家可以随意google或者baidu，也可访问jQuery的官方网站~…个人认为只要稍有编程基础，jQuery的学习还是比较轻松的。当然如果你掌握一点DOM，CSS的知识就更好了～这不是一篇教程，而是一点个人学习的总结，所以谈及比较重要的一些知识点。

使用jQuery进行开发时需要改变一些惯有的编程习惯，或者说是编程风格。其中最重要的一点便是DOM对象和jQuery对象之间的类型转换。因为单纯的jQuery对象是无法使用DOM定义的方法和属性的，jQuery对象和DOM对象之间的方法是不能混用的。比如有$(”.myClass”)这样一个jQuery对象，可以通过以下方法来进行类型的转换：

1. $(”.myClass”)[0]，直接获取该jQuery对象中的第一个元素。当然如果你是$(”#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
2. $(”.myClass”).get(0)，其等价于$(”.myClass”)[0]，没什么区别

$(document).ready(function(){})，$(function(){})和jQuery(function(){})这三种写法有什么区别吗？我现在也没弄清楚。在传统的javascript中，window.onload似乎是用来装载JS的唯一方法，但是这个方法却有明显的弊端。因为onload事件本身就是在整个页面内容下载完成后才触发，包括图片。但实际上在很多时候这是不需要的，JS很多时候用来操纵DOM，那么只需要DOM树下载完成就可以了，那么这个时候你就可以用$(document).ready()来，DOM树装载完成即可触发。

jQuery支持方法的连写，什么意思？在传统JS中一个链接的简单hover效果你需要分别为onmouseover和onmouseout事件定义事件函数。但是在jQuery中可以这样写

怎么样？很简单吧～当然你如果愿意你可以继续在后面添加事件函数，比如：

同一函数实现set和get。比如html()：

这类函数即可以用来获取值，同时也能设置值。这样的函数还有：text()，height()，weidth()，val()，其实css()，click()也可以算是这类函数～···，这样一来其实整个jQuery里面的函数很多都是既可以set也可以get的～

jQuery中的事件触发皆省略掉传统javascript中的on，本文前面已有例子。比如传统方法你得这样写：

而在jQuery中你可以简单地写成这样：

除此之外jQuery中还有一些自定义的事件：hover()，ready()，toggle()，triggle()，bind()，unbind()，这些事件函数具体定义请参考jQuery的API，在此不作赘述。

浏览器的判断$.browser，可用值：safari，opera，msie，mozilla。该属性在DOM装载完成之前就是有效的，故可以通过此属性先判断浏览器类型，再为特定浏览器编写程序。

利用noConflict()实现多库共存。我们知道这个地球上不止jQuery这样一个JS框架，还有大名鼎鼎的prototype，YUI，Dojo等～有时难免会同时使用多个框架，难免发生命名冲突。就比如“$”在prototype和jQuery中都有定义，如不做处理必然导致命名冲突。那么这时候我们就可以使用noConflict()函数将变量$的控制权让渡出来。

…….

除此之外，jQuery强大的选择器，是学习jQuery必须牢固掌握的，关于jQuery选择器，将单独撰文介绍～

严格来说jQuery只是一个封装了一些函数的JS类库，如果你熟悉javascript，那么掌握jQuery应该来说是没有任何难度的，所以jQuery很多精髓的东西可能还是其一些功能强大 的函数，函数的具体使用介绍可参考jQuery的API。同时互联网上也有很多jQuery的学习资料，稍花时间便可掌握。

附：一些jQuery学习资源

• jQuery官方网站
• jQuery中文社区
• 15 Days Of jQuery 中文版 英文版
• jQuery起点教程
• jQuery for Javascript programers
• jQuery 1.2 API

昨晚上3点钟才睡觉～···汗，可能是几个月来睡得最晚的一次了～···今早8：30起的床，其实8点就醒了，然后躺着想问题～想什么记不得了～囧～然后又是折腾到现在～···

折腾什么呢？测试插件～···住的地方网速似乎不是很快，有的插件也不小，同时文件很多～···传起来就有点慢了～···折腾了这么久貌似没有什么成效，装的相关日志那个插件，CSS还有问题，会与WP-Syntax有点冲突，凭己之力是无法搞定了～···

我前两天好像看到有人说WP用的jQuery？我在WP的文件目录中看到既有prototype又有jQuery，但是自带的jQuery貌似有问题无法使用～最后重新下载jQuery覆盖之就OK了～

随机地修改一些wondger.com下的链接，原有的一些图片都太大，会影响“相关日志”列表，写句代码判断下改小一点，并支持在新窗口查看原图～

这个theme是别人的，我小改了一下，但是还是不那么得心应手。有时间好好研究下WP，然后自己写个theme吧～其实～···早就画出来了～··· 嗯，等有空吧～···

貌似我还是很有激情滴～···orz～

改名换姓，重新做人～！

自己也不知道要怎么念“wondger”，所以干脆直接起个响亮的名头——“omiga” ～

这个名字是很久很久以前，高中时同桌一MM起得，哈哈～当时总把名字中的“W”写成“ ω”，于是乎，有了这个名字，我还比较喜欢，至少叫起来比较上口～···YYing～- -！

中文版本：噢咪咖

纯天然绿色无污染logo：Ω

多么完美～···

从PJBlog到wordpress还算比较顺利，新买的空间自己也比较满意，速度还不错～···感谢PJBlog陪我度过的五个月时间～···今天正式拥抱wordpress～···

原来wondger.com的友情链接我会部分转移到该域名下～其实那个米也有3的PR值～···

最后——闭幕词

感谢CCTV,ChinaTV，MV～···感谢TV～···感谢叉叉TV～···还有～···

感谢伟大的PJBlog～···

感谢伟大的WordPress～···

感谢伟大的me～···

最后再感谢爹地，妈咪～···

准备投奔WP了，其实最开始建立这个blog时就考虑过用WP，但是由于种种原因没有用，投奔WP 是一直的愿望～···

PJblog用了几个月了，其实还算不错，但是我准备换个快点的空间，那么就随便把blog转到WP，PJblog到WP的数据转换 还是比较容易的，wordpress中文论坛也有一个专门讨论各种blog程序到wp的转换方法：http://wordpress.org.cn/thread-7278-1-1.html

我用的http://old.marmotd.com/2007/10/asp-to-wordpress-tool.html，转换非常完美。

能将数据完好转换过去工作就完成了一半，剩下的一半就是买空间了。最近事情也比较多，上次在QQ签名上说要买PHP空间，结果一大推人找我卖～··· ，但是都不太满意～····继续找，有人给我介绍dreamhost，很好很强大～···但是不知道操作起来是否方便～考察中~“`哪位同学有好的建议，也欢迎留言～···

还有一个十分棘手的问题是，我的网上银行密码给忘记了～···恩～···周末去找回来～···

且先在FF和IE中查看页面显示差异～···Demo

很多时候需要在一个容器的右边添加一个“more”，我不喜欢浮动，惯用的做法是使用绝对定位。那么为其父层设置position:relative，同时为了保证文本垂直居中对齐，并为之添加line-height属性。有时候line-height是可以当height用的，因为line-height也可以撑开高度。当时这种做法会在IE中产生问题～···Y？不知道～···解决办法依然是触发对象的layout属性～···

IE8的消息也炒了很长一段时间了，M$终于放出了β版。速度相当快～···我还以为要年底～···

新特性：

1. 支持微格式
2. 完美支持CSS2.1，部分支持CSS3
3. 可通过来选择需要的渲染引擎
4. WebSlices（网站订阅）
5. Activities（活动内容服务）
6. ~……

可到此处下载安装http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm

PS：我没有装呃～据说对CSS2.1支持完美，但是对JS标准支持还不是那么完美～···我要等正式版～···唉，IE6都还没甩掉，以后又多了个IE8～···

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,
h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre{display:block;}
li{display:list-item;}
head{display:none;}
table{display:table;}
tr{display:table-row;}
thead{display:table-header-group;}
tbody{display:table-row-group;}
tfoot{display:table-footer-group;}
col{display:table-column;}
colgroup{display:table-column-group;}
td,th{display:table-cell;}
caption{display:table-caption;}
th{font-weight:bolder; text-align:center;}
caption{text-align:center;}
body{margin:8px; line-height:1.12;}
h1{font-size:2em; margin:.67em 0;}
h2{font-size:1.5em; margin:.75em 0;}
h3{font-size:1.17em; margin:.83em 0;}
h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{margin:1.12em 0;}
h5{font-size:.83em; margin:1.5em 0;}
h6{font-size:.75em; margin:1.67em 0;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:bolder;}
blockquote{margin-left:40px; margin-right:40px;}
i,cite,em,var,address{font-style:italic;}
pre,tt,code,kbd,samp{font-family:monospace;}
pre{white-space:pre;}
button,textarea,input,object,select{display:inline-block;}
big{font-size:1.17em;}
small,sub,sup{font-size:.83em;}
sub{vertical-align:sub;}
sup{vertical-align:super;}
table{border-spacing:2px;}
thead,tbody,tfoot{vertical-align:middle;}
td,th{vertical-align:inherit;}
s,strike,del{text-decoration:line-through;}
hr{border:1px inset;}
ol,ul,dir,menu,dd{margin-left:40px;}
ol{list-style-type:decimal;}
ol ul,ul ol,ul ul,ol ol{margin-top:0; margin-bottom:0;}
u,ins{text-decoration:underline;}
br:before{content:"\A";}
:before,:after{white-space:pre-line;}
center{text-align:center;}
abbr,acronym{font-variant:small-caps; letter-spacing:0.1em;}
:link,:visited{ text-decoration:underline;}
:focus{outline: thin dotted invert;}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]{direction:ltr; unicode-bidi:bidi-override;}
BDO[DIR="rtl"]{direction:rtl; unicode-bidi:bidi-override;}
*[DIR="ltr"]{direction:ltr; unicode-bidi:embed;}
*[DIR="rtl"]{direction:rtl; unicode-bidi:embed;}
@media print{
h1{ page-break-before: always;}
h1,h2,h3,h4,h5,h6{page-break-after:avoid;}
　　ul,ol,dl{page-break-before:avoid;}
}

很久没有更新这个分类了，好像确实也是没有什么值得要记一笔的新闻。微软要买yahoo？但是也没买～··.也不能发CGX同学的照片，那是娱乐圈的事～···

这两天似乎大家都在谈friendfeed，的确是个好东西～···可以整合进很多东西～···但是我这个blog却是share不了的～···应该跟PJblog的rss输出方式有关～

除此之外呢，好像baidu的IM——Hi这几天确实很high～···李彦宏更在其baidu空间上放出了《大家很快就可以一起high了》的文章。关于Hi，似乎现在整个网上都没有太多介绍～···虽然也有人放出了beta版安装，但据说安装上是无法使用的～···前不久不说还有mail？等～

昨天中午才到～···站了一晚上火车，根本没合眼～···下午又赶回公司～···唉～···

在长沙待了四天，说是回去选题毕业设计，其实主要是玩，主要是吃饭，天天都有人请吃饭，别人请，自己请～···

毕业设计没特别合适的题目，自己又懒得选，就选了个现成的《个人数字图书馆设计与实现》，老师定这个题目是C/S，如果改成B/S，我准备翻版下del.icio.us~“`三个月时间，五月底返回学校答辩～···

费劲周折还是把1.5G歌拷过来了，自己电脑几个月不用又出问题了，也懒得管，直接把硬盘拆下来换到CCZ的机子上～···

回去见了一些人，还有一些人本来约好，但是由于时间仓促没见着，实在抱歉，希望下次有足够的时间咯～···